Rotate Animation Using UWP ToolKit With XAML And C#

Vijayaragavan S
Oct 07, 2016
5.4k
0
0
Article

Before reading this article, please go through the article's link given below-

Introduction To Universal Windows Platform (UWP) App Development Using Windows 10 And Visual Studio 2015

The Rotate animation allows the users to modify and animate the control’s rotation. Parameters are angle values, time, pause delay, duration and diameter.

After reading this article, you will learn how to create rotate animation in Universal Windows apps development with UWP Toolkit Animation, XAML and Visual C#.

The important tools required to develop UWP are given below-

Windows 10 (Recommended)
Visual Studio 2015 Community Edition (It is a free software available online)

Now, we can discuss step by step app development.

Step 1 - Open Visual Studio 2015 -> Start -> New Project-> Select Universal (under Visual C#->Windows)-> Blank app -> Give the suitable name for your app (UWPImgRotate)->OK.

After choosing the Target and minimum platform version for your Windows, Universal Application will support and the project creates App.xaml and MainPage.xaml.

Step 2 - Open (double click) the file MainPage.xaml in Solution Explorer and add Microsoft.Toolkit.Uwp.UI.Animations reference in the project.

To add the reference, right click on your project (UWPImgRotate) and select Manage NuGet Packages.

Choose Browse and Search Microsoft.Toolkit.Uwp.UI.Animations. Select the package and install it.

Accept the Licence.

Reference is added to your project.

Step 3 - Add TextBlock control, change the name and text property for title.

Step 4 - Add the images in Assets folder, images for Rotation.

Step 5 - Add the image control to display the image to rotate the animation.

Step 6 - Add XAML namespaces, given below and code for scaling in Mainpage.xaml-

xmlns: interactivity = "using:Microsoft.Xaml.Interactivity"
xmlns: behaviors = "using:Microsoft.Toolkit.Uwp.UI.Animations.Behaviors"
xmlns: core = "using:Microsoft.Xaml.Interactions.Core" < interactivity: Interaction.Behaviors > < behaviors: Rotate x: Name = "Rotate" / >
< /interactivity:Interaction.Behaviors>

Add DoubleTapped event method for Image control. When it is double tapped, the image rotation action will perform.

Note - Automatically, the code, given below will be generated in XAML code view, while we are done in the design view-

<Page x:Class="UWPImgRotate.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWPImgRotate" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:interactivity="using:Microsoft.Xaml.Interactivity" xmlns:behaviors="using:Microsoft.Toolkit.Uwp.UI.Animations.Behaviors" xmlns:core="using:Microsoft.Xaml.Interactions.Core" mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<TextBlock x:Name="tblTitle" HorizontalAlignment="Left" Margin="500,102,0,0" TextWrapping="Wrap" Text="Rotate Animation in UWP test" VerticalAlignment="Top" Height="34" Width="314" FontWeight="Bold" FontSize="22" />
<Image x:Name="imgRotate" HorizontalAlignment="Left" Height="138" Margin="508,314,0,0" VerticalAlignment="Top" Width="288" Source="Assets/r2.jpg" DoubleTapped="imgRotate_DoubleTapped" ToolTipService.ToolTip="Double Tap this image for Rotate">
<interactivity:Interaction.Behaviors>
<behaviors:Rotate x:Name="Rotate" /> </interactivity:Interaction.Behaviors>
</Image>
</Grid>
</Page>

Step 7 - Add the namespace and the code in MainPage.xaml.cs is given below-

using Microsoft.Toolkit.Uwp.UI.Animations;
private async void imgRotate_DoubleTapped(object sender, DoubleTappedRoutedEventArgs e) {
for (float fv = 1; fv <= 360; fv = fv + 5)
{
await imgRotate.Rotate(duration: 10, delay: 500, centerX: 188 f, centerY: 59 f, value: fv).StartAsync();
if (fv == 360) {
fv = 1;
}
}
}