Animation in Wpf || Animation Using storyboard in wpf

Introduction:

Windows Presentation Foundation (WPF) provides developers with a unified programming model for building rich Windows smart client user experiences that incorporate UI, media, and documents

Animation in WPF has been made easier because WPF achieves animation by modifying properties of elements, whereas in Windows Forms, a developer has to create a timer and modify the appearance of elements on the tick event of a timer. WPF uses its own timing system which can be written using managed code and XAML. The internal work of redrawing the screen is handled efficiently by WPF. While animating using WPF, you just need to focus on the effects you want to create without bothering about how to achieve those effects.

Following article shows the animation effects in Wpf using properties

Step1:

Create new Project->Wpf application

Step2:

Copy and paste the following lines of code in your Mainwindow.xaml

MainWindow.Xaml

<Window x:Class="AnimatedFlag.MainWindow"

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

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

        Title="Indian Flag" Height="350" Width="525">

    <Grid>

        <Image Name="flagImage" Margin="12">

            <Image.Triggers>

                <EventTrigger RoutedEvent="Window.Loaded">

                    <BeginStoryboard>

                        <Storyboard>

                            <DoubleAnimation Name="da" Storyboard.TargetName="flagImage" Storyboard.TargetProperty="Width" From="200" To="200" Duration="0:0:0.1" Completed="DoubleAnimation_Completed"/>

                        </Storyboard>

                    </BeginStoryboard>

                </EventTrigger>

            </Image.Triggers>

        </Image>

    </Grid>

</Window>

Step3:

Go to Mainwindow.xaml.cs page add the following code to it

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Navigation;

using System.Windows.Shapes;

namespace AnimatedFlag

{

    /// <summary>

    /// Interaction logic for MainWindow.xaml

    /// </summary>

    public partial class MainWindow : Window

    {

        int ctr = 1;

        public MainWindow()

        {

            InitializeComponent();

        }

        private void DoubleAnimation_Completed(object sender, EventArgs e)

        {

            ShowImage();

            da.BeginAnimation(Image.WidthProperty, da);

        }

        private void ShowImage()

        {

            string filename = "Images/Flag" + ctr + ".jpg";

            BitmapImage image = new BitmapImage();

            image.BeginInit();

            image.UriSource = new Uri(filename, UriKind.Relative);

            image.EndInit();

            flagImage.Source = image;

            ctr++;

            if (ctr > 6)

            {

                ctr = 1;

            }

        }

    }

}

Now Run the application and see the output

Demo: