XAML LinearGradientBrush
Linear Gradient Brush generates blend of two colors and fills the graphics object with the blend. This article shows how to create and fill graphics objects using LinearGradientBrush.
The <LinearGradientBrush> object represents the linear gradient brush in XAML. A linear gradient is a blend of two or more colors.
The following source code draws a rectangle and fills with a linear gradient brush of red and green colors:
The output looks like Figure 1.
Figure1
System Colors Gradient
The SystemColors object represents the system colors such as controls and windows colors. This class has static property such as ControlColor, DesktopColor, ControlDarkColor, ControlLightColor, WindowTextColor and so on.
By specifying Color property of GradientStop, you can set system color to fill a linear gradient brush. For example, the following code uses Control dark and light colors to fill the gradient.
<GradientStop Offset="0" Color="{x:Static SystemColors.ControlDarkDarkColor}"/>
<GradientStop Offset="1" Color="{x:Static SystemColors.ControlLightLightColor}"/>
|
The output of above code generates Figure 2.
Figure2
Multiple Colors Gradient
A gradient is a process of blending two colors. However you can apply multiple colors linearly using Linear Gradient Brush. For example, you can blend three colors - Red, Black, and Green. The first gradient will be blend of Red and Black, followed by Black and Green and so on. The following code uses Red, Black, and Green colors in linear gradient brush.
<Rectangle Width="200" Height="100"
Stroke="Black" StrokeThickness="1">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<LinearGradientBrush.GradientStops>
<GradientStop Color="Red" Offset="0.0" />
<GradientStop Color="Green" Offset="0.50" />
<GradientStop Color="Black" Offset="1.0" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
|
The output of above code generates Figure 3.
Figure3
You can also apply more than 3 colors. The following code applies 7 different colors.
<Rectangle Width="200" Height="100"
Stroke="Black" StrokeThickness="1">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<LinearGradientBrush.GradientStops>
<GradientStop Color="White" Offset="0.0" />
<GradientStop Color="Pink" Offset="0.10" />
<GradientStop Color="Yellow" Offset="0.30" />
<GradientStop Color="Blue" Offset="0.50" />
<GradientStop Color="Green" Offset="0.60" />
<GradientStop Color="Red" Offset="0.80" />
<GradientStop Color="Black" Offset="1.0" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
|
The output of above code generates Figure 4.
Figure4
Further Readings
You may also want to read these related articles.
Ask Your Question
Got a programming related question? You may want to post your question here