Table of Contents
- Overview
- Introduction to Silverlight Animations
- What is Silverlight Animation?
- What is the namespace used in Silverlight Animations?
- Timeline
- What are the Types of Animations in Silverlight?
- Define Animation types
- What is Storyboard?
- Storyboard Properties
- Storyboard Methods
- How to implement the Animation?
- What are the important properties/Methods used in the Animation?
Duration BeginTime AutoReverse RepeatBehavior FillBeSpeedRatio
- How to trigger the Storyboard Begin event with XAML?
- Example of ColorAnimation
- Example of DoubleAnimation
- Example of PointAnimation
- Example of Animation with Code behind
- Animation in XAML versus Animation in Code
- Start, Stop, Pause, and Resume an Animation
- Conclusion
- History
In this chapter, you will be learning the basic fundamental concepts of Animations in Silverlight Application, which includes Animation Types, namespace details, classes, objects used, implementation of different types of animations with XAML and with C# code and some more interesting samples for each animation. You will see how to use important properties of Timeline class with examples, controlling animation with storyboard methods. We will also see Animation in XAML versus Animation in Code with an example.
At the end of this chapter, you will learn:
- Animation basic concepts
- Animation namespace details
- Types of animations like from/to, key-frame and easing functions
- How to implement different types of animations in Silverlight
- Important properties and methods of Storyboard and animation classes
- Animation in XAML versus Animation in Code
- Example for each animation types
You can also find some of my other articles on Silverlight technology:
- Silverlight Introduction - ASilverlightIntroduction.aspx
- Getting started with Silverlight - GettingStartedSilverlight.aspx
- Data Binding in Silverlight - SLDataBindingIntro.aspx
Animation in Silverlight is one of the exciting topics which is available since the initial release of the Silverlight technology. There are some enhancements and performance improvements in every release of Silverlight on Animations. Knowing how to apply Animations in Silverlight applications is very much required because Animations play a very important role in most of the applications like gaming, Slideshow, etc… Animation gives a nice effect to the User interface.
In Silverlight application, we can animate object just by applying their individual properties over the period of time. Here is the simple example of changing Path property from From="50,450" To="450,50" within the Canvas 500,500.
Figure: Animation in action in four steps
We can apply the Animation by just changing the height, width, opacity or color of the control. The important thing here to note is we can apply the Animation only on properties whose values are of type double, color and point.
In Silverlight, System.Windows.Media.Animation namespace provides the number of classes & objects which help to perform animation in Silverlight applications. Some of the frequently used classes are Storyboard, ColorAnimation, DoubleAnimation, PointAnimation and Timeline.
Figure: Animation namespace screenshot from MSDN
For more information, visit this link.
All the animation classes are inherited from Timeline abstract class. Timeline is the base abstract class which provides many properties highlighted in the screen which we will be using later in the examples.
Figure: Animation or Timeline class properties
Here the example of Storyboard class inherited from Timeline abstract class.
Animation in Silverlight belongs to two categories:
Figure: Type of Animation in Silverlight
- From/To Animation: Animates between a starting and ending value. While creating the Animation, we will be having
From and To properties to set the beginning and ending values.
- Use the
From property to set the starting value
- Use the
To property to set the ending value
These are simple to implement and these are basic animations. Animations belonging to this category are:
ColorAnimation DoubleAnimation PointAnimation
- Key-frame Animation: Animates between a series of values specified using key-frame objects. Key-frame animations are more powerful than
From/To animations because you can specify any number of target values and even control their interpolation method. This kind of Animation implementation is a bit complex than basic animations. Animations belonging to this category are:
ColorAnimationUsingKeyFrames DoubleAnimationUsingKeyFrames PointAnimationUsingKeyFrames
What is ColorAnimation?
Applying the animation on color property of the Silverlight control is known as the ColorAnimation. For example, a SolidColorBrush is the color property.
What is ColorAnimationUsingKeyFrames?
Applying the animation on color property of the Silverlight control with more than one value is known as the ColorAnimationUsingKeyFrames. For example, SolidColorBrush is the color property.
What is DoubleAnimation?
Applying the animation on integer or double value properties of the Silverlight control is known as the DoubleAnimation. For example, for example, the Opacity or Height or Width are double or integer value properties.
What is DoubleAnimationUsingKeyFrames?
Applying the animation on integer or double value property of the Silverlight control with more than one value is known as the DoubleAnimationUsingKeyFrames. For example, Opacity or Height or Width are double or integer value properties.
What is PointAnimation?
Applying the animation on point value properties of the Silverlight control is known as the PointAnimation. For example, for example, the X, Y coordinates points.
What is PointAnimationUsingKeyFrames?
Applying the animation on point value property of the Silverlight control with more than one value is known as the PointAnimationUsingKeyFrames. For example, the X, Y coordinates points.
What is ObjectAnimationUsingKeyFrames?
Applying the animation on object related property of the Silverlight control with more than one value is known as the ObjectAnimationUsingKeyFrames. For example, Fill property.
Storyboard class plays a very important role in Silverlight animations. Without using storyboaclass, we will not be able to implement the animation in Silverlight. This is the core part of the Animation which acts like the parent control for all Animation controls. This is the container control which contains one or more animation controls like ColorAnimation, DoubleAnimation and PointAnimation, etc… and gives the instruction to Animation controls to play the animation. If you are already familiar with MediaElement control, you can compare with that control. A storyboard control has the ability to play, pause, resume and stop the animation.
The Storyboard class also inherits from Timeline class. The most important aspects of this class are its methods to begin, stop, pause, and resume the animation.
Figure: Animation controlling storyboard methods
Storyboard’s TartgetName and TargetProperty properties are always required when we define a storyboard and these two are easy to understand. TargetName: Use the TargetName attached property to specify the object to animate. TargetProperty: Use the TargetProperty attached property to specify the property to animate.
Let’s take a simple example of how these two properties are used. In this example, I am targeting StackPanel control to animate. Name of the control MyStackPanel is assigned to the Storyboard.TargetName property.
You will notice that assigning Storyboard.TargetProperty syntax is quite different in this example.
<StackPanel x:Name="myStackPanel" Background="Red" Loaded="Start_Animation">
<StackPanel.Resources>
<Storyboard x:Name="colorStoryboard">
-->
<ColorAnimation BeginTime="00:00:00" Storyboard.TargetName="myStackPanel"
Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
From="Red" To="Green" Duration="0:0:4" />
</Storyboard>
</StackPanel.Resources>
</StackPanel>
Notice that the property value being animated (Color) belongs to a SolidColorBrush object, which is not named or even explicitly declared. This indirect targeting is accomplished by using the following special syntax.
C#
Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
Alternatively, you can explicitly create the SolidColorBrush, name it, and target its Color property directly. The following example shows how to create the same animation as the previous example, but using direct property targeting.
<StackPanel Loaded="Start_Animation">
<StackPanel.Resources>
<Storyboard x:Name="colorStoryboard">
-->
<ColorAnimation BeginTime="00:00:00" Storyboard.TargetName="mySolidColorBrush"
Storyboard.TargetProperty="Color" From="Red" To="Green" Duration="0:0:4" />
</Storyboard>
</StackPanel.Resources>
<StackPanel.Background>
<SolidColorBrush x:Name="mySolidColorBrush" Color="Red" />
</StackPanel.Background>
</StackPanel>
Note:
In order to use the TargetName property in Storyboard, you need to give the Name to the target control.
Apart from the properties which we discussed with the above example, Storyboard class also supports a few methods which we will be using most of the time in the code behind to start, stop, pause and resume.
Begin: Starts the animation with the first timeline in the storyboard Pause: Pauses the current storyboard's timeline. Call Resume to unpause the timeline Resume: Resumes the current storyboard's timeline Stop: Stops the animation
Implementing basic animation in Silverlight is very simple and it is just a four step process:
- Create
Object
- Create
Animation
- Define the
Storyboard
- Associate the
Storyboard with an event
To discuss the animation implementation, let’s take a simple example and go through step by step.
Step 1: Create Object
In the first step, you need to create a control which you want to animate. In the proceeding example, I have created a simple Ellipse control and placed it in the Border control so that it will look nice within the border. Make sure that you will be giving the name to the control which you what to change as part of the animation.
<Border x:Name="brdTest" BorderBrush="Green"
BorderThickness="4" Width="400" Height="400">
<Ellipse Width="200" Height="200" >
<Ellipse.Fill>
<SolidColorBrush Color="Yellow" x:Name="myball">
</SolidColorBrush>
</Ellipse.Fill>
</Ellipse>
</Border>
Step 2: Create Animation
Create animation class like ColorAnimation, DoubleAnimation, PointAnimation and set its properties. In the proceeding example, I have created a ColorAnimation animation and set the required properties. You make sure that you set the required properties like Storyboard.TargetProperty, Storyboard.TargetName, From and To when you create an Animation class.
<ColorAnimation
Storyboard.TargetProperty="Color"
Storyboard.TargetName="myball"
From="Yellow"
To="Green" />
Step 3: Define the Storyboard
Animations are implemented in Silverlight through the use of Storyboard controls that contain one or more child animation controls. The Storyboard acts similar to a MediaElement with the ability to play, pause, and stop the animation. When the Storyboard is played back, the animation controls modify the size, shape, and look of Silverlight controls.
The Storyboard control acts as a container control for animation controls and allows you to set properties that apply to the animation. The most commonly used properties of the Storyboard control are AutoReverse, BeginTime, RepeatBehavior, and Duration.
<StackPanel.Resources>
<Storyboard x:Name="mystoryboard"
AutoReverse="True"
Duration="0:0:5" >
<ColorAnimation
Storyboard.TargetProperty="Color"
Storyboard.TargetName="myball"
From="Yellow"
To="Green" />
</Storyboard>
</StackPanel.Resources>
Note: You have to create Storyboard control as a resource.
Step 4: Associate the Storyboard with an event
At this movement, you know the controls which you want to animate also created animation controls and defined storyboard for the animation controls. So everything is done, then what is pending? Just implementing these three steps is not sufficient, we also need to have the trigger to start the animation. For this, you need to create a simple button and attach the button click event in the managed code. As we discussed earlier, storyboard control supports Begin() method to start the animation. By the way, you need to give the Name to the Storyboard control so that you will be able to access it in the C# code.
Let’s take a look into the button control and code behind event handler in action.
<Button Content="Start" Click="Button_Click" Width="70" Height="30"
HorizontalAlignment="Center" />
private void Button_Click(object sender, RoutedEventArgs e)
{
mystoryboard.Begin();
}
Wow! We know all steps to create basic animation in Silverlight application. Let’s take a look of all code samples together in one place with output. In this example, the color of the rectangle changed from Yellow to Green.
XAML
<StackPanel>
<StackPanel.Resources>
<Storyboard x:Name="mystoryboard"
AutoReverse="True"
Duration="0:0:5" >
<ColorAnimation
Storyboard.TargetProperty="Color"
Storyboard.TargetName="myball"
From="Yellow"
To="Green" />
</Storyboard>
</StackPanel.Resources>
<Border x:Name="brdTest" BorderBrush="Green" BorderThickness="4"
Width="400" Height="400">
<Ellipse Width="200" Height="200" >
<Ellipse.Fill>
<SolidColorBrush Color="Yellow" x:Name="myball">
</SolidColorBrush>
</Ellipse.Fill>
</Ellipse>
</Border>
<Button Content="Start" Click="Button_Click" Width="70"
Height="30" HorizontalAlignment="Center" />
</StackPanel>
C#
private void Button_Click(object sender, RoutedEventArgs e)
{
mystoryboard.Begin();
}
Output
Figure: First Animation in Silverlight
All animation classes are inherited from Timeline base class which contains some properties and methods which are available to all animation classes. Let’s talk about the properties of the animation controls before proceeding with examples. I have highlighted some of the most important properties of the Timeline class below.
Figure: Animation or Timeline class properties
Duration: The Duration property allows you to specify the amount of time the Storyboard will take to play back. The value of Duration is based on the hours:minutes:seconds syntax. The Duration can also be specified on each animation control in the Storyboard instead of the Storyboard control.
BeginTime: The BeginTime property specifies the time, in hours:minutes:seconds format, in the Storyboard timeline to begin playback of the animation.
As the name suggests, the BeginTime property allows you to specify a time at which point the animation object begins activity. For example, you could specify a time of ten seconds on the BeginTime of a Storyboard. When you begin the Storyboard using the Begin method, the Storyboard will wait ten seconds and then begin.
Let’s take an example to understand the BeginTime Property. In this example, the duration is 20 seconds but BeginTime time is 10 seconds. However, Duration is 20 seconds it does not animate 20 seconds instead it animates only 10 seconds because of late BeginTime.
Figure: Understand the BeginTime property
<StackPanel Orientation="Vertical" >
<StackPanel.Resources>
<Storyboard BeginTime="0:0:10" x:Name="sbEllipse1">
<DoubleAnimation
Storyboard.TargetName="myBrush1"
Storyboard.TargetProperty="RadiusX"
From="0" To="1"
Duration="0:0:20"
/>
<DoubleAnimation
Storyboard.TargetName="myBrush1"
Storyboard.TargetProperty="RadiusY"
From="0" To="1"
Duration="0:0:20"
/>
</Storyboard>
</StackPanel.Resources>
<Border x:Name="brdTest1" BorderBrush="Green" BorderThickness="4"
Width="300" Height="400">
<Ellipse Height="100" Width="100">
<Ellipse.Fill>
<RadialGradientBrush x:Name="myBrush1"
RadiusX="0.0"
RadiusY="0.0"
GradientOrigin="0.5,0.5">
<GradientStop Color="Red" Offset="0.25"/>
<GradientStop Color="Green" Offset="0.50"/>
<GradientStop Color="Yellow" Offset="0.75"/>
<GradientStop Color="Blue" Offset="1.0"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Border>
<Button Content="Start" Click="Button1_Click" Width="70"
Height="30" HorizontalAlignment="Center" />
</StackPanel>
private void Button1_Click(object sender, RoutedEventArgs e)
{
sbEllipse1.Begin();
}
Figure: Example of BeginTime properties
AutoReverse: If the AutoReverse property is set to True, the animation first plays forward and then immediately plays backward. This allows you to return the Silverlight controls to their original status. This is extremely useful when implementing animations that animate controls only when the mouse is over them.
<StackPanel.Resources>
<Storyboard BeginTime="0:0:0" x:Name="sbEllipse2" AutoReverse="True">
<DoubleAnimation
Storyboard.TargetName="myBrush2"
Storyboard.TargetProperty="RadiusX"
From="0" To="1"
Duration="0:0:10"
/>
<DoubleAnimation
Storyboard.TargetName="myBrush2"
Storyboard.TargetProperty="RadiusY"
From="0" To="1"
Duration="0:0:10"
/>
</Storyboard>
</StackPanel.Resources>
Figure: AutoReverse Property example output
RepeatBehavior: The RepeatBehavior property allows you to specify the number of times to repeat the animation. If you want the animation to run indefinitely, you can set the RepeatBehavior property to Forever. If AutoReverse is set to True, then playing forward and backward only counts as a single iteration. For example, the following Storyboard code repeats the animation three times:
Basically, a RepeatBehavior can be defined as:
Ø Timespan string RepeatBehavior="0:0:4"
Ø #x string RepeatBehavior="2x"
Ø special value Forever RepeatBehavior="Forever"
Here is the example of how RepeatBehavior property is used.
<!---->
<StackPanel>
<StackPanel.Resources>
<Storyboard x:Name="myStoryboard">
<!---->
<DoubleAnimation
Storyboard.TargetName="ForeverRepeatingRectangle"
Storyboard.TargetProperty="Width"
From="50" To="300" Duration="0:0:2" RepeatBehavior="Forever" />
<!---->
<DoubleAnimation
Storyboard.TargetName="FourSecondsRepeatingRectangle"
Storyboard.TargetProperty="Width"
From="50" To="300" Duration="0:0:2" RepeatBehavior="0:0:4" />
<!---->
<DoubleAnimation
Storyboard.TargetName="TwiceRepeatingRectangle"
Storyboard.TargetProperty="Width"
From="50" To="300" Duration="0:0:2" RepeatBehavior="2x" />
<!---->
<DoubleAnimation
Storyboard.TargetName="HalfRepeatingRectangle"
Storyboard.TargetProperty="Width"
From="50" To="300" Duration="0:0:2" RepeatBehavior="0.5x" />
<!---->
<DoubleAnimation
Storyboard.TargetName="OneSecondRepeatingRectangle"
Storyboard.TargetProperty="Width"
From="50" To="300" Duration="0:0:2" RepeatBehavior="0:0:1" />
</Storyboard>
</StackPanel.Resources>
<TextBlock Text="RepeatBehavior Property" />
<Border x:Name="brdTest4" BorderBrush="Green" BorderThickness="4"
Width="300" Height="400">
<StackPanel>
<!---->
<Rectangle Name="ForeverRepeatingRectangle"
Fill="Red" Width="50" Height="20" />
<Rectangle Name="FourSecondsRepeatingRectangle"
Fill="Blue" Width="50" Height="20" />
<Rectangle Name="TwiceRepeatingRectangle"
Fill="Yellow" Width="50" Height="20" />
<Rectangle Name="HalfRepeatingRectangle"
Fill="Green" Width="50" Height="20" />
<Rectangle Name="OneSecondRepeatingRectangle"
Fill="Orange" Width="50" Height="20" />
</StackPanel>
<!---->
</Border>
<Button Margin="10" Content="Restart Animation" Click="Start_Animation" />
</StackPanel>
private void Start_Animation(object sender, RoutedEventArgs e)
{
myStoryboard.Begin();
}
Figure: RepeatBehavior Property example output
FillBehavior: The FillBehavior property specifies how a timeline behaves when it ends. The default value for this property is HoldEnd, which means that after an animation ends, the object that was animated holds its final value. For example, if you animate the Opacity property of a Rectangle from 1 to 0 over 2 seconds, the default behavior is for the rectangle to remains at 0 opacity after the 2 seconds elapses. If you set FillBehavior to Stop, the opacity of the rectangle reverts to its original value of 1 after the animation ends.
Look at the intellisense in Visual Studio 2008:
<!---->
<StackPanel>
<TextBlock Text="FillBehavior Property" />
<Border x:Name="brdTest5" BorderBrush="Green"
BorderThickness="4" Width="300" Height="400">
<Rectangle
x:Name="MyAnimatedRectangle"
Width="100"
Height="100"
Fill="Blue">
<Rectangle.Triggers>
<!---->
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyAnimatedRectangle"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0" Duration="0:0:10" FillBehavior="HoldEnd" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Border>
</StackPanel>
SpeedRatio: This specifies the rate of time at which the current timeline elapses relative to its parent. The default value is 1.
Let us understand the SpeedRatio property in detail. If the SpeedRatio is set to 3, then the animation completes three times faster. If you decrease it, the animation is slowed down (for example, if SpeedRatio is set to 0.5 then the animation takes twice as long). Although the overall effect is the same as changing the Duration property of your animation, setting SpeedRatio makes it easier to control how simultaneous animations overlap.
The following snapshot describes the DoubleAnimation of the from/to type with the SpeedRatio property set to 2. This will cause the fade-in effect on the Image1 Image control to be completed in 0.5 seconds.
<Storyboard x:Name="fadeIn">
<DoubleAnimation From="0" To="1"
Storyboard.TargetName="Image1"
Storyboard.TargetProperty="Opacity"
SpeedRatio="2">
</DoubleAnimation>
</Storyboard>
Default values: If you don’t use any properties in the animation or storyboard, it will use the default value of the properties, it animates just once.
<StackPanel.Resources>
<Storyboard x:Name="sbEllipse1">
<DoubleAnimation
Storyboard.TargetName="myBrush1"
Storyboard.TargetProperty="RadiusX"
From="0" To="1"
/>
<DoubleAnimation
Storyboard.TargetName="myBrush1"
Storyboard.TargetProperty="RadiusY"
From="0" To="1"/>
</Storyboard>
</StackPanel.Resources>
Output of all of the above properties in action:
Figure: Animation properties in action
As you begin to implement animations in your Silverlight applications, you will find that some of them should be started by the managed code. However, some animations should be started as soon as the application is loaded.
Starting the animation when the page is loaded is possible by nesting the Storyboard control in an EventTrigger element for the root layout control. The following code shows an example of nesting a Storyboard control in an EventTrigger element of a Grid control:
<Grid x:Name="LayoutRoot" Background="White">
<Grid.Triggers>
<EventTrigger RoutedEvent="Grid.Loaded">
<TriggerActionCollection>
<BeginStoryboard>
<Storyboard AutoReverse="True" RepeatBehavior="Forever">
<PointAnimation To="50,350" Storyboard.TargetName="line4"
Storyboard.TargetProperty="EndPoint" />
</Storyboard>
</BeginStoryboard>
</TriggerActionCollection>
</EventTrigger>
</Grid.Triggers>
<Border x:Name="brdTest" BorderBrush="Green" BorderThickness="4"
Width="400" Height="400">
<Path Stroke="Black" StrokeThickness="1">
<Path.Data>
<GeometryGroup>
<LineGeometry x:Name="line4" StartPoint="100,150"
EndPoint="200,250" />
</GeometryGroup>
</Path.Data>
</Path>
</Border>
</Grid>
The EventTrigger attaches to the Loaded event to the Grid element and then defines the BeginStoryboard element as part of the TriggerActionCollection.
<StackPanel Orientation="Vertical">
<StackPanel.Resources>
<Storyboard x:Name="mystoryboard"
AutoReverse="True"
Duration="0:0:5" >
<ColorAnimation
Storyboard.TargetProperty="Color"
Storyboard.TargetName="myball"
From="Yellow"
To="Green" />
</Storyboard>
</StackPanel.Resources>
<Border x:Name="brdTest" BorderBrush="Green" BorderThickness="4"
Width="400" Height="400">
<Ellipse Width="200" Height="200" >
<Ellipse.Fill>
<SolidColorBrush Color="Yellow" x:Name="myball">
</SolidColorBrush>
</Ellipse.Fill>
</Ellipse>
</Border>
<Button Content="Start" Click="Button_Click" Width="70"
Height="30" HorizontalAlignment="Center" />
</StackPanel>
C#
private void Button_Click(object sender, RoutedEventArgs e)
{
mystoryboard.Begin();
}
XAML
<StackPanel Orientation="Vertical">
<StackPanel.Resources>
<Storyboard BeginTime="0:0:0" x:Name="sbEllipse" Duration="Forever">
<DoubleAnimation
Storyboard.TargetName="myBrush"
Storyboard.TargetProperty="RadiusX"
From="0" To="1"
Duration="0:0:5"
AutoReverse="True" />
<DoubleAnimation
Storyboard.TargetName="myBrush"
Storyboard.TargetProperty="RadiusY"
From="0" To="1"
Duration="0:0:5"
AutoReverse="True" />
</Storyboard>
</StackPanel.Resources>
<Border x:Name="brdTest" BorderBrush="Green" BorderThickness="4"
Width="400" Height="400">
<Ellipse Height="250" Width="250">
<Ellipse.Fill>
<RadialGradientBrush x:Name="myBrush"
RadiusX="0.0"
RadiusY="0.0"
GradientOrigin="0.5,0.8">
<GradientStop Color="Red" Offset="0.0"/>
<GradientStop Color="Blue" Offset="0.25"/>
<GradientStop Color="Yellow" Offset="0.5"/>
<GradientStop Color="Green" Offset="1.0"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Border>
<Button Content="Start" Click="Button_Click" Width="70"
Height="30" HorizontalAlignment="Center" />
</StackPanel>
C#
private void Button_Click(object sender, RoutedEventArgs e)
{
sbEllipse.Begin();
}
XAML
<Canvas Width="500" Height="500">
<Canvas.Resources>
<Storyboard x:Name="myStoryboard">
-->
<PointAnimation
Storyboard.TargetProperty="Center"
Storyboard.TargetName="MyAnimatedEllipseGeometry"
Duration="0:0:5"
From="50,450"
To="450,50"
RepeatBehavior="Forever" />
</Storyboard>
</Canvas.Resources>
<Border x:Name="brdTest" BorderBrush="Green" BorderThickness="4"
Width="500" Height="500">
<Path Fill="Red" Loaded="Start_Animation">
<Path.Data>
-->
<EllipseGeometry x:Name="MyAnimatedEllipseGeometry"
Center="200,100" RadiusX="35" RadiusY="35" />
</Path.Data>
-->
</Path>
</Border>
</Canvas>
C#
private void Start_Animation(object sender, RoutedEventArgs e)
{
myStoryboard.Begin();
}
<Canvas x:Name="LayoutRoot" Background="White">
</Canvas>
public partial class AnimationWithCSharp : UserControl
{
public AnimationWithCSharp()
{
InitializeComponent();
Loaded += new RoutedEventHandler(MainPage_Loaded);
}
void MainPage_Loaded(object sender, RoutedEventArgs e)
{
Ellipse myEllipse = new Ellipse();
myEllipse.Width = 100;
myEllipse.Height = 100;
RadialGradientBrush myrgBrush = new RadialGradientBrush();
Point mypoint = new Point(0.5, 0.5);
myrgBrush.GradientOrigin = mypoint; myrgBrush.Center = new Point(0.5, 0.5); myrgBrush.RadiusX = 0.5;
myrgBrush.RadiusY = 0.5;
GradientStop gStop1 = new GradientStop();
gStop1.Color = Colors.Red; gStop1.Offset = 0.0;
myrgBrush.GradientStops.Add(gStop1);
GradientStop gStop2 = new GradientStop();
gStop2.Color = Color.FromArgb(255, 0, 255, 0); gStop2.Offset = 0.5;
myrgBrush.GradientStops.Add(gStop2);
GradientStop gStop3 = new GradientStop();
gStop3.Color = Colors.Blue;
gStop3.Offset = 1;
myrgBrush.GradientStops.Add(gStop3);
myEllipse.Fill = myrgBrush;
LayoutRoot.Children.Add(myEllipse);
Duration duration = new Duration(TimeSpan.FromSeconds(5));
DoubleAnimation myDoubleAnimation1 = new DoubleAnimation();
DoubleAnimation myDoubleAnimation2 = new DoubleAnimation();
myDoubleAnimation1.Duration = duration;
myDoubleAnimation2.Duration = duration;
Storyboard sb = new Storyboard();
sb.Duration = duration;
sb.Children.Add(myDoubleAnimation1);
sb.Children.Add(myDoubleAnimation2);
Storyboard.SetTarget(myDoubleAnimation1, myEllipse);
Storyboard.SetTarget(myDoubleAnimation2, myEllipse);
Storyboard.SetTargetProperty
(myDoubleAnimation1, new PropertyPath("(Canvas.Left)"));
Storyboard.SetTargetProperty
(myDoubleAnimation2, new PropertyPath("(Canvas.Top)"));
myDoubleAnimation1.To = 200;
myDoubleAnimation2.To = 200;
LayoutRoot.Resources.Add("unique_id", sb);
sb.Begin();
}
}
It is very important to understand when to use XAML and when to use code behind to implement animation in Silverlight. Keeping performance of the application in mind, we need to play around.
Defining storyboard and Timeline in XAML is generally easier to implement and this is the preferred method in most of the cases but sometimes it is time consuming and more work, in that case we may need to implement storyboard and timelines in backend C#/VB.NET code not with XAML.
In the proceeding example, we have to change the opacity of the color of the grid cell when mouse is over the cell. To achieve this requirement, we can use the XAML but we need to write many lines of code to define storyboards and timelines, but with code it is just less than 50 lines.
namespace AnimationSampleCode
{
public partial class AnimationWithCSharp : UserControl
{
public AnimationWithCSharp()
{
InitializeComponent();
LoadColors();
}
private Random _random = new Random((int)DateTime.Now.Ticks);
private TimeSpan _halfSecond = new TimeSpan(0, 0, 0,0, 500);
private void LoadColors()
{
int gridsize = 15;
for (int i = 0; i < gridsize;i++ )
{
gridColors.RowDefinitions.Add(new RowDefinition());
gridColors.ColumnDefinitions.Add(new ColumnDefinition());
}
for (int col = 0; col < gridsize; col++)
{
for (int row = 0; row < gridsize; row++)
{
Rectangle rect = new Rectangle()
{
Margin = new Thickness(2),
Fill = RandomColor(),
Opacity = .05
};
Grid.SetColumn(rect,col);
Grid.SetRow(rect,row);
Storyboard mouseOverAnimation = new Storyboard();
DoubleAnimation newAnim = new DoubleAnimation()
{
To = 10,
Duration = _halfSecond ,
AutoReverse =true
};
mouseOverAnimation.Children.Add(newAnim);
Storyboard.SetTarget(newAnim,rect);
Storyboard.SetTargetProperty(newAnim,new PropertyPath("Opacity"));
rect.MouseEnter += delegate(object sender, MouseEventArgs e)
{
mouseOverAnimation.Begin();
};
gridColors.Children.Add(rect);
}
}
}
private SolidColorBrush RandomColor()
{
byte[] rgb = new byte[3];
_random.NextBytes(rgb);
Color randomColor = Color.FromArgb(255, rgb[0], rgb[1], rgb[2]);
return new SolidColorBrush(randomColor);
}
}
}
Animation must be started with Storyboard’s begin() method, once animation started you can stop or pause and then a paused animation can be Resumed.
<!---->
<StackPanel Orientation="Vertical" HorizontalAlignment="Left">
<StackPanel.Resources>
<Storyboard BeginTime="0:0:0" x:Name="sbEllipse" AutoReverse="True" >
<DoubleAnimation
Storyboard.TargetName="myBrush"
Storyboard.TargetProperty="RadiusX"
From="0" To="1"
Duration="0:0:10"
/>
<DoubleAnimation
Storyboard.TargetName="myBrush"
Storyboard.TargetProperty="RadiusY"
From="0" To="1"
Duration="0:0:10"
/>
</Storyboard>
</StackPanel.Resources>
<TextBlock Text="Storyboard Methods" />
<Border x:Name="brdTest" BorderBrush="Green"
BorderThickness="4" Width="300" Height="400">
<Ellipse Height="100" Width="100">
<Ellipse.Fill>
<RadialGradientBrush x:Name="myBrush"
RadiusX="0.5"
RadiusY="0.5"
GradientOrigin="0.5,0.5">
<GradientStop Color="Red" Offset="0.25"/>
<GradientStop Color="Blue" Offset="0.50"/>
<GradientStop Color="Yellow" Offset="0.75"/>
<GradientStop Color="Green" Offset="1.0"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Border>
<StackPanel Orientation="Horizontal">
<Button Content="Start" Click="ButtonStart_Click"
Width="70" Height="30" HorizontalAlignment="Center" />
<Button Content="Pause" Click="ButtonPause_Click"
Width="70" Height="30" HorizontalAlignment="Center" />
<Button Content="Resume" Click="ButtonResume_Click"
Width="70" Height="30" HorizontalAlignment="Center" />
<Button Content="Stop" Click="ButtonStop_Click"
Width="70" Height="30" HorizontalAlignment="Center" />
</StackPanel>
</StackPanel>
C#
private void ButtonStart_Click(object sender, RoutedEventArgs e)
{
sbEllipse.Begin();
}
private void ButtonPause_Click(object sender, RoutedEventArgs e)
{
sbEllipse.Pause();
}
private void ButtonResume_Click(object sender, RoutedEventArgs e)
{
sbEllipse.Resume();
}
private void ButtonStop_Click(object sender, RoutedEventArgs e)
{
sbEllipse.Stop();
}
I hope you enjoyed this chapter; please do not forget to write your comments on this chapter, which will help me to improve myself in the future.
- 7th June, 2010: Initial version
