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.
  • 5047

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: 

<Window xmlns="http://schemas.microsoft.com/winfx/avalon/2005"

   xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005">

<Rectangle Width="200" Height="40" Stroke="Blue" StrokeThickness="3">
    <Rectangle.Fill>
      <LinearGradientBrush>
        <LinearGradientBrush.GradientStops>
          <GradientStop Offset="0" Color="Red"/>
          <GradientStop Offset="1" Color="Green"/>
        </LinearGradientBrush.GradientStops>
      </LinearGradientBrush>
    </Rectangle.Fill>
  </Rectangle>

</Window>

The output looks like Figure 1.

 LinearGradientBrushImg1.gif
                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.

 LinearGradientBrushImg2.gif
                           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.

 GradientBrushImg3.gif
                     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.

 GradientBrushImg4.gif
                         Figure4
Got a programming related question? You may want to post your question here
 

 

© 2019 DotNetHeaven. All rights reserved.