XAML DataTrigger to enable StoryBoard

Question

I have a xaml page where there is a symbol defined as a path.

The path has a RenderTransform to make it rotate.

The path is defined as:

<Path x:Name="MyPath" Width="80.6014" Height="80.9457" Canvas.Left="526.107" Canvas.Top="812.571" Stretch="Fill" Fill="#FFBABABA" Data="F1 M …. Z ">
    <Path.RenderTransform>
        <RotateTransform x:Name="Rotating" CenterX="40.62" CenterY="40.79" Angle="0"/>
    </Path.RenderTransform>
</Path>

The Path can rotate when triggered by the ancestor Canvas Load event:

<Canvas.Triggers>
    <EventTrigger RoutedEvent="ContentControl.Loaded">
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation Storyboard.TargetName="Rotating" Storyboard.TargetProperty="Angle" From="0" To="360" Duration="0:0:03.0" RepeatBehavior="Forever" />
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
</Canvas.Triggers>

But I would like it to rotate as a result of a bound property (Active) which implements INotifyPropertyChanged, I guess, using a DataTrigger.

I just don't know how to tie it together.

Can anyone point me in the right direction?

score 2 · Accepted Answer · edited May 23 '17 at 11:49

OK, I've got it.

The Path object needs a style:

<Path Style="{StaticResource RotateStyle}" x:Name="Path" ...

And the style can be defined as:

<Style x:Key="RotateStyle" TargetType="{x:Type Path}">
    <Style.Triggers>
        <DataTrigger Binding="{Binding Path=Active, Mode=OneWay}" Value="On">
            <DataTrigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation  From="0" To="360" Duration="0:0:03.0" RepeatBehavior="Forever" 
                                          Storyboard.TargetProperty="(RenderTransform).(RotateTransform.Angle)"/>
                    </Storyboard>
                </BeginStoryboard>
            </DataTrigger.EnterActions>
            <DataTrigger.ExitActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation To="0" Duration="0:0:03.0"
                                         Storyboard.TargetProperty="(RenderTransform).(RotateTransform.Angle)"/>
                    </Storyboard>
                </BeginStoryboard>
            </DataTrigger.ExitActions>

        </DataTrigger>
    </Style.Triggers>
</Style>

This article gave me the answer: WPF RotateTransform DataTrigger

XAML DataTrigger to enable StoryBoard

1 Answers1