TransformGroupとStoryボードを使用したwpfローダー画像のアニメーション

Question

DoubleAnimationUsingKeyFramesとStoryBoardを使用してwpfでローダーイメージを作成しようとしていますが、このエラーが発生します プロパティパス '（0）（1）[ 0]。（RotateTransform） 'を返します。該当するオブジェクトがプロパティをサポートしていることを確認します。

これはあなたがRotateTransformのAngleプロパティをアニメーション化するので、ターゲットプロパティのパスは、このする必要があります私のコード

<UserControl.Resources> 
    <Storyboard x:Key="LoaderAnimation"> 
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform)" 
            Storyboard.TargetName="canvas" 
            RepeatBehavior="Forever"> 
      <EasingDoubleKeyFrame KeyTime="0" Value="0"/> 
      <EasingDoubleKeyFrame KeyTime="0:0:3" Value="360"/> 
     </DoubleAnimationUsingKeyFrames> 
    </Storyboard> 
</UserControl.Resources> 
<i:Interaction.Triggers> 
    <i:EventTrigger EventName="Loaded"> 
     <ei:ControlStoryboardAction Storyboard="{StaticResource LoaderAnimation}"/> 
    </i:EventTrigger> 
</i:Interaction.Triggers> 

<Viewbox x:Name="LayoutRoot" HorizontalAlignment="Left" VerticalAlignment="Top"> 
    <Canvas x:Name="canvas" Height="323" Width="308" RenderTransformOrigin="0.5,0.5"> 
     <Canvas.RenderTransform> 
      <TransformGroup></TransformGroup> 
     </Canvas.RenderTransform> 
     <Ellipse Fill="{Binding Foreground, ElementName=ProgressRing}" 
      Height="71" Canvas.Left="121" Canvas.Top="21" Width="69" Opacity="0.3"/> 
     <Ellipse Fill="{Binding Foreground, ElementName=userControl}" 
      Height="71" Width="69" Canvas.Left="194" Canvas.Top="52" Opacity="0.4"/> 
     <Ellipse Fill="{Binding Foreground, ElementName=userControl}" 
      Width="69" Height="71" Canvas.Left="221" Canvas.Top="123" Opacity="0.5"/> 
     <Ellipse Fill="{Binding Foreground, ElementName=userControl}" 
      Width="69" Height="71" Canvas.Left="190" Canvas.Top="198" Opacity="0.6"/> 
     <Ellipse Fill="{Binding Foreground, ElementName=userControl}" 
      Height="71" Canvas.Left="121" Canvas.Top="226" Width="69" Opacity="0.7"/> 
     <Ellipse Fill="{Binding Foreground, ElementName=userControl}" 
      Width="69" Height="71" Canvas.Left="48" Canvas.Top="194" Opacity="0.8"/> 
     <Ellipse Fill="{Binding Foreground, ElementName=userControl}" 
      Height="71" Width="69" Canvas.Left="17" Canvas.Top="123" Opacity="0.9"/> 
     <Ellipse Fill="{Binding Foreground, ElementName=userControl}" 
      Height="71" Width="69" Canvas.Left="48" Canvas.Top="52" Opacity="1.0"/> 
    </Canvas> 
</Viewbox> 

Answer 1

です：

Storyboard.TargetProperty= 
    "(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)" 

または短い：

Storyboard.TargetProperty="RenderTransform.Children[0].Angle" 

また、実際のRotateTransformインスタンスを追加する必要がありますTransformGroupに電子：

<Canvas.RenderTransform> 
    <TransformGroup> 
     <RotateTransform /> 
    </TransformGroup> 
</Canvas.RenderTransform> 

---

あなたがグループ内の任意の他の変換を持っていない場合は、あなたにも、この書き込みがあります。

<Canvas.RenderTransform> 
    <RotateTransform /> 
</Canvas.RenderTransform> 

をとするターゲットプロパティのパスを変更：

Storyboard.TargetProperty="RenderTransform.Angle"