Wahlin on .NET

Silverlight XAML Primer 2: Rectangles, Ellipses, Lines and Text

Create these elements in Silverlight using Canvas.

• By Dan Wahlin
• 12/04/2007

Of course, many Web applications don't need dynamically drawn shapes and can rely on images instead. However, applications that do need to render specific shapes to highlight data or draw attention to a portion of a page are presented with a challenge that can only be addressed by using alternative technologies such as SVG, Flash or Silverlight.

Silverlight renders objects and shapes using XAML (see my previous article here for an introduction to XAML and canvas objects). As a result, it provides an excellent solution for rendering different types of shapes either statically or dynamically. Rectangles, ellipses, lines, polylines and more can be drawn onto a Silverlight canvas by simply adding the appropriate XAML elements and attributes into a canvas.

In this article, I'll explore some of the different shape drawing features of Silverlight and show how they can be defined using XAML. By learning how the various Silverlight XAML shape elements can be used, you can spice up data, show maps, provide enhanced product illustrations and much more.

Working with Shapes
Let's start out by looking at a few basic shapes, such as rectangles and ellipses. These shapes can be drawn by using the Rectangle and Ellipse XAML elements respectively as shown in Listing 1.

Looking through the code, you'll see that rectangle and ellipse shapes are placed at specific positions within their canvas container using the Canvas.Top and Canvas.Left properties. These properties specify how many pixels from the top and left the shape should be positioned relative to the parent container. Both shapes also specify a background color using the Fill property, and shapes can also specify a stroke color and stroke thickness using the Stroke and StrokeThickness properties, respectively (a stroke represents the border around the shape).

Although not shown, shapes can also specify a Z-Index (Canvas.ZIndex property) to control their positioning on the Z-axis relative to other shapes in a canvas. By default, XAML elements at the bottom of a document (reading it from top to bottom) will automatically be placed on top of any other elements defined above.

Lines and polylines can also be drawn using XAML with minimal effort. An example of drawing a simple line is shown below:

<Line X1="36" Y1="115" X2="350" 
 Y2="115" Stroke="Black" 
 StrokeThickness="2"
 Opacity=".4" />

Lines are defined using the Line element and can define X and Y coordinates that specify where the line starts and ends. The example shown above uses the X1, Y1 and X2, Y2 properties to define the line position. It also specifies that the line should be black and have a stroke thickness of 2. Lines and other shapes can also control how opaque they appear as they're rendered in Silverlight. This is done using the Opacity property. A value of 0 means that the shape isn't visible while a value of 1 means it's fully visible. The Line element shown above defines an opacity value of .4 which results in a faded-out appearance.

In cases where many lines need to be drawn, you could use the Line element multiple times within a canvas. However, the Polyline element can minimize the amount of XAML code you have to write. A polyline in XAML represents a series of connected points. The syntax is simple to define and you can use products such as Microsoft's Expression Blend to generate polyline code with minimal effort. Here's an example of using the Polyline element:

<Polyline Canvas.Left="150" 
 Canvas.Top="0" Stroke="Green" 
 StrokeThickness="5" Fill="Red"
 Points="50,25 0,100 100,100 
 48,25" />

The Polyline element allows multiple points to be defined using the Points property. Each point is separated by a space and all points are automatically connected by Silverlight once rendered. A polyline can also have a fill color defined that can be used to add a background color for the connected lines.

While rectangles, ellipses, lines and polylines provide a lot of flexibility for defining a variety of shapes, at some point you'll need to add text to a Silverlight canvas. This can be done using the TextBlock element. You can think of the TextBlock element much like an ASP.NET Label control since it allows fonts, colors and more to be defined to style the text. Here's an example of using the TextBlock element:

<TextBlock Name="tbHello"
 Canvas.Left="36" 
 Canvas.Top="120"
 Foreground="Maroon"  
 FontFamily="Verdana" 
 FontSize="24"
 FontWeight="Bold" 
 Text="Hello From Silverlight!">
</TextBlock>

Listing 2 shows how all of the shapes and text can be put together on a single canvas and Figure 1 shows the resulting output in Silverlight.

In the next article I'll introduce the concept of gradients and image brushes and show how they can be used to enhance shapes and text.