Silverlight啓動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的子元素，在這種情況下，它是一個Grid
• VisualState「MouseOverState」應重命名爲「MouseOver」
• 每個故事板都可以爲每個依賴項屬性設置一次動畫。您有4個雙動畫全部試圖爲Angle屬性設置動畫。您需要在這裏使用的是具有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>