C# 2008 Programmer's Reference

following:

<Canvas
 xmlns='http://schemas.microsoft.com/client/2007'
 xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'>
 <Ellipse
  Canvas.Left='30' Canvas.Top='30' Height='60' Width='60'
  Stroke='Black' StrokeThickness='10' Fill='Pink'/>
 <Ellipse
  Canvas.Left='200' Canvas.Top='30' Height='60' Width='60'
  Stroke='Black' StrokeThickness='10' Fill='LightBlue'/>
 <Ellipse
  Canvas.Left='20' Canvas.Top='100' Height='70' Width='250'
 Stroke='Black' StrokeThickness='10' Fill='LightGreen'/>
</Canvas>

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

Figure 19-9 

Polygon

A <Polygon> element draws a shape with arbitrary number of sides. Edit UI.xaml again, replacing its content with the following:

<Canvas
 xmlns='http://schemas.microsoft.com/client/2007'
 xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'>
 <Polygon Points='100,10 10,160 190,160'
  Stroke='Yellow' StrokeThickness='5' Fill='Red'/>
</Canvas>

Reload Default.html in the web browser to see the result (see Figure 19-10).

Figure 19-10 

Polyline

A <Polyline> element draws a series of connected lines. Edit the UI.xaml file and replace its content with the following:

<Canvas
 xmlns='http://schemas.microsoft.com/client/2007'
 xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'>
 <Polyline Points='100,10 10,160 210,160 120,10'
  Stroke='Black' StrokeThickness='8'/>
</Canvas>

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

Figure 19-11

Painting Shapes

The Fill attribute that you have seen in many of the previous examples fills (paints) a shape with a solid color. However, the fill is not restricted to solid colors. Silverlight supports various ways to paint a shape:

□ SolidColorBrush

□ LinearGradientBrush

□ RadialGradientBrush

□ ImageBrush

Using SolidColorBrush

The <SolidColorBrush> element paints an area with a solid color. 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'>
 <Ellipse
  Canvas.Left='10' Canvas.Top='10'
  Height='100' Width='100'
  Stroke='Black' StrokeThickness='10' Fill='Yellow'/>
 <Ellipse
  Canvas.Left='120' Canvas.Top='10'
  Height='100' Width='100'
  Stroke='Black' StrokeThickness='10'
  Fill='#A3FC96'/> <!-- 6-digit hexadecimal -->
 <Ellipse
  Canvas.Left='10' Canvas.Top='120'
  Height='100' Width='100'
  Stroke='Black' StrokeThickness='10'
  Fill='#A3FC96FF'/>
 <!-- 6-digit hexadecimal + 2-digit for alpha/opacity value -- >
 <Ellipse
  Canvas.Left='120' Canvas.Top='120'
  Height='100' Width='100'
  Stroke='Black' StrokeThickness='10'>
  <Ellipse.Fill>
   <SolidColorBrush Color='LightBlue'/>
  </Ellipse.Fill>
 </Ellipse>
</Canvas>

In this example, the Fill attribute specifies the solid color to use to fill up the particular element. Reload the Default.html file in the web browser, and observe the output in your browser (see Figure 19-12).

Figure 19-12

Using LinearGradientBrush

The LinearGradientBrush element paints an area with a linear gradient. Edit the UI.xaml file again, replacing its content with the following:

<Canvas
 xmlns=http://schemas.microsoft.com/client/2007
 xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'>
 <Ellipse
  Canvas.Left='10' Canvas.Top='10'
  Height='100' Width='100'
  Stroke='Black' StrokeThickness='10'>
  <Ellipse.Fill>