Simple UI Animation through XAML in a Metro Style Application

Introduction

In this article we are going to explore that how we will create UI animation through XAML in Metro Style Application. Further in details we will see in this how it is possible to create a UI animation in Metro Style Application. As we all are know about the animation it's quite same as we create animation in WPF, Silverlight, and you can do it in Metro Style App Application as well, In this article we will see that we have an ellipse and want to animate on click of button. Whenever we will click on the button it will rotate by angle how much it will rotate it's depend on your choice that what you have implemented to rotate that ellipse. First of all we will see how to start to build that Metro Style App for building such type of 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 open new metro style application let see the description with images that how you will open it.

Open visual studio 2011
File-->New Project
Select Metro style app 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 have need to create a 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 let's 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 that 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 getting start to animate. Let 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's get start to rotate and the figure shows that it's angle has been changed after rotating and the figure is given below.

Output 3: After some time it move to approx 180 degree angle as shown in the figure.

Output 4: At last it will rotate till the last suitable position and again start to rotate as shown in the figure given below.

Here are the some other resources which may help you.