Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining
GradientStop
Run
Collapse the table of content
Expand the table of content

GradientStop

Silverlight

Describes the location and color of a transition point in a gradient.

<GradientStop   .../>

Use this object to describe the colors in a LinearGradientBrush or RadialGradientBrush object.

GradientStop does not provide an opacity property; to make a GradientStop semitransparent, set its Color property with a transparent Color.

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.

The following example creates a linear gradient with four colors and uses it to paint a Rectangle.

<Canvas
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <!-- This rectangle is painted with a diagonal linear gradient. -->
  <Rectangle Width="200" Height="100">
    <Rectangle.Fill>
      <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
        <GradientStop Color="Yellow" Offset="0.0" />
        <GradientStop Color="Red" Offset="0.25" />
        <GradientStop Color="Blue" Offset="0.75" />
        <GradientStop Color="LimeGreen" Offset="1.0" />
      </LinearGradientBrush>
    </Rectangle.Fill>
  </Rectangle>
</Canvas>

The following illustration shows the results of the preceding code, with the highlighted gradient stops.

Gradient stops in a linear gradient

Gradient with gradient stops.

Community Additions

ADD
Show:
© 2015 Microsoft