컨트롤 회전 순환 애니메이션

Question

간단한 컨트롤을 정의했으며 내부에 검은 색 삼각형이있는 빨간색 사각형 만 정의했습니다. 사용자가 컨트롤을 클릭하면 검은 색 삼각형을 180도 회전합니다. 나는 회전을 움직일 필요가있다. 여기에 컨트롤 XAML (메인 창)이다 - 내가 컨트롤을 누를 때 회전을 수행 할 컨트롤의 트리거를 설정하는 시도

<Window 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
x:Class="WpfApplication1.MainWindow" 
x:Name="Window" 
Title="MainWindow" 
Width="640" Height="480"> 
<Window.Resources> 
    <ControlTemplate x:Key="ControlControlTemplate1" TargetType="{x:Type Control}"> 
     <Grid> 
      <Border Background="Red"/> 
      <Path Grid.Row="1" x:Name="myPath" Visibility="Visible" Data="M0,0 L1,0 0.5,1 z" Stretch="Fill" 
       Width="80" Height="60" Fill="Black" Opacity="1" 
       VerticalAlignment="Center" HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.4"> 
      </Path> 
     </Grid> 
    </ControlTemplate> 
</Window.Resources> 

<Grid x:Name="LayoutRoot"> 
    <Control HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100" Template="{DynamicResource ControlControlTemplate1}"> 
    </Control> 
</Grid> 

1. 는하지만 더 IsPressed가없는 것 같다 속성 (그러나 어떤 이유로 IsMouseOver 속성이 있음). IsPressed 속성을 사용할 수 없을 때 어떻게 회전을 트리거합니까?
2. 어떻게 애니메이션 회전을 만들 수 있습니까?

Answer 1

StoryBoard를 시작할 이벤트 트리거 이벤트 인 경로에 MouseDown 이벤트를 추가해야합니다. 샘플을 가져 와서 Expression Blend에서 요청 된 순환 게재를 만들었습니다. 스토리 보드의 회전 정도를 변경할 수 있습니다 변경하려면 - "OnMouseDown1을"

<Window.Resources> 
    <ControlTemplate x:Key="ControlControlTemplate1" TargetType="{x:Type Control}"> 
     <ControlTemplate.Resources> 
      <Storyboard x:Key="OnMouseDown1"> 
       <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="myPath"> 
        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="180"/> 
       </DoubleAnimationUsingKeyFrames> 
      </Storyboard> 
     </ControlTemplate.Resources> 
     <Grid> 
      <Border Background="Red"/> 
      <Path Grid.Row="1" x:Name="myPath" Visibility="Visible" Data="M0,0 L1,0 0.5,1 z" Stretch="Fill" 
      Width="80" Height="60" Fill="Black" Opacity="1" 
      VerticalAlignment="Center" HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.4"> 
       <Path.RenderTransform> 
        <TransformGroup> 
         <ScaleTransform/> 
         <SkewTransform/> 
         <RotateTransform/> 
         <TranslateTransform/> 
        </TransformGroup> 
       </Path.RenderTransform> 
      </Path> 
     </Grid> 
     <ControlTemplate.Triggers> 
      <EventTrigger RoutedEvent="Mouse.MouseDown" SourceName="myPath"> 
       <BeginStoryboard Storyboard="{StaticResource OnMouseDown1}"/> 
      </EventTrigger> 
     </ControlTemplate.Triggers> 
    </ControlTemplate> 
    <Storyboard x:Key="OnMouseDown1"> 
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="control"> 
      <EasingDoubleKeyFrame KeyTime="0:0:1" Value="180"/> 
     </DoubleAnimationUsingKeyFrames> 
    </Storyboard> 
</Window.Resources> 

<Grid x:Name="LayoutRoot"> 
    <Control x:Name="control" HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100" Template="{DynamicResource ControlControlTemplate1}" RenderTransformOrigin="0.5,0.5"> 
     <Control.RenderTransform> 
      <TransformGroup> 
       <ScaleTransform/> 
       <SkewTransform/> 
       <RotateTransform/> 
       <TranslateTransform/> 
      </TransformGroup> 
     </Control.RenderTransform> 
    </Control> 
</Grid> 

Answer 2

Microsoft Expression Blend, 버전 3 또는 4를 통해 애니메이션을 만드는 것이 좋습니다. xaml에 코드를 작성하는 것은이 경우 (즉, 애니메이션) 매우 어렵습니다.

행운을 비네. 당신은 EventTrigger를 사용하고 MouseLeftButtonDown 이벤트를 수신 할 수

Answer 3

... 회전,이처럼 보이도록 요구를 회전 할 경로에 관해서는

:

<Path ...> 
    <Path.RenderTransform> 
     <RotateTransform /> 
    </Path.RenderTransform> 
</Path> 

애니메이션 자체 것을 개 Hothreeyn 이미 지적했듯이, 이것에 대한 혼합을 사용하면 확실히,

<DoubleAnimation BeginTime="0" 
       Duration="0:0:0.5" 
       To="180" 
       Storyboard.TargetName="nameOfThePath" 
       Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" /> 

을하지만 (0.5 초의 기간과) 같이 sier.