Share via

Silverlight Brushes Overview

  • Article

This overview describes how to use Microsoft Silverlight brush objects to paint with solid colors, linear gradients, radial gradients, and images.

This topic contains the following sections:

  • Painting an Area with a Solid Color
  • Painting an Area with a Gradient
  • Linear Gradients
  • Radial Gradients
  • Specifying Transparent or Partially Transparent Gradient Stops
  • Painting with Images
  • Painting with Video

Painting an Area with a Solid Color

One of the most common operations in any platform is to paint an area with a solid color. To accomplish this task, Silverlight provides the SolidColorBrush class. The following sections describe the different ways to paint with a SolidColorBrush.

To paint an area with a solid color in XAML, use one of the following options:

  • Select a predefined SolidColorBrush by name. For example, you can set the Fill of a Rectangle to "Red" or "MediumBlue". The example uses the name of a predefined SolidColorBrush to set the Fill of a Rectangle.

    XAML 
    <Canvas



    xmlns="https://schemas.microsoft.com/client/2007"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
<!-- This rectangle's fill is painted with a red SolidColorBrush,
described using a named color. -->
<Rectangle Width="100" Height="100" Fill="Red" />
</Canvas>

    • Choose a color from the 32-bit color palette by specifying the amounts of red, green, and blue to combine into a single solid color. The format for specifying a color from the 32-bit palette is #rrggbb, where rr is a two-digit hexadecimal number that specifies the relative amount of red, gg specifies the amount of green, and bb specifies the amount of blue. Additionally, the color can be specified as #aarrggbb, where aa specifies the alpha value, or transparency, of the color. This approach enables you to create colors that are partially transparent. In the following example, the Fill of a Rectangle is set to fully opaque red using hexadecimal notation.

      XAML 
      <Canvas 



      xmlns="https://schemas.microsoft.com/client/2007"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
<!-- This rectangle's background is painted with a red SolidColorBrush,
described using hexadecimal notation. -->
<Rectangle Width="100" Height="100" Fill="#FFFF0000" />
</Canvas>

      • Use property element syntax to describe a SolidColorBrush. This syntax is more verbose but enables you to specify additional settings, such as the brush's opacity. In the following example, the Fill properties of two Rectangle elements are set to fully opaque red. The first brush's color is described using a predefined color name. The second brush's color is described using hexadecimal notation.

        XAML 
        <Canvas 



        xmlns="https://schemas.microsoft.com/client/2007"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
        

        <!-- Both of these rectangles' fills are painted with red
SolidColorBrush objects, described using object element
syntax. -->
<Rectangle Width="100" Height="100">
<Rectangle.Fill>
<SolidColorBrush Color="Red" />
</Rectangle.Fill>
</Rectangle>
<Rectangle Width="100" Height="100" Canvas.Top="110">
<Rectangle.Fill>
<SolidColorBrush Color="#FFFF0000" />
</Rectangle.Fill>
</Rectangle>
</Canvas>

        Painting an Area with a Gradient

        A gradient brush paints an area with multiple colors that blend into each other along an axis. You can use them to create impressions of light and shadow, giving your UI elements a three-dimensional feel. You can also use them to simulate glass, chrome, water, and other smooth surfaces. Silverlight provides two types of gradient brushes: LinearGradientBrush and RadialGradientBrush.

        Linear Gradients

        A LinearGradientBrush paints an area with a gradient that is defined along a line, 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 gradient axis is described in the next section. By default, a diagonal gradient is created.

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

        XAML 
        <Canvas
  xmlns="https://schemas.microsoft.com/client/2007"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
  <!-- 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>
</Canvas>

        The following illustration shows the resulting gradient.

        A diagonal linear gradient

        A diagonal linear gradient

        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 may set the color by using a predefined color or by specifying ScRGB or 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 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 gradient stops, and a dashed line shows the gradient axis.

        Gradient stops in a linear gradient

        Gradient stops in a linear gradient

        The first gradient stop specifies the color yellow at an offset of 0.0. The second gradient stop specifies the color red at an offset of 0.25. The points between these two stops gradually change from yellow to red as you move from left to right along the gradient axis. The third gradient stop specifies the color blue at an offset of 0.75. The points between the second and third gradient stops gradually change from red to blue. The fourth gradient stop specifies the color lime green at an offset of 1.0. The points between the third and fourth gradient stops gradually change from blue to lime green.

        The Gradient Axis

        As previously mentioned, a linear gradient brush's gradient stops are positioned along a line, the gradient axis. You may change the orientation and size of the line using 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.

        By default, the linear gradient brush's StartPoint and EndPoint are relative to the area being painted. The point (0,0) represents the upper-left corner of the area being painted, and (1,1) represents the lower-right corner of the area being painted. The default StartPoint of a LinearGradientBrush is (0,0), and its default EndPoint is (1,1), which creates a diagonal gradient starting at the upper-left corner and extending to the lower-right corner of the area being painted. The following illustration shows the gradient axis of a linear gradient brush with default StartPoint and EndPoint.

        Gradient axis for a diagonal linear gradient

        Gradient axis for a diagonal linear gradient

        The following example shows how to create a horizontal gradient by specifying the brush's StartPoint and EndPoint. Notice that the gradient stops are the same as in the previous examples; by simply changing the StartPoint and EndPoint, the gradient has been changed from diagonal to horizontal.

        XAML 
        <Canvas
  xmlns="https://schemas.microsoft.com/client/2007"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
  <!-- This rectangle is painted with a horizontal linear gradient. -->
  <Rectangle Width="200" Height="100">
    <Rectangle.Fill>
      <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
        <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>
  
</Canvas>

        The following illustration shows the resulting gradient. The gradient axis is marked with a dashed line, and the gradient stops are marked with circles.

        Gradient axis for a horizontal linear gradient

        Gradient axis for a horizontal linear gradient

        The next example shows how to create a vertical gradient.

        XAML 
        <Canvas 
  xmlns="https://schemas.microsoft.com/client/2007"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
  <!-- This rectangle is painted with a vertical linear gradient. -->
  <Rectangle Width="200" Height="100">
    <Rectangle.Fill>
      <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,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> 
  
</Canvas>

        The following illustration shows the resulting gradient. The gradient axis is marked with a dashed line, and the gradient stops are marked with circles.

        Gradient axis for a vertical gradient

        Gradient axis for a vertical gradient

        Radial Gradients

        Like a LinearGradientBrush, a RadialGradientBrush paints an area with colors that blend together along an axis. The previous examples showed how a linear gradient brush's axis is a straight line. A radial gradient brush's axis is defined by a circle; its colors radiate outward from its origin.

        In the following example, a radial gradient brush is used to paint the interior of a rectangle.

        XAML 
        <Canvas
  xmlns="https://schemas.microsoft.com/client/2007"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
  <!-- 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> 
  
</Canvas>

        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.

        Gradient stops in a radial gradient

        Gradient stops in a radial gradient

        The GradientOrigin specifies the start point of a radial gradient brush's gradient axis. The gradient axis radiates from the gradient origin to the gradient circle. A brush's gradient circle is defined by its Center, RadiusX, and RadiusY properties.

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

        RadialGradientBrush settings

        RadialGradientBrush settings

        Specifying Transparent or Partially Transparent Gradient Stops

        Because gradient stops do not provide an opacity property, you must specify the alpha channel of colors by using ARGB hexadecimal notation or ScRGB notation to create gradient stops that are transparent or partially transparent. The following sections explain how to create partially transparent gradient stops in XAML and code. For information about setting the opacity of the entire brush, see the Specifying the Opacity of a Brush section.

        Specifying Color Opacity in XAML

        In XAML, one way to specify the opacity of a color is to use ARGB hexadecimal notation. ARGB hexadecimal notation uses the following syntax:

        # aa rrggbb

        The aa in the previous line represents a two-digit hexadecimal value that is used to specify the opacity of the color. The rr, gg, and bb each represents a two-digit hexadecimal value used to specify the amount of red, green, and blue in the color. Each hexadecimal digit may have a value from 0 to 9 or A to F. 0 is the smallest value, and F is the largest value. An alpha value of 00 specifies a color that is completely transparent, and an alpha value of FF creates a color that is fully opaque. In the following example, hexadecimal ARGB notation is used to specify two colors. The first is partially transparent (it has an alpha value of x20), while the second is completely opaque.

        XAML 
        <Canvas  
  xmlns="https://schemas.microsoft.com/client/2007"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"> 
  <Rectangle Width="100" Height="100">
    <Rectangle.Fill>
      <LinearGradientBrush StartPoint="0,0">
        <!-- This gradient stop is partially transparent. -->
        <GradientStop Color="#200000FF" Offset="0.0" />
        <!-- This gradient stop is fully opaque. -->
        <GradientStop Color="#FF0000FF" Offset="1.0" />
      </LinearGradientBrush>
    </Rectangle.Fill>
  </Rectangle> 
</Canvas>

        Painting with Images

        The ImageBrush class enables you to use images as fills, backgrounds, and outlines. An ImageBrush paints an 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 uses an ImageBrush to paint the Background of a Canvas.

        XAML 
        <Canvas
  xmlns="https://schemas.microsoft.com/client/2007"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  Height="200" Width="300">
  <Canvas.Background>
    <ImageBrush ImageSource="sampleImages/Forest.jpg" />
  </Canvas.Background>
</Canvas>

        Painting with Video

        The VideoBrush class enables you to paint an area with video. The following example uses a VideoBrush to paint the Foreground of a TextBlock.

        XAML 
        <Canvas
  xmlns="https://schemas.microsoft.com/client/2007"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
  
    <MediaElement 
      x:Name="butterflyMediaElement" 
      Source="sampleMedia/Butterfly.wmv" IsMuted="True"
      Opacity="0.0" IsHitTestVisible="False" />
      
    <TextBlock Canvas.Left="5" Canvas.Top="30"  
      FontFamily="Verdana" FontSize="120" 
      FontWeight="Bold" TextWrapping="Wrap"
      Text="Video">
      
        <!-- Paint the text with video. -->
        <TextBlock.Foreground>
          <VideoBrush SourceName="butterflyMediaElement" Stretch="UniformToFill" />
        </TextBlock.Foreground>
    </TextBlock>
    
</Canvas>

        For more information about VideoBrush, see the VideoBrush Overview.

        See Also

        VideoBrush Overview
        Brush
        SolidColorBrush
        LinearGradientBrush
        RadialGradientBrush
        Overviews and How-to Topics