The Amazing GroupBox, Part 1

The GroupBox, as you know it, has a specific function, and that is to group several objects together, so that you only have to manipulate one object. For example, to make the items inside the Groupbox invisible, you just need to set the GroupBox’s Visible property to False, instead of making each child object invisible one by one. Because I’m me, I asked myself: What if I spice up the Groupbox a bit? That simple question led me towards creating my own GroupBox control, with which you can properly manipulate the title of the GroupBox (in other words, Alignment options which aren’t present in the ordinary Groupbox), as well as adding a Scrollbar to the Groupbox, so that you can add more items into it, without sizing it too big. In this, the first part of this series, you will concentrate on creating the shape of the GroupBox, and all the new funky GroupBox title features.

Your Project

  1. Open Visual Studio 2005.
  2. Start a New Visual Basic.NET Windows Forms Project.
  3. You can name the project anything you like. I’ve named mine HTG_Group.
  4. Once the Form designer is shown, select the Project menu, and add a UserControl.
  5. You can name the form and the UserControl anything you like. Mine are named frmTest and HTG_Group respectively.
  6. Open the UserControl’s designer if necessary, Resize it to 230, 264.
  7. Add the following controls with their associated properties to the UserControl:
  8. Control Property Value
    Label Name lblGBHead
      BackColor Control
      Size 230, 66
      Location 0, 0
    Panel Name pnlGBBody
      BackColor LightGray
      Dock Bottom
      Location 0, 50
      Size 230, 214

Allowing the GroupBox to be Transparent

As you may or may not know, you cannot set a User control’s BackColor to Transparent because it is not immediately supported. You have to enable this capability, and the best place to do this is in the UserControl’s Constructor. Follow the next few steps carefully:

  1. In the Solution Explorer, click the Show All Files Button. This will display the UserControl’s Designer file, as well as its resource file.
  2. Click the Designer file, and select the View Code button in the Solution Explorer.
  3. Once inside the Designer file’s code, you may not see the Constructor immediately. You should select New from the Method Name drop-down list.
  4. Under the call to InitializeComponent, add the following:
  5. 'Enable Transparent BackColour property
       SetStyle(ControlStyles.SupportsTransparentBackColor, True)
       Me.BackColor = Color.Transparent    'Set BackColour
    

Shaping the UserControl

If you look at an ordinary GroupBox, you would note that its top two corners are rounded whereas the bottom corners are not. With your GroupBox, you will have a complete Rounded rectangle shape, which looks a bit prettier. Before you create the shape, you need to have two variables (one for the width, and one for the height), so you should declare and initialize them now.

Private gbHeight As Integer    'Height
Private gbWidth As Integer     'Width

Initialize these variables inside the Constructor:

gbHeight = Me.Height
gbWidth  = Me.Width

Remember to Import the System.Drawing.Drawing2D Namespace:

Imports System.Drawing.Drawing2D    'Drawing Functions

Now, create the Round Rectangle function:

''' <summary>
''' Creates The Round rectangular Shape Of GroupBox
''' </summary>
Private Function gbRoundRect(ByVal gbX As Integer, )
   ByVal gbY As Integer, ByVal gbWidth As Single, _
   ByVal gbHeight As Single, ByVal gbRadius As Integer, _
   ByVal gbLineCol As Color, ByVal gbFillCol As Color, _
   ByVal gbGraphics As System.Drawing.Graphics) As _
      System.Drawing.Graphics


   Dim gbPen As New System.Drawing.Pen(gbLineCol, 5)
   Dim gbBrush As New System.Drawing.SolidBrush(gbFillCol)

   Dim gbPath As System.Drawing.Drawing2D.GraphicsPath = _
      New System.Drawing.Drawing2D.GraphicsPath
   If gbRadius > gbWidth / 2 OrElse gbRadius > gbHeight / 2 _
      Then gbRadius = gbHeight / 2

   gbPath.StartFigure()

   gbPath.AddArc(gbX, gbY, gbRadius * 2, gbRadius * 2, 180, 90)
   gbPath.AddArc(gbX + gbWidth - gbRadius * 2, gbY, gbRadius * 2, _
                 gbRadius * 2, 270, 90)
   gbPath.AddArc(gbX + gbWidth - gbRadius * 2, gbY + gbHeight - _
                 gbRadius * 2, _ gbRadius * 2, gbRadius * 2, 0, 90)
   gbPath.AddArc(gbX, gbY + gbHeight - gbRadius * 2, _
                 gbRadius * 2, gbRadius * 2, 90, 90)
   gbPath.CloseFigure()

   gbGraphics.FillPath(gbBrush, gbPath)
   gbGraphics.DrawPath(gbPen, gbPath)
   Me.Region = New Region(gbPath)
   Return gbGraphics

End Function

This function returns your rounded rectangular shape. All that is left is to call this function within your UserControl’s resize event:

Private Sub HTG_Group_Resize(ByVal sender As Object, _
   ByVal e As System.EventArgs) Handles Me.Resize
   gbWidth = Me.Width
   gbHeight = Me.Height

   Dim gbGraphics As Graphics
   gbGraphics = Graphics.FromHwnd(Me.Handle)

   gbRoundRect(0, 0, gbWidth, gbHeight, 15, Color.Black, _
      Color.Transparent, gbGraphics)
   Me.Invalidate()
End Sub

In the Resize event, you just set the value of the gbWidth and gbHeight variables to the UserControl Width and Height, so that, as you resize, their values update as well. Then, you created a Graphics object to assist you in drawing the shape of your UserControl, and call the gbRoundRect function.

Build your project now, and if there aren’t any problems, you now can safely continue to add a Border to the UserControl.

More by Author

Must Read