RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Beautify Your UIs with Perfect Pen and Brush Control : Page 4

Spice up your interfaces by taking full advantage of the Pen and Brush classes capabilities in the .NET Framework. Learn to create dashed and striped lines, control line joins, and use brushes to create interesting patterns and gradients.

Interpolation Colors
A LinearGradientBrush isn't limited to two colors; it can also transition between a series of colors. For this kind of brush, start by creating a LinearGradientBrush. Next create a ColorBlend object and set its Colors property to an array containing the list of colors that you want to shade between.

Set the ColorBlend object's Positions property to an array of Singles giving the positions between 0.0 and 1.0 where you want each color to reach its pure value.

Finally set the LinearGradientBrush's InterpolationColors property to the ColorBlend object.

The following code shades a rectangle from red to lime to blue. The ColorBlend's Positions array indicates that the left edge of the rectangle should be red, the middle should be lime, and the right edge should be blue.

Figure 12. Multiple-color Gradients: The sample program "InterpolationColors" fills these rectangles with many smoothly blended colors.
   rect = New Rectangle(10, 10, 300, 150)
   Using the_brush As _
    New LinearGradientBrush(rect, Color.Blue, Color.Red, _
       ' Define a color blend.
       Dim color_blend As New ColorBlend()
       color_blend.Colors = New Color() _
           {Color.Red, Color.Lime, Color.Blue}
       color_blend.Positions = New Single() {0.0, 0.5, 1.0}
       the_brush.InterpolationColors = color_blend
       ' Draw.
       e.Graphics.FillRectangle(the_brush, rect)
   End Using
Figure 12 shows the output from the sample program "InterpolationColors," which uses the preceding code to fill the top rectangle. The program then uses a different brush to fill the lower rectangle with colors blending through red, orange, yellow, lime, blue, indigo, and purple.

You can apply the same concepts to drawing text. The sample program "LinearGradientText" draws its text using a LinearGradientBrush that shades from red to lime to blue (see Figure 13).

Figure 13. Linear Gradient Applied to Text: The figure illustrates how you can use a LinearGradientBrush to draw text as well as figures.
Path Gradient Brushes
As if LinearGradientBrushes weren't cool enough, you can also define a PathGradientBrush that smoothly shades colors from points along a path towards a "center" point.

To use a PathGradientBrush, create an array of Points that defines a polygon and pass the array into the PathGradientBrush's constructor. Set the brush's CenterColor property to the color that you want the brush to use for the "center" of the polygon. If you like, you can set the brush's CenterPoint property to the location of this central point. Note that the CenterPoint doesn't truly have to be anywhere near the polygon's actual center. If you don't set this property explicitly, the brush picks a point based on the polygon's points.

Next set the brush's SurroundColors property to an array of Colors that holds the colors that you want the brush to use at the polygon's points. Finally, you call the FillPolygon method to apply the gradient to the specified polygon.

If you don't include enough colors for every point, the brush reuses the last color as many times as needed to make up the difference. But unfortunately, if you include too many colors in the array (more colors than points in the polygon), calling the FillPolygon method throws an Exception.

The following code shows a simple example. The variable pts is an array of Points that defines a heptagon (a seven-sided polygon). The brush shades from white in the center to the surround colors red, orange, yellow, lime, blue, indigo, and purple around the edges.

   Using the_brush As New PathGradientBrush(pts)
       the_brush.CenterColor = Color.White
       Dim surround_colors() As Color = { _
           Color.Red, _
           Color.Orange, _
           Color.Yellow, _
           Color.Lime, _
           Color.Blue, _
           Color.Indigo, _
           Color.Purple _
       the_brush.SurroundColors = surround_colors
       e.Graphics.FillPolygon(the_brush, pts)
   End Using
You can find the code in the sample program "PathGradientBrushes." Figure 14 shows the output.

Figure 14. Apply a Path Gradient to Polygons: The figure illustrates using a PathGradientBrush to fill a heptagon with a gradient.
Figure 15. Interesting Gradient Effects: This star was created by using a PathGradientBrush with a white center color and different colors for each point.
Figure 16. Interesting Gradient Effects: The sample program "PathGradientHollowStar" fills a self-intersecting star with a PathGradientBrush.
Using PathGradientBrushes, you can achieve all sorts of interesting effects. The sample program "PathGradientStar," shown in Figure 15, uses a PathGradientBrush to draw a star. The star's points have different colors, the "valleys" between the points are white, and the center color is white.

The sample "PathGradientHollowStar" program (see Figure 16), draws a self-intersecting polygon. The points of the star have different colors and the center point is again white.

Solid Pens and Brushes are fine for everyday reports and forms but it takes only a little extra work to use dashed lines, hatch patterns, and linear color gradients to improve the output. Custom line caps, compound lines, multiple linear gradients, and path gradients are a bit harder but, when tastefully done, can add a little extra spice to an otherwise humdrum form or splash screen. These effects are seldom used, so with only a little extra effort you can create interesting and unique graphical applications.

Rod Stephens is a consultant and author who has written more than a dozen books and two hundred magazine articles, mostly about Visual Basic. During his career he has worked on an eclectic assortment of applications for repair dispatch, fuel tax tracking, professional football training, wastewater treatment, geographic mapping, and ticket sales. His VB Helper web site receives more than 7 million hits per month and provides three newsletters and thousands of tips, tricks, and examples for Visual Basic programmers.
Email AuthorEmail Author
Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date