Use XAML data binding to display an animated rectangle’s location

[XAML data binding]

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 Example   Follow me on Twitter   RSS feed   Donate




About RodStephens

Rod Stephens is a software consultant and author who has written more than 30 books and 250 magazine articles covering C#, Visual Basic, Visual Basic for Applications, Delphi, and Java.
This entry was posted in animation, wpf, XAML and tagged , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.