Custom Button Control with Gradient Colors and Extra Image (VB.NET)

• Download source code - 163.47 KB

Introduction

The CButton is a simple custom button control written in VB.NET. Sorry I didn't realize the "C" prefix was a language specific thing when I started. It is just short for Custom Button. I won't let it happen agian. Good for a quick alternative to the plain button. It supports up to three color gradient options.

Here is a list of the other features:

1. Change corners from square to arc to circle.
2. Text shadow and margin.
3. Adjustable rollover and click color change with simulated click movement.
4. Normal button image and/or additional sideimage

Background

Here is another example of needing (well, let's be honest, a plain button would work, so I wanted) a better looking and visually versatile button. There are a lot of great button controls already, but not with all the features I was looking for. Basically, I created the properties I was looking for, and then took over the OnPaint to draw it the way I wanted.

Control Properties

Here is a list of the primary properties:

• BorderColor, BorderShow

  Show the border in a different color

• ButtonColorA, B, and C

  Colors to use in coloring the CButton

• ButtonStyle

  What color gradient type to use

• CornerRadius

  Radius for corner arc

• DimFactorHover, DimFactorClick

  Number to adjust the buttons color during mouse rollover and click

• TextShadow, ForeColorShadow

  Show or not show the shadow of the text and in what color

• TextMargin

  Push the text away from the inside edge of the button

• SideImage

  Add an extra image that can be placed outside the button surface

Using the Code

Once you get the CButton designed the way you want, there isn't really any complicated code. Just use it like a normal button.

Points of Interest

The control is just a process of layering the parts together in the right positions. There are four main areas to track. The control area, button area, text area, and image area. The button area is reduced from the control area by the control padding values. The text area is reduced from the button area by the text margin values and the image area. The image area is based on the image size. The items are placed into these areas based on their layout options.

Protected Overrides Sub _
          OnPaint(ByVal e As System.Windows.Forms.PaintEventArgs)
    e.Graphics.SmoothingMode = SmoothingMode.AntiAlias

    Dim MyPen As New Pen(BorderColor)
    MyPen.Alignment = PenAlignment.Inset

    'Shrink the Area so the Border draws correctly
    'Then trim off the Padding to get the button surface area
    ButtonArea = AdjustRect(New Rectangle(0.5, 0.5, _
    Me.Size.Width - 1, Me.Size.Height - 1), Me.Padding)

    If Me.BackgroundImage Is Nothing Then
        e.Graphics.FillPath(GetBrush(AdjustRect(Me.DisplayRectangle, _
            Me.Padding)), GetRoundedRectPath(ButtonArea))
    End If

    If BorderShow Then
        If ButtonStyle = eButtonStyle.BlendEllipse Then
            e.Graphics.DrawEllipse(MyPen, ButtonArea)
        Else
            e.Graphics.DrawPath(MyPen, GetRoundedRectPath(ButtonArea))
        End If
    End If

    'Put the SideImage behind the Text
    If SideImageBehindText AndAlso Not Me.SideImage Is Nothing Then
        Dim bm As New Bitmap(Me.SideImage, Me.SideImageSize.Width, _
    Me.SideImageSize.Height)
        e.Graphics.DrawImage(bm, _
            ImagePoint(GetStringFormat(Me.SideImageAlign), _
            Me.Size, Me.SideImageSize))
    End If

    'Layout the Text and Image on the button surface
    SetImageAndText(e.Graphics)

    If Not Me.Image Is Nothing Then
        Dim bm As New Bitmap(Me.Image, Me.ImageSize)
        e.Graphics.DrawImage(bm, Imagept)
    End If

    If TextShadow Then
        TextArea.Offset(1, 1)
        e.Graphics.DrawString(Me.Text, Me.Font, _
             New SolidBrush(ForeColorShadow), _
    TextArea, GetStringFormat(Me.TextAlign))
        TextArea.Offset(-1, -1)
    End If
    e.Graphics.DrawString(Me.Text, Me.Font, New SolidBrush(Me.ForeColor), _
    TextArea, GetStringFormat(Me.TextAlign))

    'Put the SideImage in front of the Text
    If Not SideImageBehindText AndAlso Not Me.SideImage Is Nothing Then
        Dim bm As New Bitmap(Me.SideImage, _
    Me.SideImageSize.Width, Me.SideImageSize.Height)
      e.Graphics.DrawImage(bm, ImagePoint(GetStringFormat(Me.SideImageAlign), _
    Me.Size, Me.SideImageSize))
    End If

    MyPen.Dispose()
End Sub

Because the Click event fires if you click anywhere on the control, I added the ClickButtonArea Event in Version 1.1 to fire only when the mouse clicks inside the button part of the control.

    'Add a new Click event for only when the ButtonArea is Clicked
    Public Event ClickButtonArea(ByVal Sender As Object, ByVal e As EventArgs)

    Private Sub CButton_MouseDown(ByVal sender As Object,
        ByVal e As System.Windows.Forms.MouseEventArgs) Handles Me.MouseDown
        If IsMouseOverButton(e.X, e.Y) Then
            MouseDrawState = eMouseDrawState.Down
            Me.Invalidate()
            RaiseEvent ClickButtonArea(Me, New EventArgs)
        End If
    End Sub

History

• Version 1.0 - May 2008
• Version 1.1 - July 2008 - Updated "Clickable Region" and added a ClickButtonArea event