Silverlight启动鼠标overstate动画不工作

本文关键字：工作 动画 overstate 启动 鼠标 Silverlight | 更新日期: 2023-09-27 18:18:36

我为一个按钮写了一个样式，让它在鼠标停留在它上面时稍微旋转一下。不幸的是，动画没有开始。

我在我的应用程序中为另一个按钮类型创建了一个类似的样式，它使用VisualStateManager，并且工作得很好，所以我不认为这是VSM的问题。

似乎动画有问题，但我找不到问题。

样式是这样的:

<Style x:Key="MyButton" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid>
                    <ContentPresenter Content="{TemplateBinding Content}">
                        <ContentPresenter.RenderTransform>
                            <TransformGroup>
                                <RotateTransform CenterX="0.5" CenterY="0.5" Angle="0" x:Name="content"/>
                            </TransformGroup>
                        </ContentPresenter.RenderTransform>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="MouseOverState">
                                    <Storyboard AutoReverse="True" RepeatBehavior="Forever">
                                        <DoubleAnimation From="0"  To="10" Duration="0:0:1" 
                                                 Storyboard.TargetProperty="Angle"
                                                         Storyboard.TargetName="content"/>
                                        <DoubleAnimation From="10"  To="0" Duration="0:0:1" BeginTime="0:0:1" 
                                                 Storyboard.TargetProperty="Angle"
                                                         Storyboard.TargetName="content"/>
                                        <DoubleAnimation From="0"  To="-10" Duration="0:0:1" BeginTime="0:0:2" 
                                                 Storyboard.TargetProperty="Angle"
                                                         Storyboard.TargetName="content"/>
                                        <DoubleAnimation From="-10"  To="0" Duration="0:0:1" BeginTime="0:0:3" 
                                                 Storyboard.TargetProperty="Angle"
                                                         Storyboard.TargetName="content"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </ContentPresenter>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

我也试过

 Storyboard.TargetProperty="(ContentPresenter.RenderTransform).(RotateTransform.Angle)"

Silverlight启动鼠标overstate动画不工作

这个模板有几个问题:

  • VisualStateManager。VisualStateGroups元素需要成为第一个FrameworkElement的子元素，在本例中是一个Grid
  • VisualState "MouseOverState"应该重命名为"MouseOver"
  • 每个故事板可以动画每个依赖属性一次。你有4个双动画都试图动画角度属性。你需要在这里使用的是一个有LinearDoubleKeyframes或EasingDoubleKeyframes的DoubleAnimationUsingKeyframes。

下面是这个模板的工作版本:

<Style TargetType="Button" x:Key="MyButton">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="MouseOver">
                                <Storyboard AutoReverse="True" RepeatBehavior="Forever">
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Angle" Storyboard.TargetName="content">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="0" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="10"/>
                                        <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
                                        <EasingDoubleKeyFrame KeyTime="0:0:3" Value="-10"/>
                                        <EasingDoubleKeyFrame KeyTime="0:0:4" Value="0"/>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <ContentPresenter Content="{TemplateBinding Content}">
                        <ContentPresenter.RenderTransform>
                            <TransformGroup>
                                <RotateTransform CenterX="0.5" CenterY="0.5" Angle="0" x:Name="content"/>
                            </TransformGroup>
                        </ContentPresenter.RenderTransform>
                    </ContentPresenter>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
相关文章：