WPF And Animation Basics

I’ve recently been getting my hands dirty with WPF as a successor to WinForms, and one thing is for sure – its like i’m starting from ground zero, all over again…

What I’ve recently wanted to do was to learn the details of animation in WPF. I’ve read a lot about the animation frameworks built into WPF, and the fact that they can be programmed directly into the XAML is quite interesting. Seems that it XAML is a whole lot more than a mark-up language. It’s so expressive it is almost like code.


<window x:Class="WPFAnimatingPath.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
</window><window .Resources>
<storyboard x:Key="pointAnimation">
<pointanimation From="55, 10" To="55, 150" RepeatBehavior="Forever" AutoReverse="True" Storyboard.TargetName="seg1" Storyboard.TargetProperty="Point1" AccelerationRatio="0.5" DecelerationRatio="0.5" Duration="0:00:10" />
<pointanimation From="105, 150" To="105, 10" RepeatBehavior="Forever" AutoReverse="True" Storyboard.TargetName="seg2" Storyboard.TargetProperty="Point1" AccelerationRatio="0.5" DecelerationRatio="0.5" Duration="0:00:05" />
</storyboard>
</window>
<grid>
<button Name="btnAnimate" Margin="0,37,0,0" Click="btnAnimate_Click">
<stackpanel Height="200" Width="160">
<textblock TextAlignment="Center" Height="40" VerticalAlignment="Bottom" FontSize="16">Click me</textblock>
<path Stroke="BlueViolet" StrokeThickness="2" Width="160" Height="160">
</path><path .Triggers>
<eventtrigger RoutedEvent="Path.Loaded">
<beginstoryboard>
<storyboard>
<doubleanimation Storyboard.TargetName="rotation" Storyboard.TargetProperty="Angle" From="-30" To="30" Duration="0:0:05" RepeatBehavior="Forever" AutoReverse="True" AccelerationRatio="0.5" DecelerationRatio="0.5" />
</storyboard>
</beginstoryboard>
</eventtrigger>
</path>
<path .RenderTransform>
<rotatetransform x:Name="rotation" CenterX="80" CenterY="80" Angle="0" />
</path>
<path .Data>
<pathgeometry>
</pathgeometry><pathgeometry .Figures>
<pathfigure StartPoint="0, 80">
<linesegment Point="30, 80" />
<quadraticbeziersegment x:Name="seg1" Point1="55, 10" Point2="80, 80" />
<quadraticbeziersegment x:Name="seg2" Point1="105, 150" Point2="130, 80" />
<linesegment Point="160, 80" />
</pathfigure>
</pathgeometry>

</path>

</stackpanel>
</button>
</grid>

What i’ve written here is a simple application which displays a button on the page. Like my last post about XAML and the mindset change, this code allows me to embed whatever i want into the content of the Button, and in this case, i have 2 bezier arcs which form a pseudo SINE wave. when you click the button, the arcs animate and flow in a throbbing fashion.

These are the basics which demonstrate:

  • Window Resources
  • Embedded Content
  • Drawing arcs/lines
  • Animating objects

Leave a Reply

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