WPF : DataTrigger로 회전 애니메이션을 부드럽게 중지하는 방법

Question

애니메이션이 거의 멈추지 않고 이미지의 위치가 재설정되지만 애니메이션이 다음 360 °로 완전히 끝나기를 원합니다.

그것에 대한 아이디어가 있습니까?

XAML 코드 :

<Button 
    BorderThickness="0" 
    Cursor="Hand" 
    Command="{Binding RefreshCommand}"> 
    <Button.Template> 
     <ControlTemplate TargetType="Button"> 
      <Border> 
       <ContentPresenter /> 
      </Border> 
     </ControlTemplate> 
    </Button.Template> 
    <Image Source="../Resources/RefreshIcon.png"> 
     <Image.Style> 
      <Style> 
       <Setter Property="Image.RenderTransform"> 
        <Setter.Value> 
         <RotateTransform /> 
        </Setter.Value> 
       </Setter> 
       <Setter Property="Image.RenderTransformOrigin" Value=".5,.5"> 
       </Setter> 
       <Style.Triggers> 
        <DataTrigger Binding="{Binding IsRefreshing}" Value="True"> 
         <DataTrigger.EnterActions> 
          <BeginStoryboard Name="RotationStoryboard"> 
           <Storyboard> 
            <DoubleAnimation 
             Storyboard.TargetProperty="RenderTransform.Angle" 
             From="0" 
             To="360" 
             Duration="0:0:0.8" 
             RepeatBehavior="Forever" /> 
           </Storyboard> 
          </BeginStoryboard> 
         </DataTrigger.EnterActions> 
        </DataTrigger> 
        <DataTrigger Binding="{Binding IsRefreshing}" Value="False"> 
         <DataTrigger.EnterActions> 
          <RemoveStoryboard BeginStoryboardName="RotationStoryboard"/> 
         </DataTrigger.EnterActions> 
        </DataTrigger> 
       </Style.Triggers> 
      </Style> 
     </Image.Style> 
    </Image> 
</Button> 

그것이 더 일반적인 (또한 @Sheridans 게시물 아래에 내 의견을 참조) 할 UserControl이 투입되어야한다는 사실을 제외하고 최종 솔루션 :

<Button 
    BorderThickness="0" 
    Cursor="Hand" 
    Command="{Binding RefreshCommand}"> 
    <Button.Template> 
     <ControlTemplate TargetType="Button"> 
      <Border> 
       <ContentPresenter /> 
      </Border> 
     </ControlTemplate> 
    </Button.Template> 
    <Image 
     Name="RefreshImage" 
     Source="../Resources/RefreshIcon.png" 
     RenderTransformOrigin=".5,.5"> 
     <Image.Resources> 
      <Storyboard 
       x:Key="RotationStoryboard" 
       Completed="RotationStoryboardCompleted"> 
       <DoubleAnimation 
        Storyboard.Target="{Binding ElementName=RefreshImage}" 
        Storyboard.TargetProperty="RenderTransform.Angle" 
        From="0" 
        To="360" 
        Duration="0:0:1.5"> 
        <DoubleAnimation.EasingFunction> 
         <CircleEase EasingMode="EaseInOut"></CircleEase> 
        </DoubleAnimation.EasingFunction> 
       </DoubleAnimation> 
      </Storyboard> 
     </Image.Resources> 
     <Image.Style> 
      <Style> 
       <Setter Property="Image.RenderTransform"> 
        <Setter.Value> 
         <RotateTransform /> 
        </Setter.Value> 
       </Setter> 
       <Setter Property="Image.RenderTransformOrigin" Value=".5,.5"> 
       </Setter> 
       <Style.Triggers> 
        <DataTrigger Binding="{Binding IsRefreshing}" Value="True"> 
         <DataTrigger.EnterActions> 
          <BeginStoryboard> 
           <StaticResource ResourceKey="RotationStoryboard"/> 
          </BeginStoryboard> 
         </DataTrigger.EnterActions> 
        </DataTrigger> 
       </Style.Triggers> 
      </Style> 
     </Image.Style> 
    </Image> 
</Button> 

코드 숨김

public partial class SomeView 
{ 
    public SomeView() 
    { 
     InitializeComponent(); 
    } 

    private void RotationStoryboardCompleted(object sender, EventArgs e) 
    { 
     var viewModel = (ISomeViewModel)DataContext; 
     var storyboard = (Storyboard)((ClockGroup)sender).Timeline; 

     if (viewModel.IsRefreshing) 
     { 
      storyboard.Begin(); 
     } 
    } 
} 

Answer 1

XAML에서이 작업을 수행 할 수있는 방법을 모르지만 코드를 사용하면 Timeline.Completed Event을 사용할 수 있습니다. 당신이 당신의 Storyboard에 핸들러를 첨부 할 경우, 그것은이 완료 될 때 호출되는 것입니다 그리고 당신은 당신이 원하는 무엇이든 할 수 있습니다

코드에서

<BeginStoryboard> 
    <Storyboard Name="RotationStoryboard" Completed="StoryboardCompleted"> 
     <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Angle" From="0" 
To="360" Duration="0:0:0.8" /> 
    </Storyboard> 
</BeginStoryboard> 

:

private void StoryboardCompleted(object sender, EventArgs e) 
{ 
    // Restart your Storyboard here each time until you want it to stop. 
} 

자세한 도움말을 보려면를 참조하십시오 MSDN의 링크 된 페이지에있는 예입니다.