WPF：我如何通过bool类型的DependencyProperty来触发路径动画？

编程问答 2022-08-13

问题描述

在过去的一周中，我徒劳地尝试找到一种触发路径动画的方法。

我想做的是使用viewmodel中定义的布尔属性，以便当此值为true时，矩形将沿路径移动。

我以为一开始很容易，但是...

我发现的Path-Animation演示程序将通过RoutedEvent触发Storyboard，例如单击按钮或Button.Loaded等，而我还没有办法通过DependencyProperty触发它。

我是WPF的新手，谢谢您！

代码在这里：

    <!--I define a rectangle which is expected to be auto-moving along the path when "Monitoring" is set true. -->
    <Rectangle Width="20" Height="10" Fill="LightBlue">
        <Rectangle.RenderTransform>
            <MatrixTransform x:Name="RectangleMatrixTransform">
                <MatrixTransform.Matrix >
                    <Matrix />
                </MatrixTransform.Matrix>
            </MatrixTransform>
        </Rectangle.RenderTransform>
        <Rectangle.Style>
            <Style targettype="Rectangle">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding Monitoring}" Value="True">
                        <DataTrigger.Enteractions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <!--Here I got compile exception: 'TargetName property cannot be set on a Style Setter.'-->
                                    <MatrixAnimationUsingPath
                                        Storyboard.TargetName="RectangleMatrixTransform"
                                        Storyboard.TargetProperty="Matrix"
                                        DoesRotateWithTangent="True"
                                        Duration="0:0:5" 
                                        RepeatBehavior="Forever" >
                                        <MatrixAnimationUsingPath.PathGeometry>
                                            <PathGeometry figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" 
                                                  Presentationoptions:Freeze="True" />
                                        </MatrixAnimationUsingPath.PathGeometry>
                                    </MatrixAnimationUsingPath>
                                </Storyboard>
                            </BeginStoryboard>
                        </DataTrigger.Enteractions>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Rectangle.Style>
    </Rectangle>
</Canvas>

顺便说一句，WPF很强大，但真的很艰难：（

解决方法

只需丢弃Storyboard.TargetName并使用Storyboard.TargetProperty="RenderTransform.Matrix"：

<Rectangle Width="20" Height="10" Fill="LightBlue">
    <Rectangle.RenderTransform>
        <MatrixTransform />
    </Rectangle.RenderTransform>
    <Rectangle.Style>
        <Style TargetType="Rectangle">
            <Style.Triggers>
                <DataTrigger Binding="{Binding Monitoring}" Value="True">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <MatrixAnimationUsingPath
                                    Storyboard.TargetProperty="RenderTransform.Matrix"
                                    DoesRotateWithTangent="True"
                                    Duration="0:0:5" 
                                    RepeatBehavior="Forever" >
                                    <MatrixAnimationUsingPath.PathGeometry>
                                        <PathGeometry Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" />
                                    </MatrixAnimationUsingPath.PathGeometry>
                                </MatrixAnimationUsingPath>
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Rectangle.Style>
</Rectangle>
animationanimationdatatriggerwpfwpfxaml