Move Stop Pause and Resume an Object in Windows Store App

Introduction

Suppose I want an object of some shape (like circle, ellipse, rectangle, line etc) to render in the screen, and when a pause, resume or stop operation is applied it correspondingly pauses, resumes or stops. To see how it works let's use the following steps.

Step 1

Open Visual Studio 2012 RC then click on File -> New -> Project, as in:



Step 2

A window appears; in it select Windows Store from the Visual C# in the left pane and then Blank page from the center pane then give the name of your application that you want to give then click the ok button. as in:



Step 3

Perform the design by writing the following code in the XAML (in the MainPage.xaml file):

<Page

    x:Class="App5.MainPage"

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

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

    xmlns:local="using:App5"

    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}">

        <Canvas>

            <Canvas.Resources>

                <Storyboard x:Name="myStoryboard">

                    <!-- Animate the center point of the ellipse. -->

                    <PointAnimation EnableDependentAnimation="True" Storyboard.TargetProperty="Center"

              Storyboard.TargetName="EllipseFigure"

              Duration="0:0:5"

              From="20,200"

              To="400,100"

              RepeatBehavior="Forever" />

                </Storyboard>

            </Canvas.Resources>

            <Path Fill="Red">

                <Path.Data>

                    <!-- Describe an ellipse. -->                   

                    <EllipseGeometry x:Name="EllipseFigure"

             Center="20,20" RadiusX="15" RadiusY="15" />

                </Path.Data>

            </Path>

            <StackPanel Orientation="Horizontal" Canvas.Left="10" Canvas.Top="265">

                <!-- Button that Starts animation. -->

                <Button Click="Start" Width="165" Height="50"

                  Margin="2" Content="Begin" FontSize="20" />

                <!-- Button that pauses animation. -->

                <Button Click="Pause" Width="165" Height="50"

                  Margin="2" Content="Pause" FontSize="20"/>

                <!-- Button that resumes animation. -->

                <Button Click="Resume"

              Width="165" Height="50" Margin="2" Content="Resume" FontSize="20" />

                <!-- Button that stops animation. Stopping the animation returns the

             ellipse to its original location. -->

                <Button Click="Stop" Width="165" Height="50"

                  Margin="2" Content="Stop" FontSize="20"/>

            </StackPanel>

        </Canvas>

    </Grid>

</Page>

 

Step 4

Now enter the code in the MainPage.xaml.cs file to generate the events of the buttons, as in:
 

namespace App5

{

    public sealed partial class MainPage : Page

    {

        public MainPage()

        {

            this.InitializeComponent();

        }

        private void Start(object sender, RoutedEventArgs e)

        {

            myStoryboard.Begin();

        }

        private void Pause(object sender, RoutedEventArgs e)

        {

            myStoryboard.Pause();

        }

        private void Resume(object sender, RoutedEventArgs e)

        {

            myStoryboard.Resume();

        }

        private void Stop(object sender, RoutedEventArgs e)

        {

            myStoryboard.Stop();

        }

    }

}

Step 5

Now to run the application press F5; the screen will look like:



When we click on the Begin button the ellipse shaped ball will start renderng in the screen as:



Now when we click on the pause button the ball will stop running and when click on resume it will again start rendering from that position where we paused it. When we click on the stop button the ball will stop running and go to its starting position. This example also shows an animation that we apply to this particular ellipse shaped ball.

Summary

In this article I explained how to apply an animation in any shape.