WPF: How can I DataTrigger a Path Animation by a DependencyProperty of type bool?

Question

For the past week, I tried in vain to find a way to trigger a path animation.

What I want to do is by using a boolean property defined in my ViewModel, so that when this value is true, an rectangle shall move along the path.

I thought it was easy at first but...

Demos of Path-Animation I found, would trigger the Storyboard by means of RoutedEvent like clicking a button or Button.Loaded etc., and I haven't got a way to trigger it by DependencyProperty.

I am new to WPF and thank you in advance!

Code here:

    <!--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>

BTW, WPF is strong but really tough :(

I'm pretty out of practice with wpf but the answers in [this question](https://stackoverflow.com/questions/2240421/using-binding-for-the-value-property-of-datatrigger-condition#:~:text=The%20Value%20property%20of%20the,dependency%20property%20value%20is%20set.) should help out. — Chris W., Sep 01 '20 at 16:09

score 1 · Accepted Answer · answered Sep 01 '20 at 16:14

Just drop Storyboard.TargetName and use 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>

WPF: How can I DataTrigger a Path Animation by a DependencyProperty of type bool?

1 Answers1