In Silverlight, to draw objects to the screen you paint them with Brush objects. You can paint an area with a solid color, a gradient, an image, or even a video. This QuickStart introduces the different brushes in Silverlight and how to use them.

This QuickStart contains the following sections:

Introduction to Brushes

To paint an object on the screen, such as a Shape or a Control, you use a Brush. You set the Fill property of the Shape or the Background and Foreground properties of a Control to the desired Brush.

The different types of brushes in Silverlight are: SolidColorBrush, LinearGradientBrush, RadialGradientBrush, ImageBrush, and VideoBrush.

For more information about Brushes, see the following topics on MSDN:

• Brushes Overview
• VideoBrush Overview

Solid Color Brushes

A SolidColorBrush paints an area with a single Color, such as red or blue. There are three ways in XAML to define a SolidColorBrush and the color it specifies. You can use predefined color names, hexadecimal color values, or the property element syntax.

Predefined Color Names

You can use a predefined color name, such as Yellow or SlateBlue, to set either the Fill property of a Shape or the Background and Foreground properties of a Control. The XAML parser converts the color name to a Color structure with the correct color channels.

The following example sets the Fill property of a Rectangle to the predefined color Red.

XAML

<StackPanel>
    <Rectangle Width="100" Height="100" Fill="Red" />
</StackPanel> 

Hexadecimal Color Values

You can use the hexadecimal value of the color to set either the Fill property of a Shape or the Background and Foreground properties of a Control. The structure of the hexadecimal value is: alpha channel (opacity), red channel, green channel, and blue channel. For example, the hexadecimal value #FFFF0000 defines fully opaque red (alpha=FF, red=FF, green=00, and blue=00).

The following example sets the Fill property of a Rectangle to the hexadecimal value #FFFF0000.

XAML

<StackPanel>
  <Rectangle Width="100" Height="100" Fill="#FFFF0000" />
</StackPanel> 

Property Element Syntax

You can use property element syntax to define a SolidColorBrush. This syntax is more verbose than the previous methods, but it enables you to specify additional settings, such as the brush's Opacity. For more information on XAML syntax, including property element syntax, see the XAML QuickStart.

The following example creates a Rectangle and explicitly creates the SolidColorBrush for the Fill property. The Color of the SolidColorBrush is set to Blue and the Opacity is set to 0.5.

XAML

 <Grid>
  <Rectangle Width="200" Height="150">
     <Rectangle.Fill>
        <SolidColorBrush Color="Blue" Opacity="0.5" />
     </Rectangle.Fill>
  </Rectangle>
</Grid> 

Linear Gradient Brushes

A LinearGradientBrush paints an area with a gradient that is defined along a line, called the gradient axis. You specify the gradient's colors and their location along the gradient axis using GradientStop objects. You can also modify the gradient axis, which enables you to create horizontal and vertical gradients and reverse the gradient direction.

The GradientStop is the basic building block of a gradient brush. A gradient stop specifies a Color at an Offset along the gradient axis.

The gradient stop's Color property specifies the color of the gradient stop. You can set the color by using a predefined color name or by specifying the hexadecimal ARGB values.

The gradient stop's Offset property specifies the position of the gradient stop's color on the gradient axis. The Offset is a Double that ranges from 0 to 1. The closer a gradient stop's offset value is to 0, the closer the color is to the start of the gradient. The closer the gradient's offset value is to 1, the closer the color is to the end of the gradient.

The following example creates a linear gradient with four colors and uses it to paint a Rectangle.

XAML

 <StackPanel>
 <!-- This rectangle is painted with a diagonal linear gradient. -->
  <Rectangle Width="200" Height="100">
    <Rectangle.Fill>
      <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
        <GradientStop Color="Yellow" Offset="0.0" />
        <GradientStop Color="Red" Offset="0.25" />
        <GradientStop Color="Blue" Offset="0.75" />
        <GradientStop Color="LimeGreen" Offset="1.0" />
      </LinearGradientBrush>
    </Rectangle.Fill>
  </Rectangle>
</StackPanel>

The color of each point between gradient stops is linearly interpolated as a combination of the color specified by the two bounding gradient stops. The following illustration highlights the gradient stops in the previous example. The circles mark the position of the gradient stops, and the dashed line shows the gradient axis.

You can change the line at which the gradient stops are positioned by setting the brush's StartPoint and EndPoint properties. By manipulating the brush's StartPoint and EndPoint, you can create horizontal and vertical gradients, reverse the gradient direction, condense the gradient spread, and more.

The following example creates a Rectangle that has a LinearGradientBrush as a Fill. The LinearGradientBrush creates two GradientStops, one red and one blue. The red GradientStop is set to an Offset of 0 and the blue GradientStop is set to an Offset of .75. The StartPoint is set to (0,0) and the EndPoint is set to (1,1) which are the default values. Use the sliders in this example to experiment with the different property values.

Radial Gradient Brushes

Like a LinearGradientBrush, a RadialGradientBrush paints an area with colors that blend together along an axis. A radial gradient brush's axis is defined by a circle; its colors radiate outward from its origin. Use the GradientOrigin, Center, RadiusX, and RadiusY propeties, to define the radial gradient.

The following example creates a radial gradient with four GradientStops.

XAML

 <StackPanel> 
  <!-- This rectangle is painted with a radial gradient. --> 
  <Rectangle Width="200" Height="100"> 
    <Rectangle.Fill> 
      <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5"
        RadiusX="0.5" RadiusY="0.5"> 
        <GradientStop Color="Yellow" Offset="0" /> 
        <GradientStop Color="Red" Offset="0.25" /> 
        <GradientStop Color="Blue" Offset="0.75" />
        <GradientStop Color="LimeGreen" Offset="1" />
      </RadialGradientBrush>
    </Rectangle.Fill>
  </Rectangle>
</StackPanel> 

The following illustration shows the gradient created in the previous example. The brush's gradient stops have been highlighted. Notice that even though the results are different, the gradient stops in this example are identical to the gradient stops in the previous linear gradient brush examples.

The following illustration shows several radial gradients with different GradientOrigin, Center, RadiusX, and RadiusY settings.

The following example creates a Rectangle that has a RadialGradientBrush as a Fill. The RadialGradientBrush creates two GradientStops, one red and one blue. The red GradientStop is set at on Offset of 0 and the blue GradientStop is set at on Offset of .75. The GradientOrigin and Center are all set to (0.5, 0.5) and the RadiusX and RadiusY are set to 0.5, which are the default values. Use the sliders in this example to experiment with the different property values.

Image Brushes

An ImageBrush paints an area with an image. It paints the area with a JPEG or PNG image specified by its ImageSource property. You set the ImageSource property with the path of the image to load.

By default, an ImageBrush stretches its image to completely fill the area being painted, possibly distorting the image if the painted area has a different aspect ratio than the image. You can change this behavior by changing the Stretch property from its default value of Fill to None, Uniform, or UniformToFill.

The following example creates an ImageBrush and sets the ImageSource to an image named flower.jpg, which is included as a resource in the application. Use the drop-down lists to change the properties.

Video Brushes

A VideoBrush paints an area with video. This video content is provided by a MediaElement. As with other brush types, you can use a VideoBrush to paint the Fill of a Rectangle, the Background of a Canvas, or the Foreground of a TextBlock.

The following example paints the Foreground of a TextBlock with a video. A MediaElement is created for the source of the video, but it's Opacity is set to 0 and it's IsHitTestVisible property is set to false. A TextBlock is created with its Fill property is set to a VideoBrush. The SourceName property of the VideoBrush is set to the name of the MediaElement.

XAML

<Canvas>
   <MediaElement x:Name="media" 
                 Source="xbox.wmv" 
                 IsMuted="True" 
                 Opacity="0.0" 
                 IsHitTestVisible="False"  />

   
   <TextBlock Canvas.Left="5" 
              Canvas.Top="30" 
              FontFamily="Verdana" 
              FontSize="120" 
              FontWeight="Bold"  T
              Text="VIDEO">

      <TextBlock.Foreground>
         <VideoBrush SourceName="media" />
      </TextBlock.Foreground>

   </TextBlock>
</Canvas> 

What's Next

At this point you've gone over all the basics of static UI. Next, you will see how you can use styles to customize the look and behavior of UI across multiple controls: Control Styles

See Also

• Brushes Overview
• VideoBrush Overview