Windows 10 IoT Core : Animate Control

This article will teach you how to animate Windows Universal App(headed application) controls on your Windows 10 IoT device. At the end of the article, you will be able to animate controls such as image, button, grid, textbox, etc.

The resulting code can be found in this Github repo.

What you will learn:

• Basic Animation Objects

• Image Rotation

• Colorize Background

• Plane Projection

Dynamic image creates huge impact at the end user. It can be created by implementing simple transition algorithm over image or controls.

Don't worry, you don't have to deal with the complexity of such algorithm. There are in-built libraries available that provide animation support in XAML.

In order to understand this tutorial you must have basic knowledge of XAML and C#.

Lets Begin

Windows 10 IoT Core is available for Raspberry Pi 2, Intel Galileo Gen2 and MinnowBoard MAX. It is a big release for Microsoft which targets the IoT devices. Windows 10 IoT Core comes with display capability. Animation can only be done on headed application.

This article is only intended for Raspberry Pi 2 running Windows 10 IoT Core. If you are newer to Windows 10 IoT Core please see this link. To install Windows 10 on Raspberry Pi 2, see this link.

Step 1

Start Visual Studio 2015 Community from start menu by typing "Visual Studio"

Visual Studio 2015 Community Edition is free for up-to 5 developers. You can download it from Visual Studio Website.

Step 2

Create new project from toolbar or form file menu as shown in image below:

Step 3

Step 3-A

From left panel, expand Installed Templates -> Visual C# -> Windows --> Universal

Step 3-B

In the right panel, select "Blank App (Universal Windows)"

Step 3-C

Configure your project name, folder and solution name.

At this moment, we are not going to discuss about solution name. Please google it if you are newer to Visual Studio or else leave it as it is.

Step 4

Now your project should be initialized.

We will start with designing UI first. Before starting UI, we need to understand entry point or starting point to the program which is 'MainPage.xaml'. Open 'MainPage.xaml' from Solution Explorer:

Now, configure you application's screen resolution appropriately so we can design it easily:

Please add a new existing image to the project's Assets folder as shown below:

Design and Code

I am assuming that you have basic knowledge of WPF Xaml programming. If you are newer to WPF, you can learn it from http://www.wpf-tutorial.com/ and from MSDN.

You can write Xaml code in Xaml code panel as shown below:

Background C# code is to be written in 'MainPage.xaml.cs' as shown in image below:

Step 5

I am not going to show complete code here instead I am only going to show you how you can animate a control.

Before understanding code, lets first explore basic animation class:

DoubleAnimation:  It provides animation capability for double datatype enabled property.

For example: Opacity, Rotation, Projection, etc.

ColorAnimation:  To colorize a control's background or foreground from one to another color.

For example: Grid's backgroung, button's backgroung, TextField's foregorund, etc.

For complete list of available animation, please see MSDN Page.

Step 6 (Animation Code)

Let's first decide animation class based on the property to be animate.

Lets say Opacity property of the Image: Img_RaspberryPi

DoubleAnimation _OpacityAnimation = new DoubleAnimation();

And we want to fade image from full opacity to half transparency.

_OpacityAnimation.From = 1; // Full Opacity

_OpacityAnimation.To = 0.5; // Half Transparent

Now, its decided from where to start and at which point to stop.

To start animation, Storyboard object is required which plays the animation on specified control's specified property. So you create Storyboard object and assign declared DoubleAnimation to it.

Storyboard _Storyboard = new Storyboard();

_Storyboard.Children.Add(_OpacityAnimation);

Tricky part starts from here. It is essential to generate accurate Property string for control which will exactly points to that control's property. As per our example, we have an image object named Img_RaspberryPi and we want to animate its property Opacity. So property string for image will be : Image.Opacity

Storyboard.SetTargetProperty(_OpacityAnimation, "Image.Opacity");

Now set the target control we want to animate:

Storyboard.SetTarget(_Storyboard, Img_RaspberryPi);

Its all done! Just begin Storyboard:

_Storyboard.Begin();

How to deploy app?

Please refer this page to understand how to deploy the app to the Raspberry Pi 2. You can even run your application without Raspberry Pi 2 on your local Windows 10 machine. To do so, see image given below:

How to decide which animation to be used?

It is bit tricky. But you can use Visual Studio's IntelliSense to determine which animation class to be used. I will show you how. Let's assume that we want to animate buttons's height property. Now open C# code editor and type Btn_ColorizeImage.Height and hover cursor over it and you will see like:

Please download the complete source code from my GitHub repository.