在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

您是否看过按钮样式和模板 ？ 您需要将这些情节VisualStateManager.VisualStateGroups板放置在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>