This documentation is archived and is not being maintained.

How to: Paint an Area with a Radial Gradient

This example shows how to use the RadialGradientBrush class to paint an area with a radial gradient.

The following example uses a RadialGradientBrush to paint a rectangle with a radial gradient that transitions from yellow to red to blue to lime green.

No code example is currently available or this language may not be supported.

<Page 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="RadialGradientBrush Example"
  Background="White" Margin="20">
  <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">
          <RadialGradientBrush.GradientStops>
            <GradientStop Color="Yellow" Offset="0" />
            <GradientStop Color="Red" Offset="0.25" />
            <GradientStop Color="Blue" Offset="0.75" />
            <GradientStop Color="LimeGreen" Offset="1" />
          </RadialGradientBrush.GradientStops>
        </RadialGradientBrush>
      </Rectangle.Fill>
    </Rectangle>
  </StackPanel>
</Page>


The following illustration shows the gradient from the preceding example. The gradient's stops have been highlighted.

Gradient stops in a radial gradient
NoteNote

The examples in this topic use the default coordinate system for setting control points. The default coordinate system is relative to a bounding box: 0 indicates 0 percent of the bounding box, and 1 indicates 100 percent of the bounding box. You can change this coordinate system by setting the MappingMode property to the value Absolute. An absolute coordinate system is not relative to a bounding box. Values are interpreted directly in local space.

For additional RadialGradientBrush examples, see the Brushes Sample. For more information about gradients and other types of brushes, see Painting with Solid Colors and Gradients Overview.

Show: