Create Animation in Windows Store Apps

Introduction

Today we are creating a simple animation in Windows. Animations in the Windows Runtime can enhance your app by adding movement and interactivity. By using the animations from the Windows Runtime animation library, you can integrate the Windows 8 look and feel into your Windows Store app.

In this example we have two buttons; "Add Item" is for adding an item in the list and another is "Remove Item" to remove an item from the list. To create an animation we are using the two namespaces "Windows.UI" for the fill color and "Windows.UI.Xaml.Shapes" to create a shape at runtime.

Step 1

The first step is to create a new Windows Store App.

Step 2

In the second step double-click on "MainPage.xaml":

Step 3

The "MainPage.xaml" is as in the follwoing code:

<Page

    x:Class="SimpleAnimation.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:SimpleAnimation"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

 

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

        <Button Content="Add Item" x:Name="AddItom" HorizontalAlignment="Left" VerticalAlignment="Top" Width="150" Margin="61,286,0,0" Click="AddItom_Click"/>

        <Button Content="Remove Item" x:Name="RemoveItom" HorizontalAlignment="Left" VerticalAlignment="Top" Width="150" Margin="61,358,0,0" Click="RemoveItom_Click"/>

        <ItemsControl x:Name="RectItom" Margin="46,92,-46,-92">

            <ItemsControl.ItemContainerTransitions>

                <TransitionCollection>

                    <RepositionThemeTransition/>

                </TransitionCollection>

            </ItemsControl.ItemContainerTransitions>

            <ItemsControl.ItemsPanel>

                <ItemsPanelTemplate>

                    <WrapGrid Height="400"/>

                </ItemsPanelTemplate>

            </ItemsControl.ItemsPanel>

            <ItemsControl.Items>

                <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>

                <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>

                <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>

                <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>

                <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>

                <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>

            </ItemsControl.Items>

        </ItemsControl>

    </Grid>

</Page>

 Step 4

The "MainPage.xaml.cs" is as in the following code:

using System;
 using System.Collections.Generic;
 using System.IO;
 using System.Linq;
 using Windows.Foundation;
 using Windows.Foundation.Collections;
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Controls;
 using Windows.UI.Xaml.Data;
 using Windows.UI.Xaml.Input;
 using Windows.UI.Xaml.Media;
 using Windows.UI.Xaml.Navigation;
 using Windows.UI.Xaml.Shapes;
  
 namespace SimpleAnimation
 {
     public sealed partial class MainPage : Page
 
         public MainPage()
         {
            this.InitializeComponent();
        }
         protected override void OnNavigatedTo(NavigationEventArgs e)
         {
         }
         private void AddItom_Click(object sender, RoutedEventArgs e)
         {
             SolidColorBrush brus = new SolidColorBrush();
             brus.Color = Colors.Red;
              Rectangle Rect = new Rectangle();
              Rect.Fill = brus;
              Rect.Width = 100;
              Rect.Height = 100;
              Rect.Margin = new Thickness(10);
              RectItom.Items.Add(Rect);
         }
         private void RemoveItom_Click(object sender, RoutedEventArgs e)
         {
             if (RectItom.Items.Count > 0)
                 RectItom.Items.RemoveAt(0);
         }
     }
 }

Step 5

After running the program the output will look as in the following. Click on "Add Item" to add a new item and click on "Remove Item" to remove items.