使用VisualStateManager來啓動和停止故事板

Question

我有一個動畫，通過將它無限旋轉360度（它基本上旋轉）來動畫Canvas。我想要的是這個動畫在顯示控件時開始，然後在控件隱藏時停止。我想我可以把它與VisualStateManager聯繫起來。我所看到的進出控制here衰落這可以工作，但我只是不知道如何使用VSM啓動和停止故事板

<Canvas.Resources> 
    <Storyboard x:Name="spinnerBoard"> 
     <DoubleAnimation 
      Storyboard.TargetName="SpinnerRotate" 
      Storyboard.TargetProperty="Angle" 
      From="0" To="360" Duration="0:0:01.3" 
      RepeatBehavior="Forever" /> 
    </Storyboard> 
</Canvas.Resources> 

<Canvas.RenderTransform> 
    <RotateTransform x:Name="SpinnerRotate" Angle="0" /> 
</Canvas.RenderTransform> 

例VSM

<VisualState x:Name="Show"> 
    <Storyboard> 
     <!-- Start the story board here --> 
    </Storyboard> 
</VisualState> 
<VisualState x:Name="Hide"> 
    <Storyboard> 
     <!-- Stop the story board here --> 
    </Storyboard> 
</VisualState> 

Answer 1

的全球答案的例子你不同的問題：
ExtendedVisualStateManager.GoToElementState returns false in Silverlight
Default binding to UserControl for custom DP

你可以做這樣的事情：

1. 使用擴展ContentControl模板控制與 IsEnabled的播放內容（防止等待期間動作）;
2. 創建一個DP IsWaiting切換您的控制視覺狀態;與RepeatBehavior="Forever"

使用DoubleAnimation後，您可以添加一個覆蓋和等待消息依賴屬性喜歡熱鬧的指標控制...

我用一張圖片爲：

創建XAML兩種狀態等待視覺的一部分，但你可以使用一個畫布，網格等...

C＃

[TemplateVisualState(GroupName = "WaitGroup", Name = WaitSpinner.IsWaitingStateName)] 
[TemplateVisualState(GroupName = "WaitGroup", Name = WaitSpinner.NotWaitingStateName)] 
public class WaitSpinner : ContentControl 
{ 
    #region States names 
    internal const String IsWaitingStateName = "IsWaitingState"; 
    internal const String NotWaitingStateName = "NotWaitingState"; 
    #endregion States names 

    public bool IsWaiting 
    { 
     get { return (bool)GetValue(IsWaitingProperty); } 
     set { SetValue(IsWaitingProperty, value); } 
    } 

    public static readonly DependencyProperty IsWaitingProperty = 
     DependencyProperty.Register("IsWaiting", typeof(bool), typeof(WaitSpinner), new PropertyMetadata(false, OnIsWaitingPropertyChanged)); 

    private static void OnIsWaitingPropertyChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e) 
    { 
     WaitSpinner waitSpinner = (WaitSpinner)sender; 
     waitSpinner.ChangeVisualState(true); 
    } 

    public WaitSpinner() 
    { 
     DefaultStyleKey = typeof(WaitSpinner); 
    } 

    public override void OnApplyTemplate() 
    { 
     base.OnApplyTemplate(); 
     ChangeVisualState(false); 
    } 

    protected virtual void ChangeVisualState(bool useTransitions) 
    { 
     VisualStateManager.GoToState(this, IsWaiting ? IsWaitingStateName : NotWaitingStateName, useTransitions); 
    } 
} 

的XAML：

<VisualStateGroup x:Name="WaitGroup"> 
    <VisualState x:Name="NotWaitingState" > 
     <Storyboard> 
      <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Control.IsEnabled)" Storyboard.TargetName="content"> 
       <DiscreteObjectKeyFrame KeyTime="0"> 
        <DiscreteObjectKeyFrame.Value> 
         <System:Boolean>True</System:Boolean> 
        </DiscreteObjectKeyFrame.Value> 
       </DiscreteObjectKeyFrame> 
      </ObjectAnimationUsingKeyFrames> 
     </Storyboard> 
    </VisualState> 
    <VisualState x:Name="IsWaitingState"> 
     <Storyboard> 
      <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="WaitPart"> 
       <DiscreteObjectKeyFrame KeyTime="0:0:0.200" Value="Visible"/> 
      </ObjectAnimationUsingKeyFrames> 
      <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" Storyboard.TargetName="WaitPart" To="360" RepeatBehavior="Forever" Duration="0:0:1" /> 
      <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Control.IsEnabled)" Storyboard.TargetName="content"> 
       <DiscreteObjectKeyFrame KeyTime="0"> 
        <DiscreteObjectKeyFrame.Value> 
         <System:Boolean>False</System:Boolean> 
        </DiscreteObjectKeyFrame.Value> 
       </DiscreteObjectKeyFrame> 
      </ObjectAnimationUsingKeyFrames> 
     </Storyboard> 
    </VisualState> 
</VisualStateGroup> 
<!-- ............. --> 
<ContentControl 
    IsTabStop="False" 
    x:Name="content" 
    Content="{TemplateBinding Content}" 
    ContentTemplate="{TemplateBinding ContentTemplate}" 
    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" 
    Foreground="{TemplateBinding Foreground}" 
    ScrollViewer.HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" 
    ScrollViewer.VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"/> 
<Image Source="CirclePicture.png" 
    x:Name="WaitPart" 
    RenderTransformOrigin="0.5,0.5" 
    Width="16" 
    Height="16" 
    Visibility="Collapsed" 
    IsHitTestVisible="False"> 
    <Image.RenderTransform> 
     <RotateTransform /> 
    </Image.RenderTransform> 
</Image>