Post
Ask Question

Simple UI Animation through XAML in a Metro Style Application

Introduction

 
In this article, we are going to explore how we create UI animation through XAML in a Metro Style Application. As we all know about animation it's quite similar to when we create animation in WPF, and Silverlight. 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.
 
First of all, we will see how to start to build that Metro Style Application. For building this type of application, you need to install Windows 8, and then install Visual Studio 2011. Let's see the steps given below on 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 the click of the button which means in this we are using programming and XAML help to accomplish such a task. To implement this type of functionality, follow the steps which are given below.
 
Step 1
 
First of all, you have to create a new Metro Style Application:
  • Open Visual Studio 2011
  • File -> New Project
  • Select Metro Style Application in C# language
  • Click OK
todaystep_1_1fig.gif
 
tStep_1_2fig.gif
 
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. It should be similar to the example given below.
 
Code
  1. < UserControl x: Class = "Application7.MainPage"    
  2. xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"    
  3. xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml"    
  4. xmlns: d = "http://schemas.microsoft.com/expression/blend/2008"    
  5. xmlns: mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"    
  6. mc: Ignorable = "d"    
  7. d: DesignHeight = "768"    
  8. d: DesignWidth = "1366" > < Grid x: Name = "LayoutRoot"    
  9. 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
  1. <Ellipse x:Name="ellipse" Margin="128,100,438,368" StrokeThickness="20" RenderTransformOrigin="0.5,0.5">    
  2. </Ellipse>    
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
  1. <Ellipse.RenderTransform>    
  2.    <TransformGroup>    
  3.        <ScaleTransform/>    
  4.        <SkewTransform/>    
  5.        <RotateTransform/>    
  6.    </TransformGroup>    
  7. </Ellipse.RenderTransform>     
Step 5
 
In this step, we are going to write the code to set the gradient of 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
  1. <Ellipse.Stroke>    
  2.      <LinearGradientBrush EndPoint="0.445,0.997" StartPoint="0.555,0.003">    
  3.            <GradientStop Color="White" Offset="0"/>    
  4.            <GradientStop Color="#FFEC10A6" Offset="0.67"/>    
  5.            <GradientStop Color="#FFD8EC10" Offset="0.691"/>    
  6.      </LinearGradientBrush>    
  7. </Ellipse.Stroke>      
Further, the description is that the gradient start and endpoints 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 is light white and the other one yellow and the third one is light pink (which can be seen from the color declarations). By setting Offset, you can adjust the opacity of the 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. 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.
 
Step 7
 
In this step, we will see that the code of the storyboard which will be placed inside the <Grid.Resources></Grid.Resources>.
 
Code
  1. <Storyboard x:Name="MyStoryBoard"></Storyboard>    
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, 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
  1. <Grid.Resources>  
  2.       <Storyboard x:Name="MyStoryBoard">  
  3.           <DoubleAnimation  
  4.             Storyboard.TargetName="ellipse"  
  5.             Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"  
  6.             From="160" To="0" Duration="0:0:50"  
  7.             AutoReverse="True"  
  8.             RepeatBehavior="Forever" />  
  9.       </Storyboard>  
  10. </Grid.Resources>    
Step 9
 
In this step, we will see the complete code for the MainPage.The xaml file is given below.
 
Complete Code
  1. <UserControl x:Class="Application5.MainPage"  
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
  5.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
  6.     mc:Ignorable="d"  
  7.     d:DesignHeight="768" d:DesignWidth="1366">   
  8.     <Grid>  
  9.         <Grid.Resources>  
  10.             <Storyboard x:Name="MyStoryBoard">  
  11.                 <DoubleAnimation  
  12.                         Storyboard.TargetName="ellipse"  
  13.                         Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"  
  14.                         From="160" To="0" Duration="0:0:50"  
  15.                         AutoReverse="True"  
  16.                         RepeatBehavior="Forever" />  
  17.             </Storyboard>  
  18.         </Grid.Resources>  
  19.         <Grid.Background>  
  20.             <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">  
  21.                 <GradientStop Color="Black"/>  
  22.                 <GradientStop Color="#FFBDC518" Offset="1"/>  
  23.                 <GradientStop Color="#FF1FFFEB" Offset="0.361"/>  
  24.             </LinearGradientBrush>  
  25.         </Grid.Background>  
  26.         <Ellipse x:Name="ellipse" Margin="128,100,438,368" StrokeThickness="20" RenderTransformOrigin="0.5,0.5">  
  27.             <Ellipse.Fill>  
  28.                 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">  
  29.                     <GradientStop Color="Black"/>  
  30.                     <GradientStop Color="#FF78C75A" Offset="1"/>  
  31.                 </LinearGradientBrush>  
  32.             </Ellipse.Fill>  
  33.             <Ellipse.RenderTransform>  
  34.                 <TransformGroup>  
  35.                     <ScaleTransform/>  
  36.                     <SkewTransform/>  
  37.                     <RotateTransform/>  
  38.                 </TransformGroup>  
  39.             </Ellipse.RenderTransform>  
  40.             <Ellipse.Stroke>  
  41.                 <LinearGradientBrush EndPoint="0.445,0.997" StartPoint="0.555,0.003">  
  42.                     <GradientStop Color="White" Offset="0"/>  
  43.                     <GradientStop Color="#FFEC10A6" Offset="0.67"/>  
  44.                     <GradientStop Color="#FFD8EC10" Offset="0.691"/>  
  45.                 </LinearGradientBrush>  
  46.             </Ellipse.Stroke>  
  47.         </Ellipse>  
  48.         <Button x:Name="btn" Content="Click Me!!!" HorizontalAlignment="Left" VerticalAlignment="Top" Width="120" Margin="55,13,0,0" Click="btn_Click" Height="52"  
  49.               BorderBrush="#FF9E3333" Foreground="#FF11C9F1" FontWeight="Bold" FontFamily="Comic Sans MS" FontSize="22" >  
  50.             <Button.Background>  
  51.                 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">  
  52.                     <GradientStop Color="Black"/>  
  53.                     <GradientStop Color="#FFB2702E" Offset="1"/>  
  54.                 </LinearGradientBrush>  
  55.             </Button.Background>  
  56.         </Button>  
  57.     </Grid>  
  58. </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 its name with its associate method named as begin() which will be called 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
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Threading.Tasks;  
  5. using Windows.Foundation;  
  6. using Windows.UI.Xaml;  
  7. using Windows.UI.Xaml.Controls;  
  8. using Windows.UI.Xaml.Data;  
  9.    
  10. namespace Application5  
  11. {  
  12.     partial class MainPage  
  13.     {  
  14.         public MainPage()  
  15.         {  
  16.             InitializeComponent();  
  17.         }  
  18.         private void btn_Click(object sender, RoutedEventArgs e)  
  19.         {  
  20.             MyStoryBoard.Begin();  
  21.         }  
  22.     }   
  23. }    
Step 11
 
In this step, you just see the design of the MainPage.Xaml file in the figure given below.
  
tdesignfig.gif
 
 
Step 12
 
In this step, we are going to run the application and the output regarding that is given below.
 
Output 1
 
The default output of the Metro Style Application
 
tout1.gif
 
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.
 
tout2.gif
  
Output 3
 
After some time it moves to an approx 180-degree angle as shown in the figure.
 
tout3.gif
 
Output 4
 
At last it will rotate until the last suitable position and again start to rotate as shown in the figure given below.
 
tout4.gif
 
Here are some other resources which may help you
 

Summary

 
In this article, we learned about Simple UI Animation through XAML in Metro Style Application. 


Similar Articles