Graphics and Animations

XAML provides extensive support for drawing shapes , transforming the state of an object, and animating nearly any property of an object. You use Shape elements for drawing, Transform elements to altering a property or an object, and Animation elements to change a property of an object over time.

Shapes

XAML provides a set of Shape elements for drawing, which include Ellipse , Line , Rectangle , Path , Polygon , and Polyline . A Shape has a Fill , which is the background color , and a Stroke , which is the outline color. Fill and Stroke default to transparent, so make sure you set at least one of them! The StrokeWidth property controls the thickness of the outline.

Shapes can t have child elements. You typically place shapes inside a Canvas , so the first shape in markup will be the first one drawn. This example illustrates some of the basic shapes, which you can also see in Figure 3-13:

 <Border 
 xmlns="http://schemas.microsoft.com/2003/xaml" 
 xmlns:def="Definition" 
 Background="BlanchedAlmond" 
 > 
 <Canvas Height="400" Width="400"> 
 <Ellipse CenterX="70" CenterY="75" 
 RadiusX="30" RadiusY="50" 
 Fill="yellow" Stroke="red" StrokeThickness="15"/> 
 
 <Rectangle RectangleLeft="150" RectangleTop="20" 
 RectangleHeight="100" RectangleWidth="40" 
 Fill="lightBlue" Stroke="green"/> 
 
 <Line X1="20" Y1="220" X2="150" Y2="240" 
 Stroke="black" StrokeThickness="5"/> 
 
 <Polygon Points="220,140 270,240 170,240" 
 StrokeLineJoin="Round" 
 Stroke="black" StrokeThickness="20"/> 
 </Canvas> 
 </Border> 

Figure 3-13: Various shapes on a Canvas

So far, we ve used only solid colors with the Stroke and Fill properties. But in XAML, almost anywhere you can use a color you can specify a Brush . SolidColorBrush is the kind of brush we ve been using so far, but XAML also supports ImageBrush , LinearGradientBrush , and RadialGradientBrush . ImageBrush has an ImageSource property that specifies the name of the image file. SolidColorBrush has a Color property. LinearGradientBrush and RadialGradientBrush contain a GradientStopCollection , which allows for very complicated gradients. This example defines four brushes as resources, and uses them as the Stroke and Fill of the ellipses. You can see what they look like in Figure 3-14.

 <Border 
 xmlns="http://schemas.microsoft.com/2003/xaml" 
 xmlns:def="Definition" 
 Background="BlanchedAlmond" 
 > 
 <Border.Resources> 
 <LinearGradientBrush def:Name="lineargradient" StartPoint="0,0" 
 EndPoint="1,1"  > 
 <LinearGradientBrush.GradientStops> 
 <GradientStopCollection> 
 <GradientStop Color="Blue" Offset="0"/> 
 <GradientStop Color="white" Offset="1"/> 
 </GradientStopCollection> 
 </LinearGradientBrush.GradientStops> 
 </LinearGradientBrush> 
 
 <RadialGradientBrush def:Name="radialgradient" Focus="0.3,0.3"> 
 <RadialGradientBrush.GradientStops> 
 <GradientStopCollection> 
 <GradientStop Color="red" Offset="0"/> 
 <GradientStop Color="yellow" Offset="1"/> 
 </GradientStopCollection> 
 </RadialGradientBrush.GradientStops> 
 </RadialGradientBrush> 
 
 <ImageBrush def:Name="image" ImageSource="Tulip.jpg" TileMode="Tile"/> 
 
 <SolidColorBrush def:Name="solid" Color="gray"/> 
 </Border.Resources> 
 
 <Canvas Height="400" Width="400"> 
 <Ellipse CenterX="100" CenterY="75" 
 RadiusX="90" RadiusY="50" 
 Fill="{lineargradient}" Stroke="{image}" StrokeThickness="15"/> 
 
 <Ellipse CenterX="300" CenterY="170" 
 RadiusX="50" RadiusY="150" 
 Fill="{radialgradient}" Stroke="{solid}" StrokeThickness="15"/> 
 </Canvas> 
 </Border> 

Figure 3-14: Gradients at work

Transforms

XAML supports several kinds of Transforms . RotateTransform rotates by the amount of the Angle property. TranslateTransform moves things according to the X and Y properties. ScaleTransform will shrink or stretch according to the ScaleX and ScaleY properties. SkewTransform slants things, using the AngleX , AngleY , and Center properties. MatrixTransform supports arbitrary affine transformations. Finally, TransformCollection is itself a Transform that allows you to combine several transforms together.

Some classes, such as Brush , have a Transform property. For other cases, you can use the TransformDecorator element, which has a Transform property. TransformDecorator will transform its child element. (Like Border , it can have only one child.) TransformDecorator can contain any kind of child, including shapes, panels, and controls. This example uses to TransformDecorators . The first contains an Ellipse , and rotates it 45 degrees. The second TransformDecorator contains a ListBox and both rotates and scales the ListBox . You can see what the shapes look like in Figure 3-15.

 <Border 
 xmlns="http://schemas.microsoft.com/2003/xaml" 
 xmlns:def="Definition" 
 Background="BlanchedAlmond" 
 > 
 <Canvas Height="400" Width="400"> 
 <TransformDecorator Transform="rotate 45"> 
 <Ellipse CenterX="100" CenterY="75" 
 RadiusX="90" RadiusY="50" 
 Fill="white" Stroke="black" StrokeThickness="15"/> 
 </TransformDecorator> 
 
 <TransformDecorator Canvas.Top="200" Canvas.Left="100"> 
 <TransformDecorator.Transform> 
 <TransformCollection> 
 <RotateTransform Angle="135"/> 
 <ScaleTransform ScaleX="2" ScaleY="4"/> 
 </TransformCollection> 
 </TransformDecorator.Transform> 
 
 <ListBox > 
 <ListItem> ListItem 1 </ListItem> 
 <ListItem> ListItem 2 </ListItem> 
 <ListItem> ListItem 3 </ListItem> 
 </ListBox> 
 </TransformDecorator> 
 </Canvas> 
 </Border> 

Figure 3-15: A skewed ListBox and Ellipse

Animations

XAML also supports animations. You can animate nearly every property. Some properties have a corresponding Animations property ”for example, RotateTransform.Angle and RotateTransform.AngleAnimations . In other cases, you can assign an animation collection to a property using compound property syntax. For example, see the following code:

 <Button> 
 <Button.Width> 
 put animation collection here 
 </Button.Width> 
 </Button> 

Every type of property has a separate animations collection. The type of Button.Width is Length , so one uses the LengthAnimationCollection . Similarly, the animation objects themselves are specific to the type of the property you animate ”the LengthAnimationCollection contains a set of LengthAnimation objects.

Animation objects have a From and To property, whose types match the type of the property being animated. The animation object also has Begin , Duration , and End properties, which are measured in seconds and control the timing of the animation. Begin also supports the value Immediate , and Duration supports Indefinite . You can use the RepeatCount and RepeatDuration properties to repeat the animation automatically. The Fill property specifies what happens to the property after the animation is over. Fill= Hold is one of the most important values; it keeps the property at the animation End value.

Animation classes are not part of the default XAML namespace, so you will need to use the < ?Mapping > and xmlns constructs to load the MSAvalon.Windows.Media.Animation namespace. Because this namespace contains classes from multiple DLLs, you ll need a separate < ?Mapping > and xmlns for each DLL.

The next example animates two properties, the RotateTransform.Angle property and the Button.Width property, which use classes from both animation namespaces. Figure 3-16 shows the button at different times.

 <?Mapping XmlNamespace="animC" ClrNamespace="MSAvalon.Windows.Media.Animation" 
 Assembly="PresentationCore" ?> 
 <?Mapping XmlNamespace="animF" ClrNamespace="MSAvalon.Windows.Media.Animation" 
 Assembly="PresentationFramework" ?> 
 <Border 
 xmlns="http://schemas.microsoft.com/2003/xaml" 
 xmlns:animC="animC" 
 xmlns:animF="animF" 
 xmlns:def="Definition" 
 Background="BlanchedAlmond" 
 > 
 <Canvas Height="400" Width="400"> 
 <TransformDecorator Canvas.Top="200" Canvas.Left="100"> 
 <TransformDecorator.Transform> 
 <TransformCollection> 
 <RotateTransform Angle="135"> 
 <RotateTransform.AngleAnimations> 
 <animC:DoubleAnimationCollection> 
 <animC:DoubleAnimation From="0" To="360" Duration="4" 
 AutoReverse="True" 
 RepeatDuration="Indefinite"/> 
 </animC:DoubleAnimationCollection> 
 
 </RotateTransform.AngleAnimations> 
 
 </RotateTransform> 
 </TransformCollection> 
 </TransformDecorator.Transform> 
 
 <ListBox > 
 <ListItem> ListItem 1 </ListItem> 
 <ListItem> ListItem 2 </ListItem> 
 <ListItem> ListItem 3 </ListItem> 
 </ListBox> 
 </TransformDecorator> 
 
 <Button Width="40" Canvas.Top="10" Canvas.Left="10"> 
 <Button.Width> 
 <animF:LengthAnimationCollection> 
 <animF:LengthAnimation From="40" To="300" 
 AutoReverse="true" Begin="1" Duration="1.2" 
 RepeatDuration="Indefinite"/> 
 </animF:LengthAnimationCollection> 
 </Button.Width> 
 Button 
 </Button> 
 
 </Canvas> 
 </Border> 

Figure 3-16: Views of the animated button at different times