在 Silverlight 中使用图像作为按钮。为什么我的 mouseOver 方法不起作用？

Question

我想使用图像在 Silverlight 中创建一个按钮，该按钮具有使按钮看起来可点击的基本效果。我创建了一个 .png 图标并编写了一些代码，以使该图像在情节提要中的鼠标悬停时稍大一些。这是我第一次尝试做这样的事情，所以我假设我遗漏了对其中一个静态资源的一些简单调用。我错过了什么？ ：

<Style TargetType="Button"
                 x:Key="styleA">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid x:Name="RootElement"
                            Background="Transparent">
                            <Grid.Resources>
                                <Storyboard x:Key="MouseOver State">
                                    <DoubleAnimation Storyboard.TargetName="buttonScale"
                                                Storyboard.TargetProperty="ScaleX"
                                                To="1.2"
                                                Duration="00:00:00.25"/>
                                    <DoubleAnimation Storyboard.TargetName="buttonScale"
                                                Storyboard.TargetProperty="ScaleY"
                                                To="1.2"
                                                Duration="00:00:00.25" />
                                </Storyboard>

                                <Storyboard x:Key="Normal State">
                                    <DoubleAnimation Storyboard.TargetName="buttonScale"
                                                Storyboard.TargetProperty="ScaleX"
                                                To="1"
                                                Duration="00:00:00.25" />
                                    <DoubleAnimation Storyboard.TargetName="buttonScale"
                                                Storyboard.TargetProperty="ScaleY"
                                                To="1"
                                                Duration="00:00:00.25" />
                                </Storyboard>

                                <Storyboard x:Key="Pressed State">
                                    <DoubleAnimation Storyboard.TargetName="buttonScale"
                                                Storyboard.TargetProperty="ScaleX"
                                                To="1.4"
                                                Duration="00:00:00.25" />
                                    <DoubleAnimation Storyboard.TargetName="buttonScale"
                                                Storyboard.TargetProperty="ScaleY"
                                                To="1.4"
                                                Duration="00:00:00.25" />
                                </Storyboard>


                            </Grid.Resources>
                            <ContentPresenter Content="{TemplateBinding Content}"
                                           RenderTransformOrigin="0.5,0.5">
                                <ContentPresenter.RenderTransform>
                                    <ScaleTransform x:Name="buttonScale" />
                                </ContentPresenter.RenderTransform>
                            </ContentPresenter>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>

            </Setter>
        </Style>

如您所见，一个足够简单的故事板。现在，当我实现我的按钮时，什么也没有发生。我究竟做错了什么？这是我创建按钮的代码：

    <StackPanel>
        <Button Width="50"
           x:Name="Test"
           Style="{StaticResource styleA}">
            <StackPanel Orientation="Vertical">
                <Image Source="test.png" />
                <TextBlock Text="Please get bigger" />
            </StackPanel>
        </Button>
    </StackPanel>

Answer 1

你看过Button Styles and Templates吗？您需要将这些故事板放在VisualStateManager.VisualStateGroups 中，如下所示：

<ControlTemplate TargetType="Button">
    <Grid x:Name="RootElement" Background="Transparent">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="MouseOver">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="buttonScale" Storyboard.TargetProperty="ScaleX" To="1.2" Duration="00:00:00.25"/>
                        <DoubleAnimation Storyboard.TargetName="buttonScale" Storyboard.TargetProperty="ScaleY" To="1.2" Duration="00:00:00.25" />
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Pressed">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="buttonScale" Storyboard.TargetProperty="ScaleX" To="1.4" Duration="00:00:00.25" />
                        <DoubleAnimation Storyboard.TargetName="buttonScale" Storyboard.TargetProperty="ScaleY" To="1.4" Duration="00:00:00.25" />
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Normal"/>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <ContentPresenter Content="{TemplateBinding Content}" RenderTransformOrigin="0.5,0.5">
            <ContentPresenter.RenderTransform>
                <ScaleTransform x:Name="buttonScale" />
            </ContentPresenter.RenderTransform>
        </ContentPresenter>
    </Grid>
</ControlTemplate>