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>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard>
<Storyboard>
</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" >
<Grid x:Name="LayoutRoot">
<Rectangle Margin="66,42,152,20" Stroke="#FF000000" RadiusX="0" RadiusY="0">
<Rectangle.Fill>
<LinearGradientBrush x:Name="MRGB" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF000000" Offset="0"/>
<GradientStop Color="#FF5E0805" Offset="0.478"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock x:Name="TB" Margin="75,49,161,0" FontFamily="Book Antiqua" FontSize="24" FontWeight="Bold" TextWrapping="Wrap" Foreground="#FFF9F4F4" TextAlignment="Center" Height="56" VerticalAlignment="Top" ><TextBlock.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF000000" Offset="0"/>
<GradientStop Color="#FFD600FF" Offset="1"/>
</LinearGradientBrush>
</TextBlock.Background>
<TextBlock.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard>
<Storyboard>
<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>
<TextBlock x:Name="TB2" Margin="75,225,161,131" FontFamily="Book Antiqua" FontSize="24" FontWeight="Bold" TextWrapping="Wrap" Foreground="#FFF9F4F4" TextAlignment="Center"><TextBlock.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF000000" Offset="0"/>
<GradientStop Color="#FF00FF4D" Offset="1"/>
</LinearGradientBrush>
</TextBlock.Background>
<LineBreak/><Run FontFamily="Cambria" FontSize="20" Foreground="#FF97ECC3" Text="Let our experts help you."/>
<TextBlock.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard>
<Storyboard/>
</BeginStoryboard>
</EventTrigger>
</TextBlock.Triggers>
</TextBlock>
<!-- Color Animation Sample. Changes color from Pink to SteelBlue -->
<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>
<SolidColorBrush x:Name="SB" Color="Pink" />
</TextBlock.Foreground>
<!-- Animates the text block's color. -->
<TextBlock.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard>
<Storyboard>
<!-- 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>
<!-- Text Rotation Sample -->
<TextBlock
x:Name="TB5"
Margin="97,0,183,41"
FontSize="18" FontWeight="Bold" Foreground="Green" VerticalAlignment="Bottom" Height="60"><TextBlock.RenderTransform>
<RotateTransform x:Name="MyRT" Angle="0" CenterX="30" CenterY="25"/>
</TextBlock.RenderTransform><!-- Animates the text block's rotation. --><TextBlock.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard>
<Storyboard>
<!-- 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>
<!-- Author TextBlok -->
</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.