Silverlight Tutorial

Animating Silverlight

The Importance of an Impressive User Interface

Microsoft and other companies have invested millions of dollars in software research and development. The primary factors that affect and influence end users are performance and the user interface. The compilation of factors that influence the end user are referred to as the "user experience" (UX). Software developers are on a continual quest to improve application performance, however new rules and guidelines have recently been introduced that define higher standards for the creation of user interfaces. The new guidelines were primarily released by Microsoft and coincide with the release of Windows Vista, WPF, and, in turn, Silverlight.

Basically, the more impressed a user is with the overall user experience that an application provides, the more impressed they will be with the application and the more likely they will be to refer the application to others. This module, obviously, focuses on how to create user interfaces by using Silverlight. (see footnote)

Drawing Graphics

Silverlight is a subset of WPF as applied by using principles of an extended ASP.NET AJAX. As such, Silverlight implements many of the features included in WPF. For instance, Silverlight provides the ability to draw two-dimensional (2D) graphics in applications. Graphics of this caliber are more than adequate for most user interfaces and applications, particularly business applications. However, there are applications which require more elaborate graphic capabilities, three-dimensional graphics (3D). For example, an engineering application may benefit tremendously from 3D graphics in the user interface. Whilst WPF provides 3D graphics, Silverlight, currently, does not.

In order to provide 3D graphics, an application must utilize the hardware of the local workstation and the facilities of the local operating system. Silverlight is designed to be cross-platform and cross-browser compliant. With that in mind, it cannot be tied to any particular hardware configuration, operating system, or browser. This design coincides very well with the design goals of Silverlight but does not lend itself to rendering 3D graphics.

Silverlight, currently, does not support 3D graphics but may do so in a future version.

Graphic Elements

Drawing in Silverlight is accomplished through the use of graphic elements such as an ellipse or a rectangle. All graphic elements in Silverlight extend the Shape type. As a result, all Shape type objects in Silverlight include some common functionality as listed below:

• Stroke: the stroke defines the outline of the shape
• StrokeThickness: the stroke thickness defines the thickness of the outline of the shape
• Fill: the fill defines how the interior of the shape is filled or painted

Lines

To draw lines in Silverlight, use the Line object. A line can easily be drawn on a canvas by using Blend and can be created directly in XAML by using Visual Studio 2008. A line is defined through the definition of two points. Each point is comprised of a combination of an X coordinate and a Y coordinate.

The markup snippet shown below is used to render a red, diagonal line from 10, 10 to 100, 100.

<Line
 X1="10" Y1="10"
 X2="100" Y2="100"
 Stroke="#FFC53737"
 StrokeThickness="2"
 RenderTransformOrigin="0.595,0.416"
 Width="158"
 Height="125"
 Fill="#FFD63737" />

The canvas that results from the markup snippet above is shown in the following figure.

Ellipses

An Ellipse object is used to draw round objects in Silverlight. The circular characteristics of an ellipse are defined by specifying the height and width of the ellipse. The markup snippet shown below renders an oval ellipse with a blue gradient fill and a stroke of 3.

<Ellipse Width="226" Height="124" Stroke="#FF000000"
 StrokeThickness="3" Canvas.Left="8" Canvas.Top="8">
  <Ellipse.Fill>
   <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
    <GradientStop Color="#FFD9EAF0" Offset="0"/>
    <GradientStop Color="#FF126D8E" Offset="1"/>
   </LinearGradientBrush>
  </Ellipse.Fill>
 </Ellipse>

Sometimes, when using a graphical design tool, such as Blend, it may be tough to create an exact circle. To create a circle with a Silverlight ellipse, ensure that the height and width values are the same. To create a circle in Blend, when sizing the ellipse, hold down the Shift key. The markup snippet below renders a circle with a diameter of 100px, a stroke of 3, a green fill, and a yellow stroke.

<Ellipse Width="100" Height="100" Stroke="#FFEAEC19" StrokeThickness="3" Canvas.Left="262" Canvas.Top="113">
 <Ellipse.Fill>
  <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
   <GradientStop Color="#FFD9EAF0" Offset="0"/>
   <GradientStop Color="#FF247016" Offset="1"/>
  </LinearGradientBrush>
 </Ellipse.Fill>
</Ellipse>

The result of the two ellipse definitions above is shown in the figure below.

Rectangles

The Rectangle class is used to draw rectangles in Silverlight. The markup snippet below illustrates drawing two rectangles, a larger, blue rectangle in the background and a smaller, orange rectangle on top.

<Rectangle Width="240" Height="120" Stroke="#FF000000" Canvas.Left="40" Canvas.Top="40">
 <Rectangle.Fill>
  <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
   <GradientStop Color="#FF000000" Offset="0"/>
   <GradientStop Color="#FF6867D2" Offset="1"/>
  </LinearGradientBrush>
 </Rectangle.Fill>
</Rectangle>
  
<Rectangle Width="72" Height="72" Stroke="#FFF28C12" Canvas.Left="200" Canvas.Top="80">
 <Rectangle.Fill>
  <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
   <GradientStop Color="#FFF28C12" Offset="0"/>
   <GradientStop Color="#FFFFFFFF" Offset="1"/>
  </LinearGradientBrush>
 </Rectangle.Fill>
</Rectangle>

Just as with an ellipse, when sizing a rectangle by using Blend, if you want to draw a square or maintain the current aspect ratio of the rectangle, hold down the shift key. The result of the markup above is shown in the figure below.

Paths and Geometries

The Path object also derives from the Shape object, however, the Path object has no defined shape. Instead, a Path accepts an indirect or abstract definition of a shape to define how the Path is rendered. The Geometry class is used to define how a Shape is rendered. There is only one Path class but many types of Geometry classes. The Geometry class itself is an abstract class that cannot be directly instantiated but one of its child classes must be instantiated.

The Path class can be used to define simple shapes such as lines, ellipses, and rectangles in the same manner as the Line, Ellipse, and Rectangle classes, however the PathGeometry class is used to create more complex shapes. Creating paths can be rather tricky by hand coding the path coordinates directly in XAML. When using a design tool, such as Blend, paths are created as a combination of simpler elements or freehand by using a pen / pencil tool. The markup snippet below shows several path elements that were rendered in Blend when a sketchy little stick man was quickly drawn with the pencil tool.

<Path Width="36.943"
 Height="40"
 Fill="#FFFFFFFF"
 Stretch="Fill"
 Stroke="#FF000000"
 Canvas.Left="80"
 Canvas.Top="24"
 Data="M98,41 C94.367387,42.623083 91.686629,43.473339 88,44 88,44.666667 88,45.333333 88,46 87,46 86,46 85,46 85,46.666667 85,47.333333 85,48 84,48 83,48 82,48 82,62.686511 69.161892,80 102,80 113.81515,80 126.94836,63.615905 98,41 z"/>
<Path Width="30"
 Height="76"
 Fill="#FFFFFFFF"
 Stretch="Fill"
 Stroke="#FF000000"
 Canvas.Left="76.472"
 Canvas.Top="61"
 Data="M99,78 C99.621745,91.056649 101.88843,103.66122 103,117 103.49483,122.93794 105,127.98987 105,134 105,144.96507 85,133.97906 85,148 80.579426,148 79.654844,149.9753 76,153"/>
<Path Width="19"
 Height="14"
 Fill="#FFFFFFFF"
 Stretch="Fill"
 Stroke="#FF000000"
 Canvas.Left="102.472"
 Canvas.Top="123"
 Data="M102,140 C109.69438,144.23843 113.25082,146.41746 120,153"/>
<Path Width="43"
 Height="4"
 Fill="#FFFFFFFF"
 Stretch="Fill"
 Stroke="#FF000000"
 Canvas.Left="77.472"
 Canvas.Top="87"
 Data="M77,104 C91.163884,104.69658 105.26923,106.05954 119,107"/>

The result of the markup shown above is shown in the following figure.

There are several types of geometries that can be utilized with a path including a LineGeometry, a RectangleGeometry, an EllipseGeometry, and a PathGeometry. The PathGeometry can compile complex shapes from multiple path segments. Path segments include arcs, béziers, lines, and variations of each. (see footnote)

The PathGeometry is used above in shorthand form. The Path object includes a Data attribute that accepts multiple coordinates to define points along the path. Upon closer look, you will notice that the Data attribute value also contains characters such as "M" or "C". The Data attribute value is actually a mini markup language and the characters are very meaningful as well as case-sensitive. For instance, an uppercase "M" signifies a move command and the coordinates that follow indicate the movement of the path. (see footnote)

Brushes

Brushes are used to paint spaces contained by a stroke, or border or the stroke itself. For instance, a brush can be used to paint the interior space of a rectangle. In fact, in the rectangles example above, a gradient brush is used to paint the interior of the rectangle as shown in the markup snippet below.

<Rectangle Width="72" Height="72" Stroke="#FFF28C12" Canvas.Left="200" Canvas.Top="80">
 <Rectangle.Fill>
  <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
   <GradientStop Color="#FFF28C12" Offset="0"/>
   <GradientStop Color="#FFFFFFFF" Offset="1"/>
  </LinearGradientBrush>
 </Rectangle.Fill>
</Rectangle>

Brushes can be used to paint solid colors, gradients, images, and even video. The ability to paint with images is fairly common among graphic design tools, however the ability to paint with video is only available in a very few elite graphic tools. Expression Blend currently supports image and video brushes but only for WPF and not for Silverlight applications.

However, it's fairly easy to create an image brush fill as shown in the markup snippet below.

<Ellipse Width="184" Height="184" Stroke="#FFD89623" StrokeThickness="3" Canvas.Left="8" Canvas.Top="8">
 <Ellipse.Fill>
  <ImageBrush ImageSource="gingerbread.jpg" />
 </Ellipse.Fill>
</Ellipse>

The result of the markup snippet above is shown in the following figure.

To paint by using video, a little more work is required. First, a VideoBrush does not directly play video but utilizes video from another source such as a MediaElement object. The MediaElement object is discussed again in the section below. In the example below, video is being played as the fore ground of text. The TextBlock.ForeGround utilizes a VideoBrush that, in turn, utilizes video from a MediaElement object. (see footnote)

<MediaElement Source="SteveBreastonCardinalsPuntReturn.wmv" Opacity="0" x:Name="CardVideo" />
<TextBlock Width="360" Height="96" Canvas.Left="64" Canvas.Top="32" TextWrapping="Wrap">
 <TextBlock.Foreground>
  <VideoBrush SourceName="CardVideo" />
 </TextBlock.Foreground>
 <Run FontFamily="Segoe UI" FontSize="60" Text="Webucator"/>
</TextBlock>

The result of the markup above is shown in the figure below with video playing as text. (see footnote)

Transformations

Transformation objects are used to transform other Shape objects. There are various types of transformations including rotations, scales, skews, and translations. A scale is a resize. A skew transformation skews the shape of the Shape. A translate moves a shape. (see footnote)

The markup snippet below illustrates applying a 45 degree rotation to a TextBlock.

<TextBlock RenderTransformOrigin="0.5,0.5" Width="320" Height="80" Canvas.Left="80" Canvas.Top="104" TextWrapping="Wrap">
 <TextBlock.RenderTransform>
  <TransformGroup>
   <ScaleTransform ScaleX="1" ScaleY="1"/>
   <SkewTransform AngleX="0" AngleY="0"/>
   <RotateTransform Angle="45"/>
   <TranslateTransform X="0" Y="0"/>
  </TransformGroup>
 </TextBlock.RenderTransform>
 <Run FontFamily="Segoe UI" FontSize="48" Text="Webucator"/>
</TextBlock>

The result of the markup above is shown in the following figure.

Animation

All elements in Silverlight XAML represent objects in the .NET Framework and Silverlight. Objects have properties with values that can be modified. An animation in software occurs through the progressive modification of a property value over a period of time. For example, the angle property of a rotation transformation can be progressively modified over a period of seconds to cause text affected by the transformation to spin.

There are two categories of animations: from / to / by animations and key-frame animations. In a from / to / by animation, the time period over which the animation occurs is typically handled by the duration property, whereas the starting value of the property and the ending value of the property are specified using the from and to properties. Key-frame animations are more complex to implement but offer more powerful animation capabilities. This module focuses on from / to / by animations.

The various types of animations are implemented in Silverlight through animation objects. All animation objects derive from the Timeline object. Only properties with values of type double, Color, or Point can be animated. As such, the derived animation object types are DoubleAnimation, ColorAnimation, and PointAnimation. A DoubleAnimation object is used to animate an object property value of double type. In turn, a ColorAnimation object is used to animate an object property value of type Color and a PointAnimation object is used to animate an object property value of type Point.

The markup snippet below increases the font size of the text in the tbWebucator text block from 10.0 to 44.0 over a period of 5 seconds.

<TextBlock FontFamily="Segoe UI" FontSize="44" Width="240" Height="80" Canvas.Left="80" Canvas.Top="80" Text="Webucator" x:Name="tbWebucator">
 <TextBlock.Triggers>
  <EventTrigger RoutedEvent="TextBlock.Loaded">
   <BeginStoryboard>
    <Storyboard>
     <DoubleAnimation
      Storyboard.TargetName="tbWebucator"
      Storyboard.TargetProperty="FontSize"
      From="10.0" To="44.0" Duration="0:0:5" />
    </Storyboard>
   </BeginStoryboard>
  </EventTrigger>
 </TextBlock.Triggers>
</TextBlock>

As illustrated in the markup above, a DoubleAnimation must be contained inside of a <StoryBoard> element. A <StoryBoard> may contain more than one animation. A <StoryBoard> must be associated with an event action. In the markup above, the <StoryBoard> is associated with a <BeginStoryBoard> event action. An event action must be initiated by an <EventTrigger>. The containing <EventTrigger> in the markup above fires on the Loaded event of the TextBlock. Each element may contain multiple triggers and all triggers associated with an element must be contained inside of the triggers collection for the element.

The markup above is configured to start automatically upon the text block loading. Animations may also be controlled programmatically. To control an animation programmatically, ensure that the animation element has a name assigned to it and then call the method associated with the desired action. For instance, to start an animation, call the Begin method.

The behavior of an animation may be further controlled by using additional attributes. For instance, the animation in the markup above will play a single time. If an animation should continue to play multiple times, the RepeatBehavior may be set to the number of iterations desired. If the animation should continue to play indefinitely, the RepeatBehavior should be set to "Forever".

An animation may also be configured to animate in reverse once it completes by setting the AutoReverse property to "True". (see footnote)

As a more complex example, the markup listing below is used to create an animation that includes a bouncing ball with a background that changes color.

<UserControl x:Class="BouncingBall.Page"
    xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300" Loaded="UserControl_Loaded">
 <UserControl.Resources>
  <Storyboard x:Name="sbBouncingBall">
   <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" BeginTime="00:00:00">
    <SplineDoubleKeyFrame KeyTime="00:00:04" Value="141"/>
    <SplineDoubleKeyFrame KeyTime="00:00:05.6000000" Value="188"/>
    <SplineDoubleKeyFrame KeyTime="00:00:07" Value="243"/>
    <SplineDoubleKeyFrame KeyTime="00:00:08" Value="293"/>
    <SplineDoubleKeyFrame KeyTime="00:00:08.8000000" Value="348"/>
    <SplineDoubleKeyFrame KeyTime="00:00:09.5000000" Value="432"/>
   </DoubleAnimationUsingKeyFrames>
   <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" BeginTime="00:00:00">
    <SplineDoubleKeyFrame KeyTime="00:00:04" Value="221"/>
    <SplineDoubleKeyFrame KeyTime="00:00:05.6000000" Value="171"/>
    <SplineDoubleKeyFrame KeyTime="00:00:07" Value="227"/>
    <SplineDoubleKeyFrame KeyTime="00:00:08" Value="213"/>
    <SplineDoubleKeyFrame KeyTime="00:00:08.8000000" Value="242"/>
    <SplineDoubleKeyFrame KeyTime="00:00:09.5000000" Value="262"/>
   </DoubleAnimationUsingKeyFrames>
   <ColorAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" BeginTime="00:00:00">
    <SplineColorKeyFrame KeyTime="00:00:09.5000000" Value="#FF77398E"/>
   </ColorAnimationUsingKeyFrames>
   <ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" BeginTime="00:00:00">
    <SplineColorKeyFrame KeyTime="00:00:08.8000000" Value="#FF27DE3C"/>
    <SplineColorKeyFrame KeyTime="00:00:09.5000000" Value="#0027DE3C"/>
   </ColorAnimationUsingKeyFrames>
   <ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" BeginTime="00:00:00">
    <SplineColorKeyFrame KeyTime="00:00:08.8000000" Value="#FFECAE28"/>
    <SplineColorKeyFrame KeyTime="00:00:09.5000000" Value="#00ECAE28"/>
   </ColorAnimationUsingKeyFrames>
  </Storyboard>
 </UserControl.Resources>
 <UserControl.OpacityMask>
  <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
   <GradientStop Color="#FF000000"/>
   <GradientStop Color="#FFFFFFFF" Offset="1"/>
  </LinearGradientBrush>
 </UserControl.OpacityMask>
 <Canvas x:Name="LayoutRoot">
  <Canvas.Background>
   <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
    <GradientStop Color="#FF000000" Offset="0"/>
    <GradientStop Color="#FFFFFFFF" Offset="1"/>
   </LinearGradientBrush>
  </Canvas.Background>

  <Ellipse RenderTransformOrigin="0.5,0.5" x:Name="ellipse" Width="64" Height="64" Fill="#FF27DE3C" Stroke="#FFECAE28" StrokeThickness="2" Canvas.Left="8" Canvas.Top="8">
   <Ellipse.RenderTransform>
    <TransformGroup>
     <ScaleTransform ScaleX="1" ScaleY="1"/>
     <SkewTransform AngleX="0" AngleY="0"/>
     <RotateTransform Angle="0"/>
     <TranslateTransform X="0" Y="0"/>
    </TransformGroup>
   </Ellipse.RenderTransform>
  </Ellipse>
</Canvas>
</UserControl>

The result of the markup above is shown in the following figure.

Deep Zoom

Deep Zoom is a new imaging technology released by Microsoft in March 2008. Deep Zoom is based on Silverlight 2 and allows quickly viewing of incredibly detailed and large images over the Web. DeepZoom functions in a manner very similar to online mapping applications by only sending the image data for the portion of the image actually being viewed to the client. Deep Zoom is a great concept based on the same concept as a Web search engine. A search conducted by a client may return a million hits. It would take considerable time to return a million hits to the client's machine so that they could scroll through them. However, a search engine returns the results in pages, generally 10 at a time. Returning 10 hits to the user's machine takes very little time. It is proven that if a user doesn't find a match for a search in the first page of hits, they will modify their search and move on. Hence, search engines only return a portion of the hits being viewed by the client and optimizing search engine performance.

Likewise, Deep Zoom can offer the display of incredibly detailed and large images over the Web with great performance by only sending the data for the portion of the image being viewed to the user's machine.

In order to use Deep Zoom, the Deep Zoom Composer should be downloaded. The Deep Zoom Composer is a free download that is used to prepare large images and collections of images for viewing in Deep Zoom mode. The Deep Zoom Composer is shown in the figure below.

MultiscaleImage Control

To use the Deep Zoom Composer, create a new project, add image files, arrange the files, and then export the project. Depending upon the size and complexity of the image being prepared, the DeepZoom Composer may take several minutes to export it. Once exported,the Silverlight MultiscaleImage control is used to display the DeepZoom image. The MultiscaleImage control includes several properties and events that can be utilized to control viewing of a Deep Zoom image in incredible ways.

The Deep Zoom example shown in the figure below allows dynamic viewing of the Silverlight 2 developer reference diagram.

Lab: Animating Silverlight

In this lab, you will paint a shape with a video brush and create an animated quote ticker.

All material in this Animating Silverlight is copyright 2010 Webucator. The purpose of this website is to help you learn Silverlight on your own and use of the website implies your agreement to our Silverlight Tutorial Terms of Service.