Essential WPF

Lately I’m teaching UI designers to work with WPF, and one of my students asked me how to start an animation when model’s property changes, and this was my answer:

If the animated element is part of a DataTemplate, use DataTrigger to monitor data changes and to start the animation. But if you don’t have a DataTemplate or the animated element is not part of the DataTemplate, create a Style for that element, and use a simple DataTrigger within.

<Style x:Key="PathStyle" TargetType="{x:Type Path}">
    <Style.Resources>
        <Storyboard x:Key="DataChangeAnimation">
            ...
        </Storyboard>
    </Style.Resources>
    <Style.Triggers>
        <DataTrigger Binding="{Binding Path=IsDirty}" Value="True">
            <DataTrigger.EnterActions>
                <BeginStoryboard x:Name="DataChangeAnimation_BeginStoryboard"
                                 Storyboard="{StaticResource DataChangeAnimation}"/>

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

Be aware that if you use a style, you can not specify the TargetName, hence you should create a Style for the animated element and place both the animation and data DataTrigger inside.

Feel free to download the source from here.