Анимация запуска Silverlight на MouseOverState не работает - PullRequest
Новая
       13

Анимация запуска Silverlight на MouseOverState не работает

0 голосов
/ 23 декабря 2011

Я написал стиль для кнопки, чтобы она могла немного вращаться, когда мышь находится над ней.К сожалению, анимация не запускается.

Я создал аналогичный стиль для другого типа кнопок в моем приложении, которое также использует 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)"

1 Ответ

1 голос
/ 03 января 2012

У вас есть несколько проблем с этим шаблоном:

  • Элементы VisualStateManager.VisualStateGroups должны быть дочерними элементами вашего первого FrameworkElement, который в данном случае является Grid
  • .VisualState «MouseOverState» следует переименовать в «MouseOver»
  • Каждая раскадровка может анимировать каждое свойство зависимости один раз.У вас есть 4 двойных анимации, каждая из которых пытается анимировать свойство Angle.Здесь вам нужно использовать DoubleAnimationUsingKeyframes с LinearDoubleKeyframes или EasingDoubleKeyframes.

Вот рабочая версия этого шаблона: 

<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>
...