Animation in WPF and Blend SDK

Good day everyone! In this article, I will describe an easy way to start animation using the Microsoft Blend SDK tool.

With animations in WPF, things are not very easy and they are being avoided for several reasons. The first is that they are hard to start and difficult to stop. The second is that they are not very fast.

We will deal with the launch - what is so "complicated". Let's draw a simple ItemsControl, inside which there is a Canvas and place small balls.

<ItemsControl ItemsSource="{Binding Bubbles}"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <Canvas IsItemsHost="True" /> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.ItemContainerStyle> <Style> <Setter Property="Canvas.Left" Value="{Binding X}" /> <Setter Property="Canvas.Top" Value="{Binding Y}" /> </Style> </ItemsControl.ItemContainerStyle> <ItemsControl.ItemTemplate> <DataTemplate> <Ellipse Width="10" Height="10" Fill="#FF616AB6" /> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> 

Result demonstration:
')


Now we need to make them animated, for this we transfer our position calculations from Canvas.Left and Canvas.Top to the animation, which will define the Canvas.Left and Canvas.Top elements. Place it in the resources of each Ellipse.

 <Ellipse.Resources> <Storyboard x:Key="yanimation"> <DoubleAnimation Storyboard.Target="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ContentPresenter}}" Storyboard.TargetProperty="(Canvas.Top)" Duration="0:0:1" To="{Binding Y}" /> </Storyboard> <Storyboard x:Key="xanimation"> <DoubleAnimation Storyboard.Target="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ContentPresenter}}" Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:1" To="{Binding X}" /> </Storyboard> </Ellipse.Resources> 

But now the question is when to start the animation? Definitely we need to run when an element appears, that is, we add:

 <Ellipse.Triggers> <EventTrigger RoutedEvent="Ellipse.Loaded"> <BeginStoryboard Storyboard="{StaticResource xanimation}" /> </EventTrigger> <EventTrigger RoutedEvent="Ellipse.Loaded"> <BeginStoryboard Storyboard="{StaticResource yanimation}" /> </EventTrigger> </Ellipse.Triggers> 

But now what? For good, you can bind the launch of the animation on yourself by adding each calculation of To to the Binding of NotifyOnTargetUpdated = True. Then you can write

 <Ellipse.Triggers> <EventTrigger RoutedEvent="Binding.TargetUpdated"> <BeginStoryboard Storyboard="{StaticResource xanimation}" /> </EventTrigger> <EventTrigger RoutedEvent="Binding.TargetUpdated"> <BeginStoryboard Storyboard="{StaticResource yanimation}" /> </EventTrigger> </Ellipse.Triggers> 

And it works. But not everything is so simple. In a live project, such an approach refused to work - most likely due to looping calls. Also anywhere you can write NotifyOnTargetUpdated = True and the animation will be called once again. We just need the animations to be launched only by changing the properties of X and Y. Here, then, Blend SDK comes to the rescue with its libraries Microsoft.Expression.Interactions and System.Windows.Interactivity.

We add them to the project (I added via nuget). And we write the xmlns we need:

 xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" 

Now you can write inside each Ellipse:

 <i:Interaction.Triggers> <ei:PropertyChangedTrigger Binding="{Binding X}"> <ei:ControlStoryboardAction Storyboard="{StaticResource xanimation}" /> </ei:PropertyChangedTrigger> <ei:PropertyChangedTrigger Binding="{Binding Y}"> <ei:ControlStoryboardAction Storyboard="{StaticResource yanimation}" /> </ei:PropertyChangedTrigger> </i:Interaction.Triggers> 

And the animations started:



Jobs done!

We do not run them once again and they work as we need. In addition, Blend SDK contains many other simple and, at the same time, incredibly useful things - I advise you to read:

Microsoft.Expression.Interactions documentation
System.Windows.Interactivity documentation

And, returning to the beginning of the article, I want to draw attention to the second point - that the animations are very slow. Yes - they are such that I don’t know what to do with it, but nevertheless I will try to find out.

Thank you all for your attention!

→ Link to the project on github