Home
WPF
DoubleAnimation
Updated Apr 5, 2023
Dot Net Perls
DoubleAnimation. WPF supports animation of elements. To move an element, we can use a canvas and adjust its position within the canvas.
Some elements. We introduce the BeginStoryboard, Storyboard and DoubleAnimation elements. These are used with DoubleAnimation to specify the animation info.
Example. Animation can be implemented with C# code, but in the simplest case this is not necessary. Here I add a Canvas element to the Window.
Canvas
And I specify a single Rectangle element, and adjust its Fill, Stroke, StrokeThickness, Width and Height.
Next I add a sub-element to the Rectangle called Rectangle.Triggers. This is complicated, but you just have to remember the elements.
Info The animation begins when the Loaded event is triggered on the Window. We use EventTrigger for this.
Then In BeginStoryboard, we add a Storyboard element. And in a nested DoubleAnimation, we specify how the animation occurs.
Finally We indicate the target element's name, what property it affects, From, To and a Duration.
<Window x:Class="WpfApplication28.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525" Loaded="Window_Loaded"> <Canvas Name="Can1"> <Rectangle Name="Rect1" Canvas.Left="10" Fill="LightSeaGreen" Stroke="Bisque" StrokeThickness="5" Width="100" Height="100"> <Rectangle.Triggers> <EventTrigger RoutedEvent="Window.Loaded"> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="Rect1" Storyboard.TargetProperty="(Canvas.Left)" From="10" To="100" Duration="0:0:2"/> </Storyboard> </BeginStoryboard> </EventTrigger> </Rectangle.Triggers> </Rectangle> </Canvas> </Window>
Program output. The rectangle will creep across the window towards the right. It does this in 2 seconds. You can change the Duration to make it slower or faster.
Info We can adjust the "From" and the "To" to change the animation's start and end values. These are used for the TargetProperty.
Tip Please add the parentheses around the TargetProperty in your XAML. If you do not, an error (a confusing one) will occur.
A discussion. There are other "Animation" elements. Similar to DoubleAnimation, we can employ DecimalAnimation to manipulate a floating-point property. ByteAnimation is similar.
And ColorAnimation can change a color, creating fade effects. These elements can make WPF seem excessively complicated.
A summary. With WPF, we gain a large set of graphical effects. This is a key advantage of WPF. With Storyboards, we can specify the nature of our animations.
Dot Net Perls is a collection of pages with code examples, which are updated to stay current. Programming is an art, and it can be learned from examples.
Donate to this site to help offset the costs of running the server. Sites like this will cease to exist if there is no financial support for them.
Sam Allen is passionate about computer languages, and he maintains 100% of the material available on this website. He hopes it makes the world a nicer place.
This page was last updated on Apr 5, 2023 (edit).
Home
Changes
© 2007-2025 Sam Allen