Export (0) Print
Expand All

LinearGradientBrush Object

Paints an area with a linear gradient.

XAML
<LinearGradientBrush ...>
  oneOrMoreGradientStops
</LinearGradientBrush>
Scripting
To create an object using scripting, see CreateFromXAML.

XAML Values

oneOrMoreGradientStops One or more GradientStop object elements. Object elements defined here become members of the collection held by the GradientStops property, when accessed by scripting at runtime.

Remarks

A LinearGradientBrush paints an area with a linear gradient. A linear gradient defines a gradient along a line. The line's end points are defined by the StartPoint and EndPoint properties of the linear gradient. A LinearGradientBrush brush paints its GradientStops along this line.

The default linear gradient is diagonal. In the default, the StartPoint of a linear gradient is (0,0), the upper-left corner of the area being painted, and its EndPoint is (1,1), the lower-right corner of the area being painted. The colors in the resulting gradient are interpolated along the diagonal path.

The following illustration shows a diagonal gradient. A line was added to highlight the interpolation path of the gradient from the start point to the end point.

Gradient axis for a diagonal linear gradient

Gradient axis for a diagonal linear gradient

The following illustration shows the same linear gradient, but with highlighted gradient stops.

Gradient stops in a linear gradient

Gradient stops in a linear gradient

Examples

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

XAML
<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  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 stops in a linear gradient

See Also

Brush Overview
RadialGradientBrush

Community Additions

Show:
© 2014 Microsoft