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.
<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.

Note |
|---|
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.
Note