Hi, In this tutorial we will look into how to make a left to right border bounce animation using Visual Studio with WPF and C# programming language. Animation is key to many projects such as games, visual storyboards, apps or just something to spend few minutes staring at. This will be such a project that we are going to make because its fun and it will explain some of the key concepts of WPF C# programming. We are building up to make our full game in WPF, so we will be doing small snippets tutorials to get you started and understand the key concepts of timers in WPF.

Lesson Objectives –

1. Create a simple timer animation in visual studio with WPF and C#
2. Create labels and Rectangles in XAML
3. Animate the rectangle using C#
4. Link timer with an event
5. Test border animations

Let’s start a new project in Visual Studio. Make sure you choose the WPF App template.

I will call this project timer-animation and click OK button.

This is the blank project opened in visual studio.

As we have done in the other tutorials we will be adding our own elements to the XML file in the editor.

This is the default XML file in visual studio now –

<Window x:Class="timer_animation.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:timer_animation"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>

</Grid>
</Window>

Change the title to timer animation, add a title and add an eclipse to the grid.

<Window x:Class="timer_animation.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:timer_animation"
mc:Ignorable="d"
Title="Timer Animation" Height="350" Width="525">
<Grid>

<Label FontSize="32" Foreground="Orange" VerticalAlignment="Top" HorizontalAlignment="Center">Timer Animation Tutorial</Label>

<Rectangle Name="BlueCircle" Fill="RoyalBlue" HorizontalAlignment="Left" Margin="0,82,0,175" 
Stroke="Black" Width="73" RadiusY="35.9" RadiusX="35.9" Height="62" RenderTransformOrigin="0.185,1.71"/>

</Grid>
</Window>

First in the list we added a title called Timer Animation to this WPF form. Then we added a Label in the GRID where we gave it a font size of 32 foreground of Orange. Its vertically aligned to the top and horizontally aligned to the center.

Then we created a Rectangle which has a name BlueCircle, Background color Royal Blue, Margin, Stroke black, 35.9% radius in the X and Y and height of 62. This blue circle also has horizontal alignment set to left and render transform origin. The render transform origin will set the origin point of the blue circle. This is the object we will animate for this app. It will animate from left to right.

Now click on the C# tab  If you click on the main window xaml.cs tab it will open the c sharp script tab and we can see where to enter the c# programming codes.