C# 2008 Programmer's Reference

   <LinearGradientBrush>
    <!-- fill is diagonal by default -->
    <GradientStop Color='Yellow' Offset='0.25'/>
    <GradientStop Color='Red' Offset='0.5'/>
    <GradientStop Color='Blue' Offset='0.75'/>
   </LinearGradientBrush>
  </Ellipse.Fill>
 </Ellipse>
 <Ellipse
  Canvas.Left='120' Canvas.Top='10'
  Height='100' Width='100'
  Stroke='Black' StrokeThickness='10'>
  <Ellipse.Fill>
   <!-- fill is horizontal -->
   <LinearGradientBrush StartPoint='0,0' EndPoint='1,0'>
    <GradientStop Color='Yellow' Offset='0.25'/>
    <GradientStop Color='Red' Offset='0.5'/>
    <GradientStop Color='Blue' Offset='0.75'/>
   </LinearGradientBrush>
  </Ellipse.Fill>
 </Ellipse>
</Canvas>

Here you used the <Ellipse.Fill> element to fill the each ellipse shapes with a <LinearGradientBrush> element. Reload the Default.html file in the web browser. Figure 19-13 shows the output.

Figure 19-13 

Using RadialGradientBrush

The <RadialGradientBrush> element paints an area with a radial gradient. 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'>
 <Ellipse
  Canvas.Left='10' Canvas.Top='10'
  Height='100' Width='100'
  Stroke='Black' StrokeThickness='10'>
  <Ellipse.Fill>
   <RadialGradientBrush>
    <GradientStop Color='Yellow' Offset='0.25'/>
    <GradientStop Color='Red' Offset='0.5'/>
    <GradientStop Color='Blue' Offset='0.75'/>
   </RadialGradientBrush>
  </Ellipse.Fill>
 </Ellipse>
 <Ellipse
  Canvas.Left='120' Canvas.Top='10'
  Height='100' Width='100'
  Stroke='Black' StrokeThickness='10'>
  <Ellipse.Fill>
   <RadialGradientBrush GradientOrigin='0.5,0'>
    <GradientStop Color='Yellow' Offset='0.25'/>
    <GradientStop Color='Red' Offset='0.5'/>
    <GradientStop Color='Blue' Offset='0.75'/>
   </RadialGradientBrush>
  </Ellipse.Fill>
 </Ellipse>
</Canvas>

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

Figure 19-14 

Using ImageBrush

The <ImageBrush> element paints an area with an image. Assuming that you have the image shown in Figure 19-15 saved as C:SilverlightUSFlag.jpg, edit the UI.xaml file created, and replace its content with the following:

Figure 19-15

<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>
   <ImageBrush ImageSource='USFlag.jpg'/>
  </Ellipse.Fill>
 </Ellipse>
 <Ellipse
  Canvas.Left='120' Canvas.Top='10'
  Height='100' Width='100'
  Stroke='Black' StrokeThickness='10'>
  <Ellipse.Fill>
   <ImageBrush ImageSource='USFlag.jpg' Stretch='Uniform'/>
  </Ellipse.Fill>
 </Ellipse>
</Canvas>

Reload Default.html in the web browser to view the output (see Figure 19-16).

Figure 19-16

Crafting XAML Using Expression Blend 2

While you can code the UI by hand, an easier way is to use a designer tool to design and create the UI