Share via


GradientStops Property (RadialGradientBrush)

Gets or sets the collection of the brush's gradient stops.

XAML
<RadialGradientBrush ...>
  oneOrMoreGradientStops
</RadialGradientBrush>
Scripting
value = object.GradientStops
object.GradientStops = value

XAML Values

oneOrMoreGradientStops One or more GradientStop object elements.

Property Value

GradientStopCollection

A collection of the GradientStop objects associated with the brush, each of which specifies a color and an offset along the brush's gradient axis.

This property is read/write. The default value is an empty collection.

Remarks

The XAML syntax for GradientStops is an example of an implicit collection syntax, where you can omit the GradientStopCollection object element, as well as the <object.GradientStops> property element. Instead, you generally include one or more GradientStop object elements as child elements of a LinearGradientBrush. For more information about XAML implicit collection syntax, see XAML Syntax Overview. (Explicitly including a GradientStopCollection object element is permissible XAML syntax, and might be useful if you intend to name the collection in XAML and manipulate its contents through script later.)

Generally a GradientStopCollection contains a minimum of two gradient stops.

Examples

The following example creates a RadialGradientBrush with three gradient stops in the implicit GradientStopCollection. The three gradient stops specify a brush with a varying transparency, which is then applied as the OpacityMask for an Image.

XAML
<Canvas  
  xmlns="https://schemas.microsoft.com/client/2007"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"> 
  <Image Source="sampleImages/forest.jpg" Height="100">
    <Image.OpacityMask>
      <RadialGradientBrush Center="0.5,0.5">
        <!-- This gradient stop is partially transparent. -->
        <GradientStop Color="#00000000" Offset="1" />
        <!-- This gradient stop is partially transparent. -->
        <GradientStop Color="#20000000" Offset="0.8" />
        <!-- This gradient stop is fully opaque. -->
        <GradientStop Color="#FF000000" Offset="0" />
      </RadialGradientBrush>
    </Image.OpacityMask>
  </Image> 
</Canvas>

The following illustration shows the rendered output of the preceding example code.

RadialGradientBrush applied to OpacityMask of an image

RadialGradientBrush applied to OpacityMask of an image

Applies To

RadialGradientBrush

See Also

Silverlight Brushes Overview
LinearGradientBrush