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:
GS.PaintGradientRectangle(e.Graphics, 0, 0, Me.Width, Me.Height, _
c1, c2, mGradientMode)
e.Graphics.DrawImage(mImage, p.X, p.Y, mImage.Width, mImage.Height)
GS.WriteText(e.Graphics, Me.Text, Me.Font, _
Me.TextAlign, _
mTextQuality, _
Me.ForeColor, _
0, 0, Me.Width, Me.Height)
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
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).
