Search code examples
wpfxamldatatrigger

XAML DataTrigger to enable StoryBoard


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?


Solution

  • 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