• Download source - 674.4 KB

Introduction

Animation can enhance Smart Phone/Tabs apps by adding interactivity, movement and rich user experience. Microsoft understands this, therefore they have added Storyboard class in their new development environment which provides basic as well as advanced animation functionality. Quick starter for animation in Windows can be viewed in the following link:

• http://msdn.microsoft.com/en-us/library/windows/apps/jj206955(v=vs.105).aspx

This tip deals with Storyboard class in C# whose details can be viewed in the following link:

• http://msdn.microsoft.com/en-us/library/windows.ui.xaml.media.animation.storyboard.aspx

Background

The application is developed to replicate the functionality of an IOS app presented in a tutorial at
http://www.appcoda.com/ios-programming-animation-uiimageview/.

In the above tutorial UIImage view, an IOS is used to display an animation of images using animation methods in Windows Phone 8/8.1 .Same results can be achieved by Storyboard. The idea behind the animation is moving different images at fast pace so it looks like an animation. The images which I am going to use are from app code. A snapshot of them is given below:

Using the Code

The code is written in Visual Studio 2013. There are two sections in the code, one is the XAML (Design View) and the other is in C# (Back end logic). In the design page, only an image view is added with the name of "ImageView1" to display the images. In the backend Storyboard, animation is created on load event of the application page.

Front End (XAML Code)

<!-- XAML -->

<phone:PhoneApplicationPage
    x:Class="SimpleAnimation.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True" Loaded="PhoneApplicationPage_Loaded">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- LOCALIZATION NOTE:
            To localize the displayed strings copy their values to appropriately named
            keys in the app's neutral language resource file (AppResources.resx) then
            replace the hard-coded text value between the attributes' quotation marks
            with the binding clause whose path points to that string name.

            For example:

                Text="{Binding Path=LocalizedResources.ApplicationTitle, 
                Source={StaticResource LocalizedStrings}}"

            This binding points to the template's string resource named "ApplicationTitle".

            Adding supported languages in the Project Properties tab will create a
            new resx file per language that can carry the translated values of your
            UI strings. The binding in these examples will cause the value of the
            attributes to be drawn from the .resx file that matches the
            CurrentUICulture of the app at run time.
         -->

        <!--TitlePanel contains the name of the application and page title-->

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Image x:Name="ImageView1" HorizontalAlignment="Left" 
            Height="758" VerticalAlignment="Top" Width="446" Stretch="Fill"/>

        </Grid>

        <!--Uncomment to see an alignment grid to help ensure your controls are
            aligned on common boundaries.  The image has a top margin of -32px to
            account for the System Tray. Set this to 0 (or remove the margin altogether)
            if the System Tray is hidden.

            Before shipping remove this XAML and the image itself.-->
        <!--<Image Source="/Assets/AlignmentGrid.png" 
        VerticalAlignment="Top" Height="800" Width="480" 
        Margin="0,-32,0,0" Grid.Row="0" Grid.RowSpan="2" 
        IsHitTestVisible="False" />-->
    </Grid>

</phone:PhoneApplicationPage>

Back End (C# Code)

//C#
//the code is based on:http://compiledexperience.com/windows-phone/tutorials/candle/       
     private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
        {
                     var storyboard = new Storyboard
            {
                RepeatBehavior = RepeatBehavior.Forever//animation will repeat after completion
            };

            var animation = new ObjectAnimationUsingKeyFrames();

            Storyboard.SetTarget(animation, ImageView1);
            Storyboard.SetTargetProperty(animation, new PropertyPath("Source"));

            storyboard.Children.Add(animation);

            for (int i = 1; i <= 16; i++)//16 is the number of images that are going to be displayed
            {
                var keyframe = new DiscreteObjectKeyFrame
                {
                    KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(50 * i)),//Time Interval
                    Value = String.Format("/Images/win_"+i.ToString()+".png")//Source of images
                };

                animation.KeyFrames.Add(keyframe);
            }

            Resources.Add("Storyboard", storyboard);//Add story board to resources

            storyboard.Begin();
        
        }

Some snap shots of the app are given below:

It is not complicated to create an animation. This is a simple animation, but if you want to create more complex animations and even combine animations, you can find more information on the web.

Points of Interest

This Storyboarding can be used for building simple 2D games by altering the animation images at predefined events occurred during game play.

History

• First version