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:
