Glass Style Button With Dropdown MenuList Using VB.NET

This article provides a User Control to replace the standard Button with many properties and much versatility.

 

Introduction

Why another Button? The standard Button is too limited in functionality and I couldn't find a custom control written that did all that I wanted. This is a User Control with many properties and versatility. It is simple to use, just drop it onto the form, adjust the design time properties and use it like the normal Button.

Background

MBGlassButton is a Button that inherits all the properties of a simple Button control. I added some extra functionalities in MBGlassButton like Glow, Split, Highlight and so on. The language used is VB.NET.

Control Properties

Here is the list of properties available in MBGlassButton:

  • Arrow: This property sets the arrow on the MBGlassButton.
  • BaseColor: This property sets the Base Color of the MBGlassButton.
  • BaseStrokeColor: This property sets the Base Stroke color of the MBGlassButton.
  • OnColor: This property sets the on color of the MBGlassButton.
  • OnStrokeColor: This property sets the On Stroke color of the MBGlassButton.
  • PressColor: This property sets the Press Color of the MBGlassButton.
  • PressStrokeColor: This property sets the Press Stroke Color of the MBGlassButton.
  • ShowBase: This property shows the Glow on the MBGlassButton.
  • Radius: This property sets the corner Radius of the MBGlassButton.
  • SplitButton: This property splits the MBGlassButton into two parts.
  • SplitDistance: This property sets the Split Distance of the MBGlassButton.
  • SplitLocation: This property splits the MBGlassButton at a specific location.

Code

 
 
The concept for this Button came from the Vista "Button" or Windows 7 “Button”. I organized my paint event into layers like this:
  1. Protected Overrides Sub OnPaint(ByVal pevent As System.Windows.Forms.PaintEventArgs)  
  2.         Dim g As Graphics = pevent.Graphics  
  3.         g.SmoothingMode = SmoothingMode.HighQuality  
  4.         g.InterpolationMode = InterpolationMode.High  
  5.         Dim r As Rectangle = New Rectangle(New Point(-1, -1), _  
  6.     New Size(Me.Width + _radius, Me.Height + _radius))  
  7.         Dim path As GraphicsPath = New GraphicsPath  
  8.         Dim rp As Rectangle = New Rectangle(New Point(0, 0), _  
  9.     New Size(Me.Width - 1, Me.Height - 1))  
  10.         DrawArc(rp, path)  
  11.         FillGradients(g, path)  
  12.         DrawImage(g)  
  13.         DrawText(g)  
  14.         DrawArrow(g)  
  15. End Sub 
The following are some methods that provide a transparent look to the MBGlassButton. This method draws the background for the MBGlassButton.
  1. Protected Overrides Sub OnCreateControl()  
  2.         MyBase.OnCreateControl()  
  3.         A0 = BaseColor.A  
  4.         R0 = BaseColor.R  
  5.         G0 = BaseColor.G  
  6.         B0 = BaseColor.B  
  7.         _colorStroke = _baseStroke  
  8.         Dim r As Rectangle = New Rectangle(New Point(-1, -1), _  
  9.         New Size(Me.Width + _radius, Me.Height + _radius))  
  10.         If Me.Size <> Nothing Then  
  11.             Dim pathregion As GraphicsPath = New GraphicsPath  
  12.             DrawArc(r, pathregion)  
  13.             Me.Region = New Region(pathregion)  
  14.         End If  
  15. End Sub 
This method draws the background shadow for the MBGlassButton:
  1. Public Sub DrawShadow(ByVal re As Rectangle, ByVal pa As GraphicsPath)  
  2.         Dim _radiusX0Y0 As Integer = _radius, _radiusXFY0 _  
  3.     As Integer = _radius, _radiusX0YF _  
  4.             As Integer = _radius, _radiusXFYF As Integer = _radius  
  5.         Select Case _grouppos  
  6.             Case MB_GroupPos.Left  
  7.                 _radiusXFY0 = 1  
  8.                 _radiusXFYF = 1  
  9.             Case MB_GroupPos.Center  
  10.                 _radiusX0Y0 = 1  
  11.                 _radiusX0YF = 1  
  12.                 _radiusXFY0 = 1  
  13.                 _radiusXFYF = 1  
  14.             Case MB_GroupPos.Right  
  15.                 _radiusX0Y0 = 1  
  16.                 _radiusX0YF = 1  
  17.             Case MB_GroupPos.Top  
  18.                 _radiusX0YF = 1  
  19.                 _radiusXFYF = 1  
  20.             Case MB_GroupPos.Bottom  
  21.                 _radiusX0Y0 = 1  
  22.                 _radiusXFY0 = 1  
  23.         End Select  
  24.         pa.AddArc(re.X, re.Y, _radiusX0Y0, _radiusX0Y0, 180, 90)  
  25.         pa.AddArc(re.Width - _radiusXFY0, re.Y, _radiusXFY0, _radiusXFY0, 270, 90)  
  26.         pa.AddArc(re.Width - _radiusXFYF, _  
  27.         re.Height - _radiusXFYF, _radiusXFYF, _radiusXFYF, 0, 90)  
  28.         pa.AddArc(re.X, re.Height - _radiusX0YF, _radiusX0YF, _radiusX0YF, 90, 90)  
  29.         pa.CloseFigure()  
  30. End Sub 
This method handles the Menu List Rendering for the MBGlassButton:
  1. Protected Overrides Sub OnRenderMenuItemBackground_  
  2. (ByVal e As System.Windows.Forms.ToolStripItemRenderEventArgs)  
  3.         If e.Item.Selected Then  
  4.             Dim g As Graphics = e.Graphics  
  5.             g.SmoothingMode = SmoothingMode.HighQuality  
  6.             Dim pa As GraphicsPath = New GraphicsPath()  
  7.             Dim rect As Rectangle = New Rectangle_  
  8.         (2, 1, e.Item.Size.Width - 2, e.Item.Size.Height - 1)  
  9.             DrawArc(rect, pa)  
  10.             Dim lgbrush As LinearGradientBrush = New LinearGradientBrush_  
  11.             (rect, Color.White, Color.White, LinearGradientMode.Vertical)  
  12.             Dim pos As Single() = New Single(3) {0.0F, 0.4F, 0.45F, 1.0F}  
  13.             Dim colors As Color() = New Color(3) {GetRendererColor(0, 50, 100), _  
  14.             GetRendererColor(0, 0, 30), Color.FromArgb(R0, G0, B0), _  
  15.         GetRendererColor(0, 50, 100)}  
  16.             Dim mix As ColorBlend = New ColorBlend()  
  17.             mix.Colors = colors  
  18.             mix.Positions = pos  
  19.             lgbrush.InterpolationColors = mix  
  20.             g.FillPath(lgbrush, pa)  
  21.             g.DrawPath(New Pen(StrokeColor), pa)  
  22.             lgbrush.Dispose()  
  23.         Else  
  24.             MyBase.OnRenderMenuItemBackground(e)  
  25.         End If  
  26.     End Sub 

Using the Code

 
Just add a new Context Menu Strip to the application and set it to MBGlassButton Context Menu Strip Property.
 
 
 
It is very easy to use the MBGlassButton in your application. Simply add the reference of the provided DLL to your application and just drag and drop.

History

  • 12 April 2015 : MBGlassButton Version 1.0