Beautify Your UIs with Perfect Pen and Brush Control

f you've done any Windows graphics programming at all, you know about Pens and Brushes. Pens determine the characteristics of lines, such as color and thickness. Brushes determine the characteristics of filled areas, notably the fill color.

Many programmers use the Pens class to get stock, one-pixel wide pens of various colors as in the code e.Graphics.DrawLine(Pens.Red, 10, 10, 100, 100). They also use the Brushes class to get stock solid colored brushes as in:

   e.Graphics.FillEllipse(Brushes.Beige, _
       New Rectangle(10, 10, 50, 100))

But Pens and Brushes can do more—much more.

Line Joins
When you use the DrawLines or DrawPolygon methods to draw a series of connected lines, you can choose to connect the lines in one of the four ways shown in Figure 1. The thick orange lines show the join styles and thin black lines drawn on top show where the lines are actually drawn.

The Bevel style cuts the corners off at each turn so the bevel touches a point where two lines meet. The bevel's angle is evenly spaced between the angles of the incoming and outgoing lines. If you think of the line as a laser beam, the bevel is like a mirror making it bounce from one line to the next.

Figure 1. Line Join Styles: Here's the output of the sample program "LineJoins," which demonstrates line join styles.

The Miter style extends the sides of the lines at a corner until they meet. For very sharp turns, that can make the corner stick pretty far out.

The MiterClipped style is the same as Miter unless a corner sticks out too far in which case it switches to Bevel.

Finally the Round style makes the corners rounded so the edge of the line is the same distance from the lines at all times.

To use a particular join style, you first create a Pen object and then set its LineJoin property as shown in the following code:

   ' Use an orange Pen, 10 pixels wide.
   Using the_pen As New Pen(Color.Orange, 10)
       the_pen.LineJoin = LineJoin.Round
       e.Graphics.DrawLines(the_pen, pts)
   End Using

Author's Note: The new Using statement automatically calls a Pen's or Brush's Dispose method, so I often employ it to simplify the code when dealing with Pens and Brushes.

Most of the Pen techniques described in this article follow a similar pattern: you create a Pen and then modify the Pen's properties.

Line Caps
A Pen's StartCap and EndCap properties determine what the ends of lines look like. Figure 2 shows samples of the available styles.

Figure 2. StartCap and EndCap Properties: The sample program "PenCaps" shows various Pen StartCap and EndCap styles.

The Round cap styles go nicely with the Round LineJoin style. The Flat cap styles usually work well with the other LineJoin styles.

For example, the following code draws a line with a round ball at the start and an arrowhead at the end:

   Using the_pen As New Pen(Color.Blue, 10)
       the_pen.StartCap = LineCap.RoundAnchor
       the_pen.EndCap = LineCap.ArrowAnchor
       e.Graphics.DrawLine(the_pen, 10, 10, 100, 100)
   End Using

Dash Styles
The DashStyle property determines whether a Pen draws lines that are solid, dashed, dotted, or in some other style. Figure 3 shows samples of the five pre-defined dash styles plus one custom style at the bottom.

To use a standard dash style, simply set the Pen's DashStyle property as in the following code.

Figure 3. Dash Styles: The sample program "DashStyles" shows standard dash styles and one custom style (at the bottom).

   Using the_pen As New Pen(Color.Red, 3)
       the_pen.DashStyle = DashStyle.Dash
       e.Graphics.DrawLine(the_pen, 10, 10, 100, 200)
   End Using

To make a custom dash style, create an array of Singles that indicate the number of units that should be drawn and then skipped while drawing the line. The array can contain as many values as you like. For example, if the Singles array holds the values 5, 1, 5, 1, 1, 1, it means: draw 5 units, skip 1 unit, draw 5 more, skip 1, draw 1, and finally, skip 1 unit. The Pen repeats these values as needed to draw longer lines.

The units in this array are Pen widths; so if the Pen you're using is 5 pixels wide then a 1 in the array means skip 5 pixels.

After you create the array, set the Pen's DashStyle property to Custom and set its DashPattern property to the array. The following code draws a line with the pattern shown at the bottom of Figure 3:

   Using the_pen As New Pen(Color.Red, 3)
       Dim dash_pattern() As Single = {5, 1, 5, 1, 1, 1}
       the_pen.DashStyle = DashStyle.Custom
       the_pen.DashPattern = dash_pattern
       e.Graphics.DrawLine(the_pen, 10, 10, 100, 200)
   End Using

Dash Caps

Figure 4. Dash Caps: The output of the sample program "DashCaps" illustrates how you can control the ends of dashed lines.

Just as you can specify how the Pen should draw its end points, you can similarly specify how it should draw the ends of dashes. Set the Pen's DashStyle property to something other than Solid and then set its DashCap property to one of the three values shown in Figure 4.

For example, the following code draws a thick green line with the Triangle dash cap:

   Using the_pen As New Pen(Color.Green, 11)
       the_pen.DashStyle = DashStyle.Dash
       the_pen.DashCap = DashCap.Triangle
       e.Graphics.DrawLine(the_pen, 10, 10, 100, 100)
   End Using

Next Page