Simple UI Animation through XAML in Metro Style Application

Amit Maheshwari
Feb 05, 2012
19.9k
0
0
Article

Introduction

In this article we are going to explore how we create UI animation through XAML in a Metro Style Application. Further in details we will see how it is possible to create a UI animation in a Metro Style Application. As we all know about animation it's quite the same as when we create animation in WPF, Silverlight, and you can do it in Metro Style Application as well. In this article we will see that we have an ellipse and want to animate on the click of a button. Whenever we will click on the button it will rotate by an angle; how much it will rotate depends on your choice; whatever you have implemented to rotate that ellipse.

First of all we will see how to start to build that Metro Style Application for building such type of an application you have to install Windows 8 operating system and then install Visual Studio 2011 let see the steps given below how you will start to build your application. Here in this article we will use XAML code for animating an ellipse but it will rotate on click of the button means in this we are using some programmatically and XAML help to accomplish such task so that it will we an interesting task. So to implement such type of functionality you should have to follow the steps which is given below.

Step 1 : First of all you have to create a new Metro Style Application; let us see the description with images of how you will create it.

Open Visual Studio 2011
File->New Project
Select Metro Style Application in C# language
Click OK

Step 2 : In this step we will see step by step code of MainPage.Xaml file which is a structure of the existing XAML code for the Metro Style Application and it should be similar to which is given below.

Code:

<UserControl x:Class="Application7.MainPage"

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"

mc:Ignorable="d"

   d:DesignHeight="768" d:DesignWidth="1366">
    <Grid x:Name="LayoutRoot" Background="#FF0C0C0C">
    </Grid>
</UserControl>

Step 3 : In this step you will need to create an ellipse that will serve as the loading indicator. To do this, there is the Ellipse primitive available. You can draw it directly in the designer and then adjust the properties, or you could insert this XAML snippet inside the existing grid. Further the code is shown below which is used to create an ellipse.

Code:

In this step you will see that I am setting the name. It is completely up to you what this is going to be. The margins are set according to the size of the window (or the container where the ellipse is located). In this specific case, I set the ellipse to almost cover the entire window. The margins are set for a perfect circle. Further The StrokeThickness property can be adjusted as the developer wants, however, I would recommend keeping it several units thicker than 1, because it will be the key element that will facilitate the progress animation. Since the gradient will be transformed, there is the RenderTransformOrigin property that sets the transformation point for the current element.The code related to this will be shown below, Here The values range between 0 and 1, therefore a value of 0.5 will set the transformation point to the center of the object.

Step 4 : In this step we go to the transformation code. Add this snippet inside the Ellipse element. Further these are the required transformations that will be performed on the ellipse, although it will be rotated only.

Code:

<Ellipse.RenderTransform>

</TransformGroup>

</Ellipse.RenderTransform>

Step 5 : In this step we are going to write the code to set the gradient for the stroke. Here is the XAML snippet that should be placed inside the root Ellipse element and the code for such gradient is given below.

Code:

<Ellipse.Stroke>

</LinearGradientBrush>
</Ellipse.Stroke>

Further the description is that the gradient start and end points can be adjusted as the developer wants. In this specific case, I set them so it is equally distributing the color across the ellipse, one side being light white and the other one yellow and the third one is light pink (that can be seen from the color declarations). By setting Offset you can adjust that opacity of displaying colors.

Step 6 : In this step we are going to discuss how to actually perform an animation, a storyboard is needed, so I am going to add a new container element inside the Grid container and the code of container place holder is given below. This will be the place holder for the additional resources I am going to introduce. In fact, in this tutorial I will only be adding a storyboard inside:

Code:

<Grid.Resources></Grid.Resources>

Step 7 : In this step we will see that the code of the story board which will be placed inside the <Grid.Resources></Grid.Resources>.

Code:

Step 8 : In this step we will write the complete code for the storyboard component which is given below. Further the name is completely random. You can change it if you want to, just make sure you introduce proper references later on in the code. Now we will see the RepeatBehavior property is set to Forever, this meaning that the animation will be continuous. You can remove this property from the declaration, but in this case the animation will only happen once. Now, the animation itself is placed inside the storyboard. Storyboard.TargetName is the target of the animation – the ellipse in this case. Storyboard.TargetProperty is the property that will be modified.

Code:

<Grid.Resources>

<DoubleAnimation

Storyboard.TargetName="ellipse"

Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"

From="160" To="0" Duration="0:0:50"

AutoReverse="True"

RepeatBehavior="Forever" />

</Storyboard>

</Grid.Resources>

Step 9 : In this step we will see the complete code for the mainPage.Xaml file which is given below.

Complete Code:

<UserControl x:Class="Application5.MainPage"

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"

mc:Ignorable="d"

d:DesignHeight="768" d:DesignWidth="1366">
<Grid>

<Grid.Resources>

<DoubleAnimation

Storyboard.TargetName="ellipse"

Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"

From="160" To="0" Duration="0:0:50"

AutoReverse="True"

RepeatBehavior="Forever" />

</Storyboard>

</Grid.Resources>

<Grid.Background>

</LinearGradientBrush>

</Grid.Background>

<Ellipse.Fill>

</LinearGradientBrush>

</Ellipse.Fill>

<Ellipse.RenderTransform>

</TransformGroup>

</Ellipse.RenderTransform>

<Ellipse.Stroke>

</LinearGradientBrush>

</Ellipse.Stroke>

</Ellipse>

<Button x:Name="btn" Content="Click Me!!!" HorizontalAlignment="Left" VerticalAlignment="Top" Width="120" Margin="55,13,0,0" Click="btn_Click" Height="52"

BorderBrush="#FF9E3333" Foreground="#FF11C9F1" FontWeight="Bold" FontFamily="Comic Sans MS" FontSize="22" >

<Button.Background>

</LinearGradientBrush>

</Button.Background>

</Button>

</Grid>
</UserControl>

Step 10 : In this step you will see the code for the MainPage.Xaml.cs file in which we will invoke that storyboard by it's name with it's associate method named as begin() which will be call on the click event of the button and after clicking on it the ellipse begins to animate. Let us see the code which is given below.

Code:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

using Windows.Foundation;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Data;
namespace Application5

{

partial class MainPage

{
public MainPage()

{

InitializeComponent();

}
private void btn_Click(object sender, RoutedEventArgs e)

{

MyStoryBoard.Begin();

}
}
}

Step 11 : In this step you just see the design of the MainPage.Xaml file in the figure given below.

Step 12 : In this step we are going to run the application and the output regarding that is given below.

Output 1: It is the default output of the Metro Style Application.

Output 2 : Whenever we click on the button it begins to rotate and the figure shows that its angle has been changed after rotating and the figure is given below.