Home

GDI+ Brushes: Gradient Brushes

 

Introduction

A gradient brush resembles a solid brush in that it is color-based. Unlike a solid brush, a gradient brush uses two colors. Its main characteristic is that, when used, one color is applied on one side and the other color is applied to the other side. In between, both colors merge to create a transition or fading effect.

There are two types of gradient brushes: linear and path.

 

Linear Gradient Brushes

A linear gradient is used to apply two colors in a closed shape but from one side of the shape, such as the left, to the other opposite side of the shape, such as the right.

To support linear gradient brushes, the .NET Framework provides the LinearGradientBrush class defined in the System.Drawing.Drawing2D namespace. To specify the starting and the end points inside of the shape that you want to fill, you can use one of the following constructors:

Public Sub New(point1 As Point, _
	         point2 As Point, _
	         color1 As Color, _
	         color2 As Color)
Public Sub New(point1 As PointF, _
	         point2 As PointF, _
	         color1 As Color, _
	         color2 As Color)

The first argument, point1, is the point where the drawing would start. The third argument, color1, is the color that would be applied from that point. The second argument, point2, is the point where the drawing would end by applying the color specified by the fourth argument, color2.

Here is an example:

Imports System.Drawing
Imports System.Drawing.Drawing2D
Imports System.Windows.Forms

Module Exercise

    Public Class Starter
        Inherits Form

        Dim components As System.ComponentModel.Container

        Public Sub New()
            InitializeComponent()
        End Sub

        Public Sub InitializeComponent()

        End Sub

        Private Sub FormPaint(ByVal sender As Object, _
                              ByVal e As PaintEventArgs) _
                              Handles MyBase.Paint

            Dim lgb As LinearGradientBrush = _
                 New LinearGradientBrush(New Point(20, 20), _
                                         New Point(450, 20), _
                                         Color.DarkGreen, _
                                         Color.LightBlue)
            e.Graphics.FillRectangle(lgb, 20, 20, 430, 180)

        End Sub
    End Class

    Function Main() As Integer

        Dim frmStart As Starter = New Starter

        Application.Run(frmStart)

        Return 0
    End Function

End Module

Linear Brush

By default, the linear gradient brush fills its gradient based on a horizontal line. If you want the color merge to use a different orientation, such as vertical or diagonal, you can use one of the following constructors:

Public Sub New(rect As Rectangle, _
	          color1 As Color, _
	          color2 As Color, _
	          linearGradientMode As LinearGradientMode)
Public Sub New(rect As RectangleF, _
	         color1 As Color, _
	         color2 As Color, _
	         linearGradientMode As LinearGradientMode)

The first argument, rect, is the rectangle inside of which the colors would be applied. The second argument, color1, is the color that would be applied from a starting point. The second argument, color2, is the color that would be applied at the other end. The factor argument is used to determine the orientation of the merging colors. It has the following members:

Vertical: The first color, color1,  is applied to the top section of the rect argument. The second color, color2,  is applied to the bottom section of the rect argument:

Private Sub FormPaint(ByVal sender As Object, _
                              ByVal e As PaintEventArgs) _
                              Handles MyBase.Paint

            Dim rect As Rectangle = New Rectangle(10, 10, 470, 300)
            Dim lgb As LinearGradientBrush = _
                   New LinearGradientBrush(rect, _
                                                    Color.DarkRed, _
                                             Color.White, _
                     LinearGradientMode.Vertical)
            e.Graphics.FillRectangle(lgb, 10, 10, 450, 280)

End Sub

Linear Brush

Horizontal: The first color, color1,  is applied to the left section of the rect argument. The second color, color2,  is applied to the right section of the rect argument

BackwardDiagonal: The first color, color1,  is applied to the top-right corner of the rect argument. The second color, color2,  is applied to the bottom-left corner of the rect argument:

Backward Diagonal

ForwardDiagonal: The first color, color1,  is applied to the top-left corner of the rect argument. The second color, color2, is applied to the bottom-right corner of the rect argument:

Forward Diagonal

The constructor used to produce the above orientation has the limitation that it provides only four options. If you want, you can apply any angular merge as you see fit. To do this, you can use one of the following constructors:

Public Sub New(rect As Rectangle, _
	         color1 As Color, _
	         color2 As Color, _
	         angle As Single)
Public Sub New(rect As RectangleF, _
	         color1 As Color, _
	         color2 As Color, _
	         angle As Single)

The first argument, rect, is the rectangle inside of which the colors would be applied. The last argument, angle, is an angle measured clockwise, that will specify the orientation of the merging colors The second argument, color1, is the color that would be applied from the starting point. The second argument, color2, is the color that would be applied at the other end. Here is an example:

Private Sub FormPaint(ByVal sender As Object, _
                              ByVal e As PaintEventArgs) _
                              Handles MyBase.Paint

            Dim rect As Rectangle = New Rectangle(10, 10, 470, 300)
            Dim lgb As LinearGradientBrush = New LinearGradientBrush(rect, _
                                                         Color.DarkRed, _
                                                         Color.White, -65.24F)
            e.Graphics.FillRectangle(lgb, 10, 10, 450, 280)

End Sub

Linear Brush

Path Gradient Brushes

The second type of gradient brush available is referred to as path gradient. This brush is applied on a path created by connecting a series of points to get a closed shape.  The interior of the shape can then be filled as a gradient.

To support path brushes, the .NET Framework provides the PathGradientBrush from the System.Drawing.Drawing2D namespace. Two of the constructors of this class are:

Public Sub New(points As Point())
Public Sub New(points As PointF())

The argument passed to this constructor is an array of type Point. Here is an example:

Imports System.Drawing
Imports System.Drawing.Drawing2D
Imports System.Windows.Forms

Module Exercise

    Public Class Starter
        Inherits Form

        Dim components As System.ComponentModel.Container

        Public Sub New()
            InitializeComponent()
        End Sub

        Public Sub InitializeComponent()

        End Sub

        Private Sub FormPaint(ByVal sender As Object, _
                              ByVal e As PaintEventArgs) _
                              Handles MyBase.Paint

            Dim ptGraph As Point() = { _
                    New Point(10, 10), _
                    New Point(450, 10), _
                    New Point(450, 250), _
                    New Point(10, 250)}

            Dim pgb As PathGradientBrush = New PathGradientBrush(ptGraph)
            e.Graphics.FillRectangle(pgb, 10, 10, 450, 280)

        End Sub
    End Class

    Function Main() As Integer

        Dim frmStart As Starter = New Starter

        Application.Run(frmStart)

        Return 0
    End Function

End Module

Path Gradient Brush

 

 

Home Copyright © 2008-2012 FunctionX Home