Animation with buttons FontSize

Here's an example of an animation where clicking a button will increase the size of the font of the button.

First I've declared two constants of type double, one for the font size of the button at the initialization time, which is declared as initFontSize; and the other one at runtime when the button is clicked. When clicked, the event handler creates a DispatcherTimer that generates Tick events every tenth of a second. The TimerOnTick method here increases the FontSize by two units every tenth of a second until the size reaches 48 units, at which point the button is restored to its original size and the timer is stopped. The whole process takes about 1.8 seconds: just multiply the timer period by the difference in the initial and final FontSize values, divided by the increment to the FontSize property. Here's the output:

Figure 1: Expanding FontSize Example

This was an Example from Charles Petzold’s WPF Book "Applications=Code+Markup-A Guide To The Windows Presentation Foundation". Look at the similarity between WPF and Silverlight. Isn't that cool? What do you think? Here's one more thing I would like to mention: at time of expanding of the font size if you click the button the size will increase at twice the speed. Click on the button while it’s expanding to check this demonstration. The idea behind this is that when one of the two timers increases the size to 48 units, the Tick handler will restore the button's size and stop the timer, but the other timer will increase the button to 48 units again. If you want to avoid this behavior, just set a Boolean variable when the timer is going and don't start a second timer when the variable is set.

DoubleAnimation

The most common animation is the DoubleAnimation. Let's clarify what actually lies behind DoubleAnimation. DoubleAnimation animates the value of a double property between two target values using linear interpolation over a specified duration. The From, To, By properties are used to set values in order to create a transition between two target values.

Here's some important points on the behavior of the From, To and by properties :

• From: The animation progresses from the value specified by the From property to the base value of the property being animated or to a previous animation's output value, depending on how the previous animation is configured.
• From and To: The animation progresses from the value specified by the From property to the value specified by the To property.
• From and By: The animation progresses from the value specified by the From property to the value specified by the sum of the From and By properties.
• To: The animation progresses from the animated property's base value or a previous animation's output value to the value specified by the To property.
• By: The animation progresses from the base value of the property being animated or a previous animation's output value to the sum of that value and the value specified by the By property.

Here's a program that uses the DoubleAnimation to enlarge a Button. It also enlarges the FontSize of the Textblock placed over the button. I've usef Microsoft Expression Blend 2.5 March preview here to achieve this goal. To do this, open Expression Blend and go to the File menu; then select New Project. Finally, select the Silverlight 2.0 project template.

Figure 2: Open project with Expression Blend March Preview 2.5

Add a Button and a TextBlock. I've set the Width of the button to auto and Height to 100. Set the TextBlock's Margin to 50,0,60,114, and TextWrapping to wrap.

Figure 3: Setting Properties

Add a Storyboard by clicking the + sign which is located under the Objects and Timeline tab, under the Interaction panel. This will open a new storyboard for us.

Figure 4: Adding Storyboard

Now select the button in the Objects and Timeline panel. As you see in the previous picture your button is selected in the objects and Timeline panel. Change the Height property of the button to 110. This will put a marker over our Timeline which indicates the starting point of our animation.

Figure 5: Setting start and end point

Drag the timeline where the Playhead position shows the time something like 0:00.500 and set the Height of the button to 120.You'll see that another marker has been placed.

Figure 6: Fixing playhead position

Drag the Timeline again where Playhead position is 0:01.000 and set the Height to 130. At this point the goal of increasing the button height has been achieved.

Figure 7: Setting end point of the timeline to increase the button height

Next select the TextBlock and scale its X position to 1.25 and Y position to 1.25, until Playhead position shows 0:00.000. Place the Timeline to 0:00.500 and set X position to 1.35 and Y to 1.35. At last, place the Timeline to 0:01.000 and set X to 1.6 and Y to 1.6.

Figure 8: Scaling TextBlock’s X and Y position

When you run the application and click over the button you'll see that the Height of the Button and the text over it are animating. It is possible to give a more eye catching animated effect. The XAML generated behind the scene is something like this:

I've just shown an example of how animations like this are done in Silverlight 2.0 beta, and anyone who has done some WPF development should be quite familiar with this.

Animated Text Effect

Here's one more program with some eye catching effects on text. Try this by modifying the properties of the controls which contains the text. This is also done with the help of Microsoft Expression Blend 2.5 March Preview.

Figure 9: Animated Text Effect

The XAML generated from this program is something like this:

Listing 1: Page.xaml

I've set the Grid's background to LinearGradientBrush and set it's EndPoint to 0.5,1StartPoint to 0.5,0 SpreadMethod to Reflect and then specified the GradientStop Color and Offset. You can experiment here with your preferred color. Next is the <TextBlock> section. I've set the Height, Margin, Name, VerticalAlignment, RenderTransformOrigin, TextWrapping properties and wired the MouseLeftButtonDown event handler. I've once again used LinearGradientBrush to color the Foreground and then specified the TextBlock's RenderTransform property and TransformsGroups which will be clear to you shortly. To give you a hint what the TransformGroup class is: it represensts a composite transform composed of other transform objects.

In the <Run> section I've set FontFamily to PortableUserInterface, FontSize to 48, FontStretch to Normal, FontWeight to Normal and Text to AnimatedText, and set the Foreground to LinearGradientBrush. Run represents a discrete section of formatted or unformatted text. Run is used to parse the inner text to become the value of the text property in the Silverlight object model. For example,the inner text of a TextBlock object XAML is processed as a Run object with a text value.

Under the <UserControl.Resources> section I have my Storyboard named storyboard1 which includes all the animated tricks for this program. Let's dig deeper into this Storyboard. I've set the Storyboard's RepeatBehavior property to Forever to animate my Text continuously.

Under the <DoubleAnimationUsingKeyFrames> section I've set the TargetName property to the TextBlock which contains the Text. UIElement is a base class for elements in Silverlight. UIElement provides a starting point for element layout characteristics. I've set the TargetProperty of Storyboard to UIElement.RenderTransform which gets or sets transform information that affect the rendering position of the object for some transforming stuff. By using TransformGroup it is possible to apply multiple transforms by defining child object elements of the TransformGroup. TransformGroup is actually a container that enables specifying multiple transforms for a RenderTransform as children elements in XAML. The markup for the TargetProperty may seem a little complicated at first. Once you understand that it's referencing the TextBlock's TransformGroup further down in the XAML things should be a little clearer. If you look at the <TextBlock> section of the XAML, you’ll see this:

Which defines 4 children for the TransformGroup: ScaleTransform, SkewTransform, RotateTransform and TranslateTransform objects as an array. So you can think of it as:

So (TransformGroup.Childeren)[1] is a skew transform and we're targeting the AngleX property of SkewTranform in this section of Storyboard. Thus the TargetProperty assigned in the first section of the Storyboard’s XAML is:

(Thanks to Thierry Bouquain for helping me make sense of this the first time I saw it)

Next, BeginTime is set to 00:00:00. In the first <SplineDoubleKeyFrame> section, KeyTime has been set to 00:00:00 and value to -12. In the second, KeyTime to 00:00:00.5000000 and Value to -31.405. SplineDoubleKeyFrame animates from the Double value of the previous key frame to its own value by using spline interpolation.

It creates the variable transitions of values which are determined by the KeySpline property. Each key frame has a target Value and a KeyTime. The KeyTime specifies the time at which the key frame's value should be reached. The animation progresses from the target value of the previous key frame to the target value of the current key frame. The animation starts when the previous key frame ends, and the animation ends when the key time of the current key frame is reached. The next part of the storyboard targets again the TextBlock and sets the UIElement.RenderTransform property to the TranslateTransform object's X coordinate.

The TranslateTransform class translates an object into the Cartesian coordinate system. After this transformation, ScaleTransform's Scale X value has been targeted in the storyboards TargetProperty section. The two last sections deal with the ColorAnimationUsingKeyFrames class to play with the colors of TextBlock's foreground. ColorAnimationUsingKeyFrames animates the value of a color property along a set of KeyFrames. Note that key frame animation's target values are defined by its KeyFrames property, which contains a collection of ColorKeyFrame objects. Each ColorKeyFrame defines a segment of the animation with its own target Value and KeyTime. When the animation runs, it progresses from one key value to the next at the specified key times.

Silverlight 2.0 beta contains three types of ColorKeyFrame classes. The ColorKeyFrame class is an abstract class that represents Color value type key frames for three different techniques of key frame animation: DiscreteColorKeyFrame, LinearColorKeyFrame, SplineColorKeyFrame. In a scenario where you want to animate the color with key frames, you can use ColorAnimationUsingKeyFrames class and populate its KeyFrames property with one or more DiscreteColorKeyFrame, LinearColorKeyFrame, or SplineColorKeyFrame elements that define the key frames. Here's a little description of these:

• DiscreteColorKeyFrame class: Animates from the Color value of the previous key frame to its own Value using discrete values.
• LinearColorKeyFrame class: Animates from the Color value of the previous key frame to its own Value using linear interpolation.
• SplineColorKeyFrame class: Animates from the Color value of the previous key frame to its own Value using spline interpolation.

If you're a bit confused about DoubleAnimationUsingKeyFrames, it animates the value of Double along a set of KeyFrames. If you're also confused about what the KeyFrame does, it gets or sets a collection of DoubleKeyFrame objects that define the animation. DoubleKeyFrame provides a base class for specific animation segments with its own target value and interpolation method for a DoubleAnimationUsingKeyFrames object.

If it's still confusing to you and you are bored, hand this over to Microsoft Expression Blend to do all the Transforming tricks for this type of animation. This is the last possible way to make this enjoyable for you and to be honest I would like to mention that I always use Blend in this type of scenario.

Finally, add and event handler code to handle the MouseLeftButtonDown event in the code behind or Page.xaml.cs like this:

Run the application and click over the TextBlock to see the animated text effect. The resulting output of this application is shown in the following figure.

Figure 10: Resulting output of the application

Summary

In the third part of this series, we examined some more ways of creating animations in Silverlight using the Storyboard control. We saw how to apply transformations and how to configure animations using Microsoft Expression Blend. In the next part, we will take a look at video animations in Silverlight.

About Faisal Khan

Currently working at Vectorform as a Silverlight developer. His passions revolve around creating the next generation desktop application and Rich Internet applications. His goals are to create applications which will serve the user in a friendly and traditional way, but will keep pace with next ge... This author has published 11 articles on DotNetSlackers. View other articles or the complete profile here.

---

Discussion

Subject	Author	Date
Great Tutorial - doesn't work though...	surrealSnail	6/17/2008 10:17 AM
I really like the style of tutorial, Faisal, and if you do some more, please keep them in a similar format - I find them thorough and neither MS horn-blowing nor corner-cutting. However, although the XAML centric example you gave was a really good one, it's not working for me at runtime (compiles fine, but gives an error on clicking the text). Is this a 2 Beta2 issue? Will you be updating your code to be 2 Beta2 in the near future? I for one, and many others, I'm sure, would be so grateful. I am getting incredibly frustrated by the number of tutorials that say they are Silverlight 2, and then when I try them, they don't work, because they're Beta1 and I upgraded to Beta2 (now I wish I hadn't). Anyway, as mentioned, I am most curious to know if I may have a 2 Beta2 issue. What gives? Reply | Permanent link
RE: Great Tutorial - doesn't work though...	Faisal Khan	8/23/2008 3:36 PM
Hi, Sorry for my late reply. Would you please tell what type of error message you see when you click the text? I'll update my code to Beta2 soon. Reply | Permanent link

---

Please login to rate or to leave a comment.