Question

我正在尝试使用DoubleAnimationUsingKeyFrames和StoryBoard在wpf中创建一个加载程序图像，但是我收到此错误无法解析属性路径'（0）。（1）[0]。（RotateTransform）'中的所有属性引用。验证适用的对象是否支持属性。

这是我的代码

  <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

由于您想要为RotateTransform的Angle属性设置动画，因此目标属性路径应为：

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"

使用TransformGroup和Story Board的wpf加载器图像动画

1 个答案: