Silverlight start Animation on MouseOverState не работает

Question

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

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

Answer 1

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

• В VisualStateManager.VisualStateGroups элементы должен быть ребенком вашего первого элемента FrameworkElement, который в этом случае является сеткой
• 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>