C# 2008 Programmer's Reference

 xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'>
 <Ellipse
  Canvas.ZIndex='2'
  Height='200' Width='200'
  Stroke='Black'
  StrokeThickness='10'
  Fill='Yellow'/>
 <Rectangle
  Canvas.ZIndex='1'
  Canvas.Left='80'
  Canvas.Top='80'
  Height='200' Width='200'
  Stroke='Black'
  StrokeThickness='10'
  Fill='LightBlue'/>
</Canvas>

Reload the Default.html file in the web browser, and notice that the ellipse is now on top of the rectangle (see Figure 19-5).

Figure 19-5

You can also nest Canvas controls within one another. Edit the UI.xaml file created earlier and replace its content with the following:

<Canvas
 xmlns='http://schemas.microsoft.com/client/2007'
 xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'>
 <Canvas
  Canvas.Left='80' Canvas.Top='80'
  Height='250' Width='250'
  Background='lightgreen'>
  <Ellipse
   Canvas.ZIndex='2'
   Canvas.Left='10' Canvas.Top='10'
   Height='200' Width='200'
   Stroke='Black'
   StrokeThickness='10'
   Fill='Yellow'/>
 </Canvas>
</Canvas>

Reload the Default.html file in the web browser, and observe the changes (see Figure 19- 6).

Figure 19-6

The positions specified by the Canvas.Left and Canvas.Topattributes of each element or control are relative to its parent control, and not the root control. 

Drawing Shapes

One of the key capabilities of Silverlight is the support for drawing objects of different shapes and sizes. Silverlight provides the following basic shape elements:

□ Rectangle

□ Ellipse

□ Line

□ Polygon

□ Polyline

Rectangle

A <Rectangle> element draws a rectangle (or square) with optional rounded corners. To specify rounded corners, use the RadiusX and RadiusY attributes. Edit the UI.xaml file created in the previous section and replace its content with the following:

<Canvas
 xmlns='http://schemas.microsoft.com/client/2007'
 xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'>
 <Rectangle
  Canvas.Left='10' Canvas.Top='10'
  Height='100' Width='200'
  Stroke='Black'
  StrokeThickness='10'
  Fill='Yellow'
  RadiusX='10'
  RadiusY='10'/>
 <Rectangle
  Canvas.Left='60' Canvas.Top='60'
  Height='200' Width='180'
  Stroke='Black'
  StrokeThickness='10'
  Fill='LightBlue'
  RadiusX='30'
  RadiusY='30'/>
</Canvas>

Reload Default.html in the web browser. Figure 19-7 shows the output.

Figure 19-7

Line

A <Line> element draws a line on the Canvas control. Edit the UI.xaml file created in the previous section and replace its content with the following:

<Canvas
 xmlns='http://schemas.microsoft.com/client/2007'
 xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'>
 <Line X1='10' Y1='10' X2='100' Y2='180'
  Stroke='black' StrokeThickness='5'/>
 <Line X1='100' Y1='10' X2='10' Y2='180'
  Stroke='red' StrokeThickness='10'/>
</Canvas>

Reload the Default.html file in the web browser, and observe the output (see Figure 19- 8).

Figure 19-8 

Ellipse

An <Ellipse> element draws a circle (or oval) on the Canvas control. Edit the UI.xaml file created in the previous section, and replace its content with the