A multi-purpose XP Office 2003 Style hover and flat button with container bar

• Download source files - 19.1 Kb
• Download demo project - 99.6 Kb

Introduction

This control (HoverGradientButton) is very easy to use; graphic and chromatic interface results have a great impact. The original idea is from a good article by Victor Boba (thanks Victor!). HoverGradientButton has a lot of properties, but default properties let the programmer to have a full ready-to-use interface with Office 2003 style. The component supports three different styles: HoverNormal, HoverCheck and HoverOption, that make the HoverGradientButton work respectively as normal Button, CheckBox, and RadioButton. The core component HoverGradientButton is shipped with a versatile container (HoverButtonBand) with an additional AutoArrange property.

Furthermore, the library contains GradientPanelXP, a specialized component, inherited from Panel, with some additional features such as Gradient.

Implementation

Just drop HoverGradientButton control on a form, and you are ready to go. Optionally, you can drop HoverGradientButton inside a HoverButtonBand to get additional features and color combinations.

ToolTip is available: place some text on ToolTipText property and set ToolTipActive to True to see ToolTip on the button.

Usage

• Add the control to the toolbox (LybraVb.dll).
• Drop the HoverGradientButton on a WinForm or inside a HoverButtonBand.
• Set the ButtonType property.
• Select an image for the button.
• Go!

Points of interest

Both components are written in VB.NET and inherits from Panel. No other additional controls are recursively contained inside the two components. Colors, text and images are drawn with FillRectangle, DrawString and DrawImage methods.

A support class named GS (Graphic Support) controls all the base graphic GDI+ routines.

Here is an example of a Shared method of the GS class:

    Public Shared Function _
    PaintGradientRectangle(ByVal g As Drawing.Graphics, _
                           ByVal aPointX As Integer, _
                           ByVal aPointY As Integer, _
                           ByVal aWidth As Integer, _
                           ByVal aHeight As Integer, _
                           ByVal aColor1 As Color, _
                           ByVal aColor2 As Color, _
                           ByVal aGradientMode As _
                                 Drawing2D.LinearGradientMode) _
                           As RectangleF

      Dim RectanglePaint As RectangleF = GS.XRectangleF(aPointX, _
                                          aPointY, aWidth, aHeight)
      Dim gradBrush As New _
          System.Drawing.Drawing2D.LinearGradientBrush(RectanglePaint, _
          aColor1, aColor2, aGradientMode)
      g.FillRectangle(gradBrush, RectanglePaint)
      Return RectanglePaint
    End Function

and here is an example of the use of the GS class and its shared methods:

      'Paint the rectangle

      GS.PaintGradientRectangle(e.Graphics, 0, 0, Me.Width, Me.Height, _
                                            c1, c2, mGradientMode)


      'Draw the image

      e.Graphics.DrawImage(mImage, p.X, p.Y, mImage.Width, mImage.Height)

      'Write the text

      GS.WriteText(e.Graphics, Me.Text, Me.Font, _
                  Me.TextAlign, _
                  mTextQuality, _
                  Me.ForeColor, _
                  0, 0, Me.Width, Me.Height)

      'Draw the border

      GS.PaintBorder(e.Graphics, 0, 0, Me.Width, Me.Height, cb)

The AutoArrange property of HoverButtonBand works at design time, even while the control is resized. This is achieved with a specifically designed Friend class (ButtonsReorder).

This is the ButtonsReorder class:

    Friend Class AlignButtons

      Public Sub New()
      End Sub

      Public Shared Sub _
             ButtonsReorder(ByRef aObjects As _
                            System.Windows.Forms.Control.ControlCollection, _
                            ByVal rType As HowReorder, _
                            ByVal rAlign As HowAlign, _
                            Optional ByVal iMargin As Integer = 0, _
                            Optional ByVal iSpacer As Integer = 0)

        If aObjects.Equals(Nothing) Then Exit Sub
        If aObjects.Count = 0 Then Exit Sub

        Dim CountOfControls As Integer = aObjects.Count

        Dim cContainer As Control = CType(aObjects.Item(0), Control).Parent
        Dim WidthOfContainer As Integer = cContainer.Width
        Dim HeightOfContainer As Integer = cContainer.Height
        Dim WidthOfControlli As Integer = 0
        Dim HeightOfControlli As Integer = 0

        Dim o As Control
        For Each o In aObjects
          WidthOfControlli += o.Width
          HeightOfControlli += o.Height
        Next

        Dim VariablePosition As Integer = 0
        Dim FixedPosition As Integer = 0

        Select Case rType
          Case HowReorder.Horizontal
            VariablePosition = iMargin
            FixedPosition = Convert.ToInt32((HeightOfContainer - o.Height) / 2)
            For Each o In aObjects
              o.Left = VariablePosition
              o.Top = FixedPosition
              If rAlign = HowAlign.Center Then 
                  iSpacer = Convert.ToInt32((WidthOfContainer - _
                            WidthOfControlli - iMargin) / (CountOfControls + 1))
              VariablePosition = VariablePosition + iSpacer + o.Width
            Next
          Case HowReorder.Vertical
            VariablePosition = iMargin
            FixedPosition = Convert.ToInt32((WidthOfContainer - o.Height) / 2)
            For Each o In aObjects
              o.Top = VariablePosition
              o.Left = FixedPosition
              If rAlign = HowAlign.Center Then
                  iSpacer = Convert.ToInt32((HeightOfContainer - _
                            HeightOfControlli - iMargin) / (CountOfControls + 1))
              VariablePosition = VariablePosition + iSpacer + o.Width
            Next
        End Select

      End Sub

    End Class

The HoverButtonBand container can fully control the position of the buttons vertically or horizontally. This is very interesting. This is achieved with the properties AutoArrange, AutoArrangeDirection, AutoArrangeAlignment, AutoArrangeButtonSpace, and AutoArrangMargin.

The graphic look

As it's noticeable, I've put particular attention to the graphic and chromatic appearance of the controls. I think I reached a good result. As part of the properties dedicated to the graphic look of the controls, for example, I've implemented a new property (TextQuality) that allows you to set the way the texts are drawn. TextQuality can be set as SystemDefault, AntiAlias or ClearType. Changing these settings to AntiAlias or ClearType can lightly reduce drawing speed, but the result is great.

HoverGradientButton main properties

• ButtonType

  Enum. Use HoverNormal for using as normal flat Button. Use HoverCheck for use as CheckBox. Use HoverOption for use as RadioButton.

• OptionGroup

  Integer. When ButtonType is equal to RadioButton this number indicates the group of alternative options inside a group of options.

• BackColor1 and BackColor2

  Color. The first and the second color of the button (gradient colors) when the mouse is not over the control.

• HoverColor1 and HoverColor2

  Color. The first and the second color of the button (gradient colors) when the mouse is over the control.

• SelectedColor1 and SelectedColor2

  Color. The first and the second color of the button (gradient colors) when the control is selected (ButtonType, HoverCheck or HoverOption) and mouse is not over the control.

• SelectedHoverColor1 and SelectedHoverColor2

  Color. The first and the second color of the button (gradient colors) when the control is selected (ButtonType, HoverCheck or HoverOption) and mouse is over the control.

• ClickColor1 and ClickColor2

  Color. The first and the second color of the button (gradient colors) when the mouse is clicked on the control.

• Image

  Image. The image drawn on the button.

• ImageSelected

  Image. The image drawn on the button when the control is selected (ButtonType, HoverCheck or HoverOption).

• HoverForeColor

  Color. Color of the text when the mouse is over the control.

• Selected

  Boolean. The value of the button when the control is selected (ButtonType, HoverCheck or HoverOption).

• OptionGroup

  Integer. The group of the button when ButtonType property is HoverOption.

• ToolTipActive

  Boolean. Indicates if ToolTip is active or not.

• ToolTipText

  String. The text displayed as ToolTip when the cursor is over the button.

HoverButtonBand main properties

• BackColor1 and BackColor1

  Color. The first and the second color (gradient colors) of the container (Band).

• AutoArrange

  Boolean. Controls if the contained buttons are to be automatically aligned or not.

• AutoArrangeDirection

  Enum. Horizontal or Vertical. Controls the direction of the alignment.

• AutoArrangeAlignment

  Enum. Controls the alignment of the contained buttons. Can be Center or LeftOrTop (depends on the direction determined by AutoArrangeDirection).

• AutoArrangeButtonSpace

  Integer. The distance between the contained buttons.

• AutoArrangeMargin

  Integer. The margin of the group of buttons.

Using the controls

As mentioned above, the use of the controls is very easy and intuitive. You can also use the HoverGradientButton and the HoverButtonBand as stand-alone controls. However, I suggest to use them together. Please note that the best graphical effect is reached with a button size of 24x24 containing a 16x16 image, or a button size of 40x40 containing a 32x32 image (if you plan to use no text). A HoverButtonBand width (or height for vertical placement) same as the inner HoverGradientButton will give you the best graphical and chromatic effect. I strongly suggest use of PNG images instead of ICO or BMP, and avoiding use of multiformat icons.

Using HoverGradientButton as CheckBox

Setting ButtonType=HoverCheck will make HoverGradientButton act as a CheckBox. When it is checked, the Selected property becomes True and the image changes (if you set an image to ImageSelected property). The control remains selected until the button is clicked again.

Using HoverGradientButton as RadioButton

Setting ButtonType=HoverOption will make HoverGradientButton act as a RadioButton. When it is checked, the Selected property becomes True and the image changes (if you set an image to ImageSelected property). All other controls having the same OptionGroup property lose the selected state (Selected=False) and the color is set back to BackColor1 and BackColor2.

This is how ButtonType=HoverCheck and ButtonType=HoverOptions are managed by the code:

    Private Sub HoverGradientButton_Click(ByVal sender As Object, _
                ByVal e As System.EventArgs) Handles MyBase.Click

      If mButtonType = HoverButtonType.HoverNormal Then Exit Sub
      If mButtonType = HoverButtonType.HoverOption Then
        If Not mSelected Then
          mSelected = True
          'Uncheck other buttons

          ClearOptionButtons.Clear(Me)
        End If
      Else
        mSelected = Not mSelected
      End If

    End Sub

IButtonControl interface

The IButtonControl interface allows HoverButtonBar to work as a conventional button. A control that implements the IButtonControl interface is recognized, for example, by the AcceptButton and CancelButton properties of a Form. Now HoverButton implements correctly the IButtonCommand interface.

Known problems

The only problem I know is the order of the buttons during automatic arrange inside the HoverButtonBar. Sometimes, one of the buttons goes to an apparently random position. This is because I actually don't have the full control of buttons order inside the HoverButtonBar ControlsCollection. Please drop me a line if you have some suggestions in order to solve this.

The future, the present

HoverButton and related controls has become part of a huge project called Naxos Development.

History

• May 24, 2005 - Original version (1.0)
• May 30, 2005 - Version 1.1
  • HoverGradientButton is no longer a container.
  • HoverGradientButton no longer displays grid at design time.
  • Added GradientMode to HoverButtonBand and HoverGradientButton.
  • Added TextQuality property to HoverButtonBand and HoverGradientButton.
  • Improved drawing speed.
  • Added class GS (Graphic Support) with shared methods for common GDI+ routines.
• June 6, 2005 - Version 1.1.7
  • Added GradientPanelXP component.
  • Minor enhancements and small bug fixes.
• June 21, 2005 - Version 1.2.0
  • Added ToolTip feature to the button.
• October, 7, 2006 - Version 1.3.1
  • Changed base class (from Panel to Control); more lightweight now.
  • If Enabled = False now Text and Image are correctly disabled (Enrico Detoma suggestion, thanks).
  • Implemented IButtonControl interface (merlin.AT suggestion, thanks).
  • Fixed ButtonsReorder error with vertical HowRedorder.Vertical (RichardJMoss suggestion, thanks).