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 3

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.

Solid Brushes
To draw lines with special Pen effects, you create a Pen object and then set its properties to change its start and end caps, dash style, dash caps, and other characteristics. In contrast, to fill shapes in different ways, you use different Brush classes.

The Brushes class provides a large assortment of stock solid-color Brushes such as Brushes.Orchid and Brushes.Honeydew. You can also use the SolidBrush class to create your own solid brushes using non-standard colors.

For example, the following code fills a rectangle with a stock Orchid brush. It then makes a solid brush that is a light translucent blue (the first parameter to FromArgb means the color has an opacity of only 128 on a scale of 0 to 255, making it translucent) and uses it to fill a rectangle that overlaps the first one.

Figure 8. Predefined Hatch Patterns: Here's the output of the sample program "HatchBrushes," showing samples of the 56 predefined hatch patterns.
   e.Graphics.FillRectangle(Brushes.Orchid, _
      New Rectangle(25, 0, 50, 100))
   Using the_brush As New SolidBrush( _
      Color.FromArgb(128, 0, 128, 255))
      e.Graphics.FillRectangle(the_brush, _
         New Rectangle(0, 25, 100, 50))
   End Using
Even the commons solid brushes are quite useful. With a little creativity and some transparency they can be a lot of fun, but the .NET Framework also provides an assortment of other Brush classes that produce some truly amazing effects.

Hatched Brushes
The HatchBrush class fills areas with one of 56 predefined patterns as shown in Figure 8.

Using a HatchBrush is easy. Just create a new HatchBrush object, passing to its constructor the pattern you want, a foreground color, and a background color. The following code makes a HatchBrush that fills are area with the DiagonalBrick pattern drawn in black over a yellow background.

Figure 9. Using Texture Brushes: The figure shows a rectangle filled with a TextureBrush using a custom "Diamond" image.
   Using the_brush As New HatchBrush( _
    HatchStyle.DiagonalBrick, Color.Black, Color.Yellow)
       Dim rect As New Rectangle(0, 0, 100, 50)
       e.Graphics.FillRectangle(the_brush, rect)
   End Using
Texture Brushes
You can't create a customized HatchBrush but you can probably accomplish what you want with a TextureBrush. To create a TextureBrush, pass its constructor the image that it should use to fill an area. The image can contain whatever pattern you want. It can also contain as many colors as you like so it's even more flexible than a HatchBrush, which supports only foreground and background colors.

The sample program "TextureBrushes," shown in Figure 9, uses the following code to fill a rectangle. It makes a TextureBrush from the program's image resource named Diamond and then fills a rectangle named rect with the brush.

   Using the_brush As New TextureBrush(My.Resources.Diamond)
       e.Graphics.FillRectangle(the_brush, rect)
   End Using
Linear Gradient Brushes
Figure 10. Linear Gradient Brushes: Here's a screenshot from the sample "LinearGradientBrushes" program that fills a rectangle with colors that blend smoothly from blue to lime green.
The LinearGradientBrush class fills an area with smoothly blended colors. Figure 10 shows program LinearGradientBrushes displaying one of the simpler possible gradients shading from blue in the upper left corner to lime green in the lower right.

The LinearGradientBrush class exposes several constructors. The version used by the LinearGradientBrushes program takes two points and the colors that it should use at those points as parameters. The brush smoothly transitions the colors as it moves from one point to the other.

The following code shows how the program works. It first defines the points and colors, then uses them to create a LinearGradientBrush and fill the rectangle, using the two points as the rectangle's upper left and lower right corners.

   Dim point1 As New Point(20, 20)
   Dim point2 As New Point(250, 160)
   Dim color1 As Color = Color.Blue
   Dim color2 As Color = Color.Lime
   Using the_brush As New _
      LinearGradientBrush(point1, point2, color1, color2)
      Dim rect As New Rectangle( _
         point1.X, point1.Y, _
         point2.X - point1.X + 1, _
         point2.Y - point1.Y + 1)
      e.Graphics.FillRectangle(the_brush, rect)
   End Using
Another way to create a LinearGradientBrush is to pass its constructor a rectangle, two colors, and an angle. The brush fills the area with the first color in the upper left, shading towards the second color in the lower right, with colors blending along the indicated angle. The following code creates a brush that transitions from blue to red at a 45 degree angle.

Figure 11. Controlling Gradient Angles: The four images in this figure show how the sample program "LinearGradientBrush_Angles" controls the gradient angle by creating brushes using different angle values.
   Dim rect As New Rectangle(10, 10, 100, 100)
   Using the_brush As New _
      LinearGradientBrush(rect, Color.Blue, Color.Red, 45)
      e.Graphics.FillRectangle(the_brush, rect)
   End Using
Figure 11 shows four areas with gradients applied at 0, 30, 60, and 90 degree angles. The program uses an arrow (drawn using a Pen with EndCap = ArrowAnchor) showing the color gradient's direction and displays the angle in text.

To make common gradients easier to build, the class provides another overloaded constructor that takes as parameters a rectangle, two colors, and a gradient mode that can be BackwardDiagonal, ForwardDiagonal, Horizontal, or Vertical. The following code uses a ForwardDiagonal brush and a blue to red gradient.

   Dim rect As New Rectangle(10, 10, 200, 100)
   Using the_brush As _
      New LinearGradientBrush(rect, Color.Blue, Color.Red, _
      e.Graphics.FillRectangle(the_brush, rect)
   End Using

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date