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.
.png)
.gif) 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.