Animated Banners in XAML

Prior to XAML, I was using Adobe Fireworks to create my images and banners or asking my designer to create animated banners but more and more I delve into XAML, more I like it. Now, I can actually control my animations from my code. Being a programmer by nature, I would rather control my images and contents from my code rather than being dependent on a designer or hard code it at design-time.

Currently, I am building a website in XAML (Silverlight) and trying to put prototype samples together to see what can be done in Silverlight and what obstacles will I face in building samples that can easily be done in ASP.NET 2.0. One piece of this was to create an animated banner that shows some ads and give text animations such as changing colors, rotation, and size.

In a graphics designer, you create layers and frames and give them a time interval to load a different layer to create an animated graphics. Fortunately, this functionality is built-in in WPF and XAML. Now, I don't have to create different layers or frames. I can simply create a text and apply animation or transformation on the text and WPF will take care for me.

I have a banner looks like Figure 1.

Figure 1. Initial banner

As you can see from Figure 1, I have four text blocks loaded in the banner and two of them are with a gradient background. I would apply four different animations on these four text blocks. I would change the gradient background of first text block, change the foreground color of second text block, change the width of third text block, and rotate the fourth text block. The running banner will look like Figure 2 and repeat this behavior indefinitely.

Figure 2. Animated text banner

The magic begins within the Storyboard tag of XAML. Within the Storyboard tag, we can use animations such as double animation, color animation, point animation, or transformation.

<TextBlock.Triggers>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</TextBlock.Triggers>

The DoubleAnimation tag is used to apply transparency on controls. The following code shows the syntax of the DoubleAnimation. The TargetName is the name of the control such as a TextBlock. The From and To attributes is the range for transparency range between 1.0 and 0.0 where 1.0 is fully opaque and 0.0 is fully transparent. The RepeatBehavior is Forever means the animation will repeat forever.

<DoubleAnimation

Storyboard.TargetName="TB" Storyboard.TargetProperty="Opacity"

From="1.0" To="0.0" Duration="0:0:5"

AutoReverse="True" RepeatBehavior="Forever" />

The following code shows how to user color animation using the ColorAnimation tag, which takes TargetName as name of the brush and TargetProperty as Color. The From and To attributes are starting and end colors.

<ColorAnimation

Storyboard.TargetName="SB"

Storyboard.TargetProperty="Color"

From="Pink" To="SteelBlue" Duration="0:0:5"

AutoReverse="True" RepeatBehavior="Forever" />

The following code usage double animation to set the transformation angle of the text box to rotate a text block.

<DoubleAnimation

Storyboard.TargetName="MyRT"

Storyboard.TargetProperty="(RotateTransform.Angle)"

From="0.0" To="360" Duration="0:0:10"

RepeatBehavior="Forever" />

Download the attached XAML file for more details and complete XAML code.

Here is a listing of complete XAML code:

<Window

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

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

x:Class="AnimatedBanner.Window1"

x:Name="Window"

Title="Window1"

Width="396" Height="492" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" Foreground="#FFF15151" SnapsToDevicePixels="True" >

<Rectangle.Fill>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

</LinearGradientBrush>

</TextBlock.Background>

<TextBlock.Triggers>

<DoubleAnimation

Storyboard.TargetName="TB"

Storyboard.TargetProperty="Opacity"

From="1.0" To="0.0" Duration="0:0:5"

AutoReverse="True" RepeatBehavior="Forever" />

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</TextBlock.Triggers><Run FontFamily="Cambria" FontSize="20" Text="Need help on a .NET Project? "/></TextBlock>

</LinearGradientBrush>

</TextBlock.Background>

<TextBlock.Triggers>

</BeginStoryboard>

</EventTrigger>

</TextBlock.Triggers>

</TextBlock>

<TextBlock

x:Name="TB4"

Margin="75,120,161,0" FontSize="16" FontWeight="Bold" VerticalAlignment="Top"

Height="100" Text="Silverlight, C#, ASP.NET, WPF, WCF" TextWrapping="WrapWithOverflow" TextAlignment="Center">

<TextBlock.Foreground>

</TextBlock.Foreground>

<TextBlock.Triggers>

<!-- Use ColorAnimation with TargetProperty as Color and TargetName as brush being used

to draw the text -->

<ColorAnimation

Storyboard.TargetName="SB"

Storyboard.TargetProperty="Color"

From="Pink" To="SteelBlue" Duration="0:0:5"

AutoReverse="True" RepeatBehavior="Forever" />

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</TextBlock.Triggers>

</TextBlock>

<TextBlock

x:Name="TB5"

Margin="97,0,183,41"

FontSize="18" FontWeight="Bold" Foreground="Green" VerticalAlignment="Bottom" Height="60"><TextBlock.RenderTransform>

</TextBlock.RenderTransform><TextBlock.Triggers>

<!-- Use DoubleAnimation with TargetProperty as RotateTransform.Angle

and TargetName as name of the RotateTransform being used to rotate the text -->

<DoubleAnimation

Storyboard.TargetName="MyRT"

Storyboard.TargetProperty="(RotateTransform.Angle)"

From="0.0" To="360" Duration="0:0:10"

RepeatBehavior="Forever" />

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</TextBlock.Triggers><Run FontSize="20" Text="Contact Us"/></TextBlock>

</Grid>

</Window>

Summary

In this article, I discussed how we can take advantage of XAML controls to animate text and other controls to create an animated banner. The good part of using XAML is, you can also control the same functionality from the code if you do not wish to use design-time XAML.