Create a Visual Basic. NET control from scratch (v)

visual| Create | Control step 4th: Draw the appearance of the control
To give the control a visual look, we need to place the logic in the Paint event. Then, each time the control needs to refresh its visual appearance, it runs the logic.

The Paint logic in Windows forms uses the classes in the GDI + section in. NET. These classes basically include the Windows API graphics feature. Because it is suitable for. NET, it is easier to use than APIs. However, as to how they work, you need to understand the following points.

In the Windows API, graphics operations require a window handle, sometimes called an hWnd. In GDI +, it is replaced by the Graphics object, which represents not only the drawing area, but also the operations (methods) that are performed in the region.

For example, the Graphics object has the following methods that you can use to draw various screen elements:

DrawCurve
DrawEllipse
DrawLine
DrawPolygon
DrawRectangle
DrawString
FillEllipse
FillPolygon
These are easy to understand and are just examples of available methods. Some more complex methods also allow you to rotate objects. We'll draw the border using the DrawRectangle method and draw a colored circle using the FillEllipse method.

Most drawing methods require Pen or Brush objects to be used. The Pen object is used to draw a line and determine the color and thickness of the line. The Brush object is used to populate the area, determine the color used by the fill area, and some special effects (for example, to fill the area with a bitmap). We will use a special Brush effect to darken the colors of the lights that are not currently lit.

The following is the code that handles the Paint event for the control:

Protected Overrides Sub OnPaint (ByVal pe as _
System.Windows.Forms.PaintEventArgs)
Mybase.onpaint (PE)

Dim Grfgraphics as System.Drawing.Graphics
grfgraphics = pe. Graphics

' first draw three circles representing the lights.
' One light up, the other two extinguished.
Drawlight (Trafficlightstatus.statusgreen, grfgraphics)
Drawlight (Trafficlightstatus.statusyellow, grfgraphics)
Drawlight (trafficlightstatus.statusred, grfgraphics)

' Now draw the outline around the traffic lights
' Draw an outline with a brush and paint it black.
Dim penDrawingPen as New _
System.Drawing.Pen (System.Drawing.Color.Black, Msngborderwidth)

' Draw the outline of the traffic light on the control.
' First define the rectangle you want to draw.
Dim Rectborder as System.Drawing.Rectangle

rectborder.x = 1
RECTBORDER.Y = 1
Rectborder.height = Me.height-2
Rectborder.width = Me.width-2
Grfgraphics.drawrectangle (penDrawingPen, Rectborder)

' Release the drawing object
Pendrawingpen.dispose ()
Grfgraphics.dispose ()

End Sub

You first draw with the base class, which typically draws the background with the background color of the control. The Graphics object of the control is then fetched from the event argument.

Next, draw three circles with a function. The contents of this function are described later. Note that we must pass a reference to the function with a Graphics object, and also indicate the circle to be drawn (red, yellow, green).

Then the code that draws the outline. Declares a rectangle with the appropriate position and size, and then passes to the DrawRectangle method of the Graphics object.

Finally, the drawing object activates its Dispose method. When you use GDI +, it is a good idea to release them immediately after you finish drawing objects. This helps you clear the resources used by the operating system drawing. Managing graphical resources is even more important if you want to use controls in windows®98 or Windows Me, because these operating systems are less capable of handling such resources.

Here is the function to draw the circle:

Private Sub Drawlight (ByVal Lighttodraw as TrafficLightStatus, _
ByVal Grfgraphics as Graphics)

Dim Ncirclex as Integer
Dim Ncircley as Integer
Dim Ncirclediameter as Integer
Dim Ncirclecolor as Color

' Find the X coordinates and diameters of all the circles
Ncirclex = CInt (Me.Size.Width * 0.02)
Ncirclediameter = CInt (Me.Size.Width * 0.96)
Select Case Lighttodraw
Case trafficlightstatus.statusred
If Lighttodraw = Me.status Then
Ncirclecolor = color.orangered
Else
Ncirclecolor = Color.maroon
End If
Ncircley = CInt (Me.Size.Height * 0.01)
Case Trafficlightstatus.statusyellow
If Lighttodraw = Me.status Then
Ncirclecolor = Color.yellow
Else
Ncirclecolor = Color.tan
End If
Ncircley = CInt (Me.Size.Height * 0.34)
Case Trafficlightstatus.statusgreen
If Lighttodraw = Me.status Then
Ncirclecolor = Color.limegreen
Else
Ncirclecolor = Color.forestgreen
End If
Ncircley = CInt (Me.Size.Height * 0.67)

End Select
Dim Bshbrush as System.Drawing.Brush
If Lighttodraw = Me.status Then

Bshbrush = New SolidBrush (ncirclecolor)
Else
Bshbrush = New SolidBrush (Color.FromArgb (Ncirclecolor))
End If

' Draw a circle that represents a traffic light
Grfgraphics.fillellipse (Bshbrush, Ncirclex, Ncircley, Ncirclediameter, Ncirclediameter)

' Release brush
Bshbrush.dispose ()

End Sub

This is the only complex graphic in the entire control. In GDI +, specify the x-coordinate and Y-coordinate of the upper-left corner of the rectangle in which you want to draw the ellipse, and then specify the height and width of the rectangle to draw an ellipse. We call the X and Y coordinates respectively Ncirclex and Ncircley. Because we want to draw a circle, the height of the rectangle equals the width, and the variable Ncirclediameter to control the value.

Set the Ncirclex to fit just inside the control (the width of the control is multiplied by 0.02). Ncircley depending on which light you want to draw, you can set it close to the top of the control (red light), about One-third (yellow light), or about two-thirds (green light). The diameter ncirclediameter is set to equal 96% of the width of the control.

One thing you need to do to draw a solid ellipse is to determine which color to use. The color depends on which light is being drawn and whether the lamp being drawn is lit. The light of the lamp is brighter than the color of the extinguished lamp.

You need to use these colors when creating brushes to be used by the drawing. If the light you are drawing is lit, that color is used. If the light that you draw is off, use a different method to instantiate the brush. The following is the line of code used to extinguish the lamp using the brush:

Bshbrush = New SolidBrush (Color.FromArgb (Ncirclecolor))

This is not a better method name in. NET, but the purpose of the FromArgb method is to create a brush and to fade the color by combining the brush with the background color. The first parameter uses a number between 0 and 255, and the smaller the number, the darker the background color penetrates. We use a value of 60, which will greatly reduce the color of the lamp in the state of extinction. You can try to use a different value for the parameter (or set it to be able to set properties) to get a different effect.

Finally, the Graphics object's DrawEllipse method draws the circle, and the function ends. Remember, the function needs to be called three times to draw three different circles.