Canvas animation in windows store apps

Animations are key features to make an app interactive and lively. It can occur between Opacity, change in X & Y coordinates, Bounce effect, Size changes etc. Storyboards are the most effective way to implement an animation.

In this example we will go through an animation, which would make a rectangular box move from left to right with position and time span being specified.
To make such kind of animation first of all it is required to animate the Canvas.Left property of an element using the DoubleAnimation class. This class makes use of the Duration specified in the format “hour:minute:second” and animates the Canvas.Left property of the element according to the time period specified. Other property includes AutoReverse, which reverses the animation (the same animation in opposite manner)and RepeatBehavior, which specifies how many times the animation can be repeated.

Here’s the XAML code piece illustrating the same.

<Page x:Class="App5.MainPage" xmlns="" xmlns:x="" xmlns:local="using:App5" xmlns:d="" xmlns:mc="" mc:Ignorable="d">
        <Storyboard Storyboard.TargetName="rectImageLogoContainer" x:Name="sbAnimateBottom" RepeatBehavior="Forever">
            <DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:5" From="100" To="400" x:Name="daAnimateBottom"></DoubleAnimation>
    <Grid x:Name="gdParContent">
        <Canvas VerticalAlignment="Center" HorizontalAlignment="Stretch">
            <Rectangle x:Name="rectImageLogoContainer" Height="150" Width="150" Canvas.Left="100" Fill="Red" />

Here’s the c# code that would start the animation.

/// <summary>
        /// Invoked when this page is about to be displayed in a Frame.
        /// </summary>
        /// <param name="e">Event data that describes how this page was reached.  The Parameter
        /// property is typically used to configure the page.</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)

Using story board we can achieve animation of position on X axis or Y axis. Time duration can be manually specified and in this example, since we have provided the repeat behaviors it will make a continuous animation by animating the box from Canvas.Left -100 to 400. The parameters of the DoubleAnimation can be specified from the code behind also if required.

Written By: Anobik Dey, Software Developer, Mindfire Solutions


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s