The RadialGradientBrush is similar to the LinearGradientBrush. However, the linear gradient has a start and an end point to define the gradient vector, while the radial gradient has a 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 image shows a rectangle filled with a radial gradient. The radial gradient that goes from white to gray. The outside circle represents the gradient ellipse while the red dot denotes the focal point. This gradient has its SpreadMethod set to Pad.

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

<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">
        <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>
</StackPanel>

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.

For a list of the operating systems and browsers that are supported by Silverlight, see Supported Operating Systems and Browsers.

Reference

Other Resources