WPF LinearGradientBrush in VB.NET

This article demonstrates how to use LinearGradientBrush in WPF using XAML and VB.NET.
  • 3729

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).

Lgb16.jpg
Figure 16. Linear Gradient

  Lgb17.jpg
 

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.

Lgb18.jpg
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.

Lgb19.jpg

Figure 19. A linear gradient brush with 5 stops

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

    Public Sub CreateARectangleWithLGBrush()
        ' Create a Rectangle
        Dim blueRectangle As New Rectangle()
        blueRectangle.Height = 100
        blueRectangle.Width = 200

        ' Create a linear gradient brush with five stops 
        Dim fiveColorLGB As New LinearGradientBrush()
        fiveColorLGB.StartPoint = New Point(0, 0)
        fiveColorLGB.EndPoint = New Point(1, 1)

        ' Create and add Gradient stops
        Dim blueGS As New GradientStop()
        blueGS.Color = Colors.Blue
        blueGS.Offset = 0.0
        fiveColorLGB.GradientStops.Add(blueGS)

        Dim orangeGS As New GradientStop()
        orangeGS.Color = Colors.Orange
        orangeGS.Offset = 0.25
        fiveColorLGB.GradientStops.Add(orangeGS)

        Dim yellowGS As New GradientStop()
        yellowGS.Color = Colors.Yellow
        yellowGS.Offset = 0.5
        fiveColorLGB.GradientStops.Add(yellowGS)

        Dim greenGS As New GradientStop()
        greenGS.Color = Colors.Green
        greenGS.Offset = 0.75
        fiveColorLGB.GradientStops.Add(greenGS)

        Dim redGS As 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)
    End Sub

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 
    Dim fiveColorLGB As New LinearGradientBrush()
fiveColorLGB.StartPoint = New Point(0, 0.5)
fiveColorLGB.EndPoint = New Point(1, 0.5)

Lgb20.jpg

Figure 20. Vertical gradient

Categories

More Articles

© 2019 DotNetHeaven. All rights reserved.