가시성 기반의 스토리 보드 애니메이션 중지/시작

Question

Control이로드되면 애니메이션이 시작됩니다 (애니메이션은 본질적으로 대기 스피너이며 대기열은 ContentControl입니다).

그러나 애니메이션은 끊임없이 리소스를 사용합니다. 애니메이션 컨트롤이 표시되는지 여부에 따라 애니메이션 시작/중지가 가능합니까?

<Canvas.Triggers> 
    <EventTrigger RoutedEvent="ContentControl.Loaded"> 
     <BeginStoryboard> 
      <Storyboard> 
       <DoubleAnimation 
       Storyboard.TargetName="SpinnerRotate" 
       Storyboard.TargetProperty="Angle" 
       From="0" To="360" Duration="0:0:01.3" 
       RepeatBehavior="Forever" /> 
      </Storyboard> 
     </BeginStoryboard> 
    </EventTrigger> 
</Canvas.Triggers> 

나는이 실버 라이트와 WPF 모두 작업이 있어야합니다.

Answer 1

우아하지는 않지만 작동 할 수 있습니다.

<Border x:Name="square" Height="20" Width="20" Background="Aqua"> 
     <Border.Triggers> 
      <EventTrigger RoutedEvent="Loaded"> 
       <BeginStoryboard> 
        <Storyboard x:Name="spinner"> 
         <DoubleAnimation 
          Storyboard.TargetName="square" 
          Storyboard.TargetProperty="Opacity" 
          From="1" To="0" Duration="0:0:01.3" 
          AutoReverse="True" 
          RepeatBehavior="Forever" /> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger> 
     </Border.Triggers> 
     <Border.Style> 
      <Style> 
       <Style.Triggers> 
        <DataTrigger Binding="{Binding Source={RelativeSource Self}, Path=Visibility}" Value="{x:Static Visibility.Collapsed}"> 
         <DataTrigger.EnterActions> 
          <StopStoryboard BeginStoryboardName="spinner"/> 
         </DataTrigger.EnterActions> 
        </DataTrigger> 
       </Style.Triggers> 
      </Style> 
     </Border.Style> 
    </Border> 

Answer 2

나는 Visibility 특성을 기반으로 Ellipse 회전의 예를 만들었습니다. 아마 당신은 이걸로 뭔가를 사용할 수 있습니다.

<Canvas> 
    <Ellipse x:Name="Circle" Width="30" Height="30" 
      Canvas.Left="50" 
      Canvas.Top="50"> 
     <Ellipse.Fill> 
      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
       <GradientStop Color="Black" Offset="0"/> 
       <GradientStop Color="White" Offset="1"/> 
      </LinearGradientBrush> 
     </Ellipse.Fill> 
     <Ellipse.RenderTransform> 
      <RotateTransform x:Name="SpinnerRotate" CenterX="15" CenterY="15"/> 
     </Ellipse.RenderTransform> 
     <Ellipse.Style> 
      <Style TargetType="Ellipse"> 
       <Style.Triggers> 
        <Trigger Property="Visibility" Value="Visible"> 
         <Trigger.EnterActions> 
          <BeginStoryboard x:Name="SpinStoryboard"> 
           <Storyboard > 
            <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Angle" 
                From="0" To="360" Duration="0:0:01.3" 
                RepeatBehavior="Forever" /> 
           </Storyboard> 
          </BeginStoryboard> 
         </Trigger.EnterActions> 
         <Trigger.ExitActions> 
          <StopStoryboard BeginStoryboardName="SpinStoryboard"></StopStoryboard> 
         </Trigger.ExitActions> 
        </Trigger> 
       </Style.Triggers> 
      </Style> 
     </Ellipse.Style> 
    </Ellipse> 
</Canvas>