Title: Use XAML data binding to display an animated rectangle's location

This example uses storyboard animation to move a rectangle and uses XAML data binding to display the rectangle's location as it moves. It's actually fairly simple, at least a far as WPF goes, once you figure out how to do it.

Here's how the program's XAML code begins.

<Window x:Class="howto_xaml_rectangle_storyboard.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="howto_xaml_rectangle_storyboard" Height="300" Width="300"> <Canvas Background="Pink"> <Rectangle Name="myRectangle" Width="40" Height="30" Fill="LightBlue" Stroke="Blue" StrokeThickness="2" Margin="20,20"> <Rectangle.Triggers> <EventTrigger RoutedEvent="FrameworkElement.Loaded"> <BeginStoryboard> <Storyboard RepeatBehavior="Forever"> <ThicknessAnimation To="220,20" BeginTime="0:0:0" Duration="0:0:1" Storyboard.TargetProperty="(Margin)" AutoReverse="False" /> <ThicknessAnimation To="220,220" BeginTime="0:0:1" Duration="0:0:1" Storyboard.TargetProperty="(Margin)" AutoReverse="False" /> <ThicknessAnimation To="20,220" BeginTime="0:0:2" Duration="0:0:1" Storyboard.TargetProperty="(Margin)" AutoReverse="False" /> <ThicknessAnimation To="20,20" BeginTime="0:0:3" Duration="0:0:1" Storyboard.TargetProperty="(Margin)" AutoReverse="False" /> </Storyboard> </BeginStoryboard> </EventTrigger> </Rectangle.Triggers> </Rectangle>

This code defines the program's Window, places a Canvas inside it, and then creates a Rectangle inside that. The code sets some Rectangle properties and then defines a Triggers section.

The Rectangle has a single trigger that executes when the control is loaded. The trigger executes a BeginStoryboard, which contains a Storyboard that repeats indefinitely.

The Storyboard contains three ThicknessAnimation objects that adjust the Rectangle control's Margin property. The animation objects have BeginTime and Duration properties set so each begins when the previous one ends. The result of the animations is to move the rectangle to the right across the the window, down the right edge, to the left across the bottom, and up along the left edge until the rectangle reaches its starting point.

The following code shows the rest of the program's XAML.

<Label Margin="10,0" HorizontalAlignment="Left" VerticalAlignment="Top" ContentStringFormat="0" HorizontalContentAlignment="Center" Content="{Binding ElementName=myRectangle, Path=Margin.Left}"/> <Label Margin="30,0" HorizontalAlignment="Left" VerticalAlignment="Top" Content=","/> <Label Margin="35,0" HorizontalAlignment="Left" VerticalAlignment="Top" ContentStringFormat="0" HorizontalContentAlignment="Center" Content="{Binding ElementName=myRectangle, Path=Margin.Top}"/> </Canvas> </Window>

This code defines three labels, two to display the rectangle's X and Y coordinates, and one to display a comma in between. The first label sets its Content property to the XAML data binding {Binding ElementName=myRectangle, Path=Margin.Left}. That makes the label display the myRectangle object's Margin.Top property. When the animations modify the rectangle's top margin value, this label displays the new value.

The label's ContentStringFormat property makes the control display the value as an integer. If you don't set that property, the label displays a ridiculously inappropriate number of digits after the decimal point.

The third label uses XAML data binding similarly to display the rectangle's Margin.Top value.

Conclusion

That's all there is to this example. Everything is done in XAML code including the XAML data binding; there's no code behind. Download the example to experiment with the program.

Download the example to experiment with it and to see additional details.