Glass Style Button With Dropdown MenuList


MBGlassButton_Demo.JPG

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 lots of properties and versatility. It is simple to use, just drop it on the form, adjust the design time properties, and use it like the normal Button.

Background

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

Control Properties

Here is the list of properties available in MBGlassButton:

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

Code

MBGlassButtonControl.jpg

The concept for this Button came from the Vista ‘Button’ or Windows 7 “Button”. I organized my paint event into layers like this:

Protected Overrides Sub OnPaint(ByVal pevent As System.Windows.Forms.PaintEventArgs)
        Dim g As Graphics = pevent.Graphics
        g.SmoothingMode = SmoothingMode.HighQuality
        g.InterpolationMode = InterpolationMode.High
        Dim r As Rectangle = New Rectangle(New Point(-1, -1), _
	New Size(Me.Width + _radius, Me.Height + _radius))
        Dim path As GraphicsPath = New GraphicsPath
        Dim rp As Rectangle = New Rectangle(New Point(0, 0), _
	New Size(Me.Width - 1, Me.Height - 1))
        DrawArc(rp, path)
        FillGradients(g, path)
        DrawImage(g)
        DrawText(g)
        DrawArrow(g)
End Sub

Following are some methods which provide a transparent look to MBGlassButton. This method draws the background for MBGlassButton.

Protected Overrides Sub OnCreateControl()
        MyBase.OnCreateControl()
        A0 = BaseColor.A
        R0 = BaseColor.R
        G0 = BaseColor.G
        B0 = BaseColor.B
        _colorStroke = _baseStroke
        Dim r As Rectangle = New Rectangle(New Point(-1, -1), _
		New Size(Me.Width + _radius, Me.Height + _radius))
        If Me.Size <> Nothing Then
            Dim pathregion As GraphicsPath = New GraphicsPath
            DrawArc(r, pathregion)
            Me.Region = New Region(pathregion)
        End If
End Sub

This method handles the Menu List Rendering for MBGlassButton:

Protected Overrides Sub OnRenderMenuItemBackground_
(ByVal e As System.Windows.Forms.ToolStripItemRenderEventArgs)
        If e.Item.Selected Then
            Dim g As Graphics = e.Graphics
            g.SmoothingMode = SmoothingMode.HighQuality
            Dim pa As GraphicsPath = New GraphicsPath()
            Dim rect As Rectangle = New Rectangle_
		(2, 1, e.Item.Size.Width - 2, e.Item.Size.Height - 1)
            DrawArc(rect, pa)
            Dim lgbrush As LinearGradientBrush = New LinearGradientBrush_
            (rect, Color.White, Color.White, LinearGradientMode.Vertical)
            Dim pos As Single() = New Single(3) {0.0F, 0.4F, 0.45F, 1.0F}
            Dim colors As Color() = New Color(3) {GetRendererColor(0, 50, 100), _
            GetRendererColor(0, 0, 30), Color.FromArgb(R0, G0, B0), _
		GetRendererColor(0, 50, 100)}
            Dim mix As ColorBlend = New ColorBlend()
            mix.Colors = colors
            mix.Positions = pos
            lgbrush.InterpolationColors = mix
            g.FillPath(lgbrush, pa)
            g.DrawPath(New Pen(StrokeColor), pa)
            lgbrush.Dispose()
        Else
            MyBase.OnRenderMenuItemBackground(e)
        End If
    End Sub

Using the Code

MBGlassButtonMenuLists.jpg

Just add new context Menu Strip in your application and set it to MBGlassButton Context Menu Strip Property.

MBGlassButtonInToolBox.jpg

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.

Downloads

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s