LinearGradientBrush
Microsoft Silverlight will reach end of support after October 2021. Learn more.
Paints an area with a linear gradient.
<LinearGradientBrush ...>
oneOrMoreGradientStops
</LinearGradientBrush>
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. |
Properties
ColorInterpolationMode (LinearGradientBrush), EndPoint (LinearGradientBrush), GradientStops (LinearGradientBrush), MappingMode (LinearGradientBrush), Name (DependencyObject), Opacity (Brush), RelativeTransform, SpreadMethod (LinearGradientBrush), StartPoint (LinearGradientBrush), Transform (Brush)
Remarks
A LinearGradientBrush object 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
.png "Shows a gradient axis.")
The following illustration shows the same linear gradient, but with highlighted gradient stops.
Gradient stops in a linear gradient
.png "Gradient with gradient stops.")
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 creates a linear gradient with four colors and then uses it to paint a Rectangle object.
<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 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