WPF LinearGradientBrush

A linear gradient brush paints an area with a linear gradient. The LinearGradientBrush object represents a linear gradient brush. The default value linear gradient value is diagonal. The StartPoint and EndPoint properties of the LinearGradientBrush represent the start and end points of a gradient. The default values of these properties is (0,0) and (1,1), which is upper-left corner to lower-right corner of an area.

Figure 16 and 17 show a diagonal gradient (MSDN sample).

Figure 16. Linear Gradient

Figure 17. Linear Gradient with Stops

Creating a Linear Gradient Brush

The LinearGradientBrush element in XAML creates a linear gradient brush. The following code snippet creates a linear gradient brush with blue and red colors by setting GradientStops. The StartPoint and EndPoint values are (0,0) and (1,1).

<LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >                   

    <GradientStop Color="Blue" Offset="0" />

    <GradientStop Color="Red" Offset="1.0" />                 

</LinearGradientBrush>

We can fill a shape with a gradient brush by setting a shape's Fill property to the gradient brush. The code snippet in Listing 15 creates a rectangle shape sets the Fill property to a LinearGradientBrush with blue and red colors.

<Rectangle Width="200" Height="100">

    <Rectangle.Fill>

        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >                   

            <GradientStop Color="Blue" Offset="0" />

            <GradientStop Color="Red" Offset="1.0" />                 

        </LinearGradientBrush>

    </Rectangle.Fill>

</Rectangle>

Listing 15

The output looks like Figure 18.

Figure 18. A shape filled with a linear gradient brush

Now let's apply multiple stops with multiple colors. The code snippet in Listing 16 creates a linear gradient brush with five stops.

<Rectangle Width="200" Height="100">

    <Rectangle.Fill>

        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >                   

            <GradientStop Color="Blue" Offset="0.1" />

            <GradientStop Color="Orange" Offset="0.25" />

            <GradientStop Color="Yellow" Offset="0.50" />

            <GradientStop Color="Green" Offset="0.75" />

            <GradientStop Color="Red" Offset="1.0" />   

        </LinearGradientBrush>

    </Rectangle.Fill>

</Rectangle>

Listing 16

The new output generated by Listing 16 looks like Figure 19.

Figure 19. A linear gradient brush with 5 stops

The CreateARectangleWithLGBrush method listed in Listing 17 draws same rectangle in Figure 19 dynamically.

public void CreateARectangleWithLGBrush()

{

    // Create a Rectangle

    Rectangle blueRectangle = new Rectangle();

    blueRectangle.Height = 100;

    blueRectangle.Width = 200;

    // Create a linear gradient brush with five stops 

    LinearGradientBrush fiveColorLGB = new LinearGradientBrush();

    fiveColorLGB.StartPoint = new Point(0, 0);

    fiveColorLGB.EndPoint = new Point(1, 1);

    // Create and add Gradient stops

    GradientStop blueGS = new GradientStop();

    blueGS.Color = Colors.Blue;

    blueGS.Offset = 0.0;

    fiveColorLGB.GradientStops.Add(blueGS);

    GradientStop orangeGS = new GradientStop();

    orangeGS.Color = Colors.Orange;

    orangeGS.Offset = 0.25;

    fiveColorLGB.GradientStops.Add(orangeGS);

    GradientStop yellowGS = new GradientStop();

    yellowGS.Color = Colors.Yellow;

    yellowGS.Offset = 0.50;

    fiveColorLGB.GradientStops.Add(yellowGS);

    GradientStop greenGS = new GradientStop();

    greenGS.Color = Colors.Green;

    greenGS.Offset = 0.75;

    fiveColorLGB.GradientStops.Add(greenGS);

    GradientStop redGS = new GradientStop();

    redGS.Color = Colors.Red;

    redGS.Offset = 1.0;

    fiveColorLGB.GradientStops.Add(redGS);

    // Set Fill property of rectangle

    blueRectangle.Fill = fiveColorLGB;

    // Add Rectangle to the page

    LayoutRoot.Children.Add(blueRectangle);

}

Listing 17

By simply changing the StartPoint and EndPoint values, we can generate a vertical gradient shapes. By changing a few lines below in code listed in Listing 17 generates Figure 20.

// Create a linear gradient brush with five stops 

LinearGradientBrush fiveColorLGB = new LinearGradientBrush();

fiveColorLGB.StartPoint = new Point(0, 0.5);

fiveColorLGB.EndPoint = new Point(1, 0.5);

Figure 20. Vertical gradient