• Article

RadialGradientBrush

Microsoft Silverlight will reach end of support after October 2021. Learn more.

Paints an area with a radial gradient. A focal point defines the beginning of the gradient, and an ellipse defines the end points of the gradient.

<RadialGradientBrush   ...>
  oneOrMoreGradientStops
</RadialGradientBrush>

XAML Values

Value

Description

oneOrMoreGradientStops

One or more GradientStop object elements. Object elements defined here become members of the GradientStops collection when scripting accesses the GradientStops property at run time.

Managed Equivalent

RadialGradientBrush

Remarks

The RadialGradientBrush object is similar to the LinearGradientBrush object. However, the linear gradient has a start point and an end point to define the gradient vector, while the radial gradient has an ellipse, along with a focal point (the GradientOrigin), to define the gradient behavior. The ellipse defines the end point of the gradient. In other words, a gradient stop at 1.0 defines the color at the ellipse circumference. The focal point defines the center of the gradient. A gradient stop at 0 defines the color at the focal point.

The following illustration shows a rectangle filled with a radial gradient that transitions from white to gray. The outside circle represents the gradient ellipse while the red dot denotes the focal point. This gradient has its SpreadMethod property set to Pad.

A radial gradient with highlighted components

A radial gradient with highlighted components

For more information on basic concepts, see Brushes. Note that the Brushes topic is written primarily for users of the managed API, and may not have code examples or specific information that address the JavaScript API scenarios.

Example

The following example uses a radial gradient brush to paint the interior of a rectangle.

<Canvas
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  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 preceding 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 example for the LinearGradientBrush object.

Gradient stops in a radial gradient

Gradient diagram.

See Also

Reference

LinearGradientBrush