Offset Animation Application Using UWP With XAML And C#

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

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

Offset animation behavior gets the number of pixels from the origin of the associated control and subsequently offsets the control.

After reading this article, you can learn how to develop Offset Animation Application in Universal Windows apps development with XAML and Visual C#.

The important tools required to developing UWP are-

1. Windows 10 (Recommended)
2. 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 (UWPOffsetAnimation)->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 the Solution Explorer and add Microsoft.Toolkit.Uwp.UI.Animations reference in the project.

To add the reference, right click Your Project (UWPOffsetAnimation) and select Manage Nuget Packages.

Choose Browse and search Microsoft.Toolkit.Uwp.UI.Animations, select the package and install it.



Accept the Licence.



The reference is added to your project.



Step 3

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



Step 4

Add images in the Assets folder, images for Offset.



Step 5

Add the image control to display the image for an offset.



Add another two image controls to display the image for an offset.



Step 6

Add XAML namespaces, given below and code for Offset 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" < Image x: Name = "imgInsect1"
HorizontalAlignment = "Left"
Height = "41"
Margin = "279,309,0,0"
VerticalAlignment = "Top"
Width = "27"
Source = "Assets/insect.jpg" > < interactivity: Interaction.Behaviors > < behaviors: Offset x: Name = "offset" / > < /interactivity:Interaction.Behaviors> < /Image>

Add offset code to all the images.



Add a button control and add a click Event method for Offset action.

Note 

 

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

<Page x:Class="UWPOffsetAnimation.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWPOffsetAnimation" 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="188,59,0,0" TextWrapping="Wrap" Text="UWP Offset Animation Demo" VerticalAlignment="Top" FontWeight="Bold" FontSize="20" />
        <Image x:Name="imgInsect1" HorizontalAlignment="Left" Height="41" Margin="279,309,0,0" VerticalAlignment="Top" Width="27" Source="Assets/insect.jpg">
            <interactivity:Interaction.Behaviors>
                <behaviors:Offset x:Name="offset" /> </interactivity:Interaction.Behaviors>
        </Image>
        <Image x:Name="imgInsect2" HorizontalAlignment="Left" Height="41" Margin="327,309,0,0" VerticalAlignment="Top" Width="27" Source="Assets/insect.jpg">
            <interactivity:Interaction.Behaviors>
                <behaviors:Offset x:Name="offset1" /> </interactivity:Interaction.Behaviors>
        </Image>
        <Image x:Name="imgInsect3" HorizontalAlignment="Left" Height="41" Margin="235,309,0,0" VerticalAlignment="Top" Width="27" Source="Assets/insect.jpg">
            <interactivity:Interaction.Behaviors>
                <behaviors:Offset x:Name="offset2" /> </interactivity:Interaction.Behaviors>
        </Image>
        <Button x:Name="btnCome" Content="Come" HorizontalAlignment="Left" Margin="540,86,0,0" VerticalAlignment="Top" Click="btnCome_Click" /> </Grid>
</Page>

Step 7

Add namespace and the code, given below in MainPage.xaml.cs.

using Microsoft.Toolkit.Uwp.UI.Animations;
private async void btnCome_Click(object sender, RoutedEventArgs e)
{
    int x = 10, y = 10;
    for (int i = 0; i < 5; i++) {
        await imgInsect1.Offset(duration: 0, delay: 100, offsetX: x, offsetY: y).StartAsync();
        await imgInsect2.Offset(duration: 0, delay: 100, offsetX: x, offsetY: y).StartAsync();
        await imgInsect3.Offset(duration: 0, delay: 100, offsetX: x, offsetY: y).StartAsync();
        y = y - 50;
    }
}

Step 8

Deploy your app in the local machine and the output of the UWPOffsetAnimation app is given below. 



Afterwards, Come button is clicked. 




Summary

Now, you have successfully tested UWP ToolKit – Offset Animation in Visual C# - UWP environment.