コントロールの回転をアニメーション化する

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

ストーリーボードを開始するイベントトリガーイベントであるパスに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のコードを書くことは、この場合（すなわち、アニメーション）非常に難しい。

Good Luck。

Answer 3

あなたは、回転用として...あなたはこのように見えるのニーズを回転させたいパス

をEventTriggerを使用してMouseLeftButtonDownイベントに耳を傾けることができます：アニメーション自体

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

を希望EA Hothreeynがすでに指摘したように、このためにブレンドを使用することは間違いなく、

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

をしかし：（半秒の持続時間）、このように見えますsier。