Andy De George
da363692ff
* Reset branch for WPF changes * Convert BMP to PNG; fix link-out-of-scope err * Add snippets for WPF... 6794 files!!!! * Add missing snippets * update file updated between migration * Fix paths to include * update breadcrumb and toc * fix index links * fix index links * fix index links * fix markdown
4.0 KiB
title, ms.date, helpviewer_keywords, ms.assetid
| title | ms.date | helpviewer_keywords | ms.assetid | |||
|---|---|---|---|---|---|---|
| How to: Paint an Area with a Linear Gradient | 03/30/2017 |
|
00e0cd04-48c0-4ec5-850e-d321beb37a34 |
How to: Paint an Area with a Linear Gradient
This example shows how to use the xref:System.Windows.Media.LinearGradientBrush class to paint an area with a linear gradient. In the following example, the xref:System.Windows.Shapes.Shape.Fill%2A of a xref:System.Windows.Shapes.Rectangle is painted with a diagonal linear gradient that transitions from yellow to red to blue to lime green.
Example
[!code-xamlGradientBrushExamples_snip#DiagonalGradient1XAML]
[!code-csharpGradientBrushExamples_snip#DiagonalGradient1CSharp]
The following illustration shows the gradient created by the previous example.
To create a horizontal linear gradient, change the xref:System.Windows.Media.LinearGradientBrush.StartPoint%2A and xref:System.Windows.Media.LinearGradientBrush.EndPoint%2A of the xref:System.Windows.Media.LinearGradientBrush to (0,0.5) and (1,0.5). In the following example, a xref:System.Windows.Shapes.Rectangle is painted with a horizontal linear gradient.
[!code-xamlGradientBrushExamples_snip#HorizontalGradient1XAML]
[!code-csharpGradientBrushExamples_snip#HorizontalGradient1CSharp]
The following illustration shows the gradient created by the previous example.
To create a vertical linear gradient, change the xref:System.Windows.Media.LinearGradientBrush.StartPoint%2A and xref:System.Windows.Media.LinearGradientBrush.EndPoint%2A of the xref:System.Windows.Media.LinearGradientBrush to (0.5,0) and (0.5,1). In the following example, a xref:System.Windows.Shapes.Rectangle is painted with a vertical linear gradient.
[!code-xamlGradientBrushExamples_snip#VerticalGradient1XAML]
[!code-csharpGradientBrushExamples_snip#VerticalGradient1CSharp]
The following illustration shows the gradient created by the previous example.
Note
The examples in this topic use the default coordinate system for setting start points and end points. The default coordinate system is relative to a bounding box: 0 indicates 0 percent of the bounding box, and 1 indicates 100 percent of the bounding box. You can change this coordinate system by setting the xref:System.Windows.Media.GradientBrush.MappingMode%2A property to the value xref:System.Windows.Media.BrushMappingMode.Absolute?displayProperty=nameWithType. An absolute coordinate system is not relative to a bounding box. Values are interpreted directly in local space.
For additional examples, see Brushes Sample. For more information about gradients and other types of brushes, see Painting with Solid Colors and Gradients Overview.