The LinearGradeintBrush object represents a linear gradient brush, which lets us specify the starting and ending colors, and the starting and ending points of the gradient patter.
The linear gradient brushes work differently from solid and hatch brushes. For solid and hatch brushes, an application creates a brush and uses the brush to fill graphics shapes; the brush pattern applies to the entire shape. For linear gradient brushes, an application creates a linear gradient brush with a rectangle. The rectangle passed in the constructor of the LinearGradeintBrush object defines the boundaries of a gradient pattern. For example, Listing 9.20 creates a linear gradient brush with starting point (0,0) ending point (50,50), starting color red, and ending color green. Then the code fills a rectangle starting at point (0,0) and ending at point (200,50):
LISTING 9.20: Creating a LinearGradientBrush object
Dim g As Graphics = e.Graphics
Dim rgBrush As New LinearGradientBrush(New RectangleF(0, 0, 50, 50), Color.Red, Color.Green, LinearGradientMode.Horizontal)
g.FillRectangle(rgBrush, 0, 0, 200, 50)
Figure 9.29 shows the output from Listing 9.20. After point (50,50) the gradient pattern repeats itself.
Now let's create one more linear gradient brush using code from Listing 9.21. The brush's range is greater, and the rectangle starts at point (50, 50) with height and width 200 and 50, respectively.
LISTING 9.21: Setting a brush's rectangle
Dim g As Graphics = e.Graphics
Dim rgBrush As New LinearGradientBrush(New RectangleF(0, 0, 200, 200), Color.Red, Color.Green, LinearGradientMode.Horizontal)
g.FillRectangle(rgBrush, 50, 50, 200, 50)
As the output of Listing 9.21 shows (see Figure 9.30), the pattern repeats after it crosses point (200,200).
The LinearGradeintBrush class also provides two methods-SetBlendTriangularShape and SetSigmaBellShape-which can be used to set gradient properties. SetBlendTriangularShape creates a gradient with a center color and a linear falloff color. This method takes two parameters-representing focus and scale both floating-point values that vary from 0 to1. The focus parameter is optional. Listing 9.22 shows the SetBlendTriangularShape method being used.
FIGURE 9.29: Using linear gradient brushes
FIGURE 9.30: Using a rectangle in the linear gradient brushes
LISTING 9.22: Using the SetBlendTriangularShape method
Private Sub Form1_Paint(ByVal senderAs Object,ByVal e As PaintEventArgs)
Dim g As Graphics = Me.CreateGraphics()
g.Clear(Me.BackColor)
' Create a rectangle
Dim rect As New Rectangle(20, 20, 100, 50)
' Create a linear gradeint brush
Dim rgBrush As New LinearGradientBrush(rect, Color.Red, Color.Green, 0.0F, True)
' Fill rectangle
g.FillRectangle(rgBrush, rect)
rect.Y = 90
' Set blend triangular shape
rgBrush.SetBlendTriangularShape(0.5F, 1.0F)
' fill rectangle again
g.FillRectangle(rgBrush, rect)
' Dispose of object
g.Dispose()
End Sub
Figure 9.31 shows the output from Listing 9.22. The first image starts with red and ends with green; the second image has green as the center, and red as both the starting and the ending edge color.
FIGURE 9.31: Using the SetBlendTriangularShape method
The SetSigmaBellShape method creates a gradient falloff based on a bell-shaped curve. Much like SetBlendTriangularShape, this method takes two parameters representing focus and scale (the focus parameter is optional) whose values vary from 0 to1. Listing 9.23 shows the SetSigmaBellShape method being used.
LISTING 9.23: Using the SetSigmaBellShape method
Private Sub Form1_Paint(ByVal sender As Object, ByVal e As PaintEventArgs)
Dim g As Graphics = Me.CreateGraphics()
g.Clear(Me.BackColor)
' Create a rectangle
Dim rect As New Rectangle(20, 20, 100, 50)
' Create a linear gradient brush
Dim rgBrush As New LinearGradientBrush(rect, Color.Red, Color.Green, 0.0F, True)
' Fill rectangle
g.FillRectangle(rgBrush, rect)
rect.Y = 90
' Set sigma bell shape
rgBrush.SetSigmaBellShape(0.5F, 1.0F)
' fill rectangle again
g.FillRectangle(rgBrush, rect)
' Dispose of object
g.Dispose()
End Sub
FIGURE 9.32: Using the SetSigmaBellShape method
Figure 9.32 shows the output from Listing 9.23. The first image starts with red and ends with green. After the sigma bell shape is set, the image's center is green and its starting and ending edges are red.
Now let's compare the effect of SetSigmaBellShape and SetBlendTriangularShape. Listing 9.24 draws three rectangles: one using the LinearGradeint brush with no effect, one using SetSigmaBellShape, and one using SetBlendTringularShape.
LISTING 9.24: Comparing the effect of SetBlendTriangularShape and SetSigmaBellShape
Private Sub Form1_Paint(ByVal sender As Object, ByVal e As PaintEventArgs)
Dim g As Graphics = Me.CreateGraphics()
g.Clear(Me.BackColor)
' Create a rectangle
Dim rect As New Rectangle(0, 0, 40, 20)
' Create a linear gradient brush
Dim rgBrush As New LinearGradientBrush(rect, Color.Black, Color.Blue, 0.0F, True)
' Fill rectangle
g.FillRectangle(rgBrush, New Rectangle(10, 10, 300, 100))
' Set sigma bell shape
rgBrush.SetSigmaBellShape(0.5F, 1.0F)
' fill rectangle again
g.FillRectangle(rgBrush, New Rectangle(10, 120, 300, 100))
' Set blend triangular shape
rgBrush.SetBlendTriangularShape(0.5F, 1.0F)
' Fill rectangle again
g.FillRectangle(rgBrush, New Rectangle(10, 240, 300, 100))
' dispose of object
g.Dispose()
End Sub
Figure 9.33 shows the output from Listing 9.24. The first image is the original image, the second image is a sigma bell shape, and the third image is a blend triangular shape. SetBlendTriangularShape produces a glassy effect in the center of the color, and SetSigmaBellShape produces a faded effect.
FIGURE 9.33: Comparing the effect of SetBlendTriangularShape and SetSigmaBellShape
The first parameter of SetBlendTriangularShape and SetSigmaBellShape represents the center of the gradient (color), which varies between 0.0f and 1.0f, where 0.0f is the starting point and 1.0f is the ending point of the gradient.
Now let's change the center of the gradient by modifying the two relevant lines of Listing 9.24 as follows:
rgBrush.SetSigmaBellShape(0.8F, 1F)
rgBrush.SetBlendTriangularShape(0.2F, 1F)
The new output looks like Figure 9.34. The center of the gradient in the second and third images is visibly different.
FIGURE 9.34: Setting the center of a gradient
Conclusion
Hope the article would have helped you in understanding Blending Using LinearGradientBrush Objects in GDI+. Read other articles on GDI+ on the website.