Bunifu Form Caption Button

Stylish, flawless caption button with extra engaging smooth, elegant hover and click effects

Overview

Bunifu Form Caption Button is a rich caption control that lets you control the visual state of a form. It has only one caption style and is, therefore an alternative to Bunifu Form Control Box, which has three or four caption styles and can therefore be used instead of Bunifu Form Control Box. You are free to combine several caption buttons to control the visual state of the form as you wish. Here is an overview of the different caption buttons you can use in your form:

Just like Bunifu Form Control Box, it includes the Minimize, Maximize/Restore, Help and Close caption styles to set the visual state of a borderless Windows form. With this control, you can get the most out of your caption bar.

Getting started

Adding Bunifu Form Caption Button at design time

It's easy to add Bunifu Form Caption Button control at design time. Start by locating BunifuCaptionButton in your toolbox and simply drag it to your form as shown below then customize it to your desired look and feel using properties that will be elaborated on later in this article:

Let's take a deep dive and get insights into the properties that are available on Bunifu Form Caption Button.

Properties

The following properties control the appearance of the Bunifu Form Caption Button. You can easily set them using the Smart-tags option or the Properties panel in the Windows Form Designer view:

Caption Button Properties on Smart tags

BorderProperties

BorderColor

This property enables you to set the outline color of the control with an RGB or a HEX color value.

BorderHoverColor

This property enables you to set the outline color of the control with an RGB or a HEX color value whenever the mouse hovers over the control.

BorderRadius

This property allows you to set a value (integer) that determines the roundness of the control's border.

This is applicable if the Style property is set to Flat and the RoundBorders property set to true.

BorderStyle

This property allows you to set the outline style of the control. It has the following enumerated values: Solid, DashDot, Dash, DashDot, DashDashDot

Nb: This property is set with the default Solid property, so other values can be rendered on the control depending on the thickness of the border and its border color.

BorderThickness

This property allows you to set a value (integer) that determines the border weight of the control. The greater the value the more the border weight that will be rendered on the button. By default, the thickness is set to 1.

RoundBorders

This property allows you to get or set a boolean value, which determines whether you can apply a border radius on the caption button when its Style prop is set to Flat. By default, the property is set to true.

ShowBorders

This property allows you to display the border-color outlines and the border style of the Icon button when set to true.

AllowBorderColorChanges

This property when set to true, allows contrast color changes to the outline of the button when hovered over or clicked upon. The amount of contrast is determined by the value set to ColorContrastOnHover and ColorContrastOnClick properties

Image/Icon Properties

IconColor

This property gets or sets a color overlay on the icon/image set on the caption button. It accepts the use of both the HEX and RGB color formats.

IconHoverColor

This property gets or sets a color overlay on the icon/image set on the caption button when the mouse hovers over the control. It accepts the use of HEX and RGB color formats

IconPressedColor

This property gets or sets a color overlay on the icon/image set on the caption button. It accepts the use of both the HEX and RGB color formats.

Image

This property gets or sets the image to be used as the icon for the caption button.

To specify an image for the caption box, click on the ellipsis button located on the value of this property, which will bring up an options dialog box where you can select the desired image. The size of the image should be 3/4 of the size of the button so that the image on the button is not blurred.

ImageMargin

This property allows you to set the position of the image within the caption button's border giving you control of your desired look and feel.

ImageSize

This property gets or sets both the height and width of the icon set on the caption button. The default value is 20 for both the height and width properties.

Button Properties

BackColor

This property gets or sets the background color of the caption button. It accepts the use of both the HEX and RGB color formats.

BackPressedColor

This property gets or sets the background color of the caption button when the mouse is clicked on the caption button. It accepts the use of HEX and RGB color formats.

BackHoverColor

This property gets or sets the background color of the caption button when the mouse is hovered on the caption button. It accepts the use of HEX and RGB color formats.

ColorContrastOnClick

This property allows you to set a value (integer) that determines the brightness or darkness of the background/border color of the caption button when a mouse click event occurs on the button. By default, the value is set to 30. It is recommended to use a value between 0 to -100 (for darker colors) and 1 to 100 (for lighter colors).

ColorContrastOnHover

This property allows you to set a value (integer) that determines the brightness or darkness of the background/border color of the caption button when a mouse hover event occurs on the button. By default, the value is set to 30. It is recommended to use a value between 0 to -100 (for darker colors) and 1 to 100 (for lighter colors).

CustomizableEdges

This property contains various edge position properties that allow you to determine which edges will have a rounded border. When a specific edge property is set to false, no radius value is applied to that edge, thus giving you an opportunity to create stylish caption buttons.

The roundness of an edge will depend on the value set on the BorderRadius prop.

To USE this property, ensure that the RoundBorders property is set to true and thestyle property is set to flat.

DialogResult

This property allows you to set a dialog result when the control is used with a dialog form. By default, the property is set with the value none as the dialog result. You can set your preference for a dialog result with the following values: OK, Cancel, Abort, Retry, Ignore, Yes, No, TryAgain and Continue

Style

This property allows you to set the style (enumeration) of the caption button appearance. The enumeration defines the following values: round which renders the button as a circular shape and the flat value which renders a squared-shaped caption button.

CaptionType

This property allows you to get or set the caption style of the button. Its styles are defined in the following values:

• Minimize - this value renders a minus icon on the caption button. You can code the click event of the button to minimize the Windows Form to the taskbar when the button is clicked as shown below:

C#

private void MinimizeCaption_Click(object sender, EventArgs e)
{
   this.WindowState = FormWindowState.Minimized;
}

VB.NET

Private Sub MinimizeCaption_Click(ByVal sender As Object, ByVal e As EventArgs)
   Me.WindowState = FormWindowState.Minimized
End Sub

• Maximize - this value renders a maximize icon on the caption button. Code its click event to enlarge the window to occupy the entire screen or restore a form when the button is clicked as shown below:

C#

private void MaximizeCaption_Click(object sender, EventArgs e)
{
    if (WindowState == FormWindowState.Maximized)
    {
        this.WindowState = FormWindowState.Normal;
    }
    else{
         Rectangle workingArea = Screen.GetWorkingArea(this);
         this.MaximizedBounds = workingArea;
         this.WindowState = FormWindowState.Maximized;
    }
 }

VB.NET

Private Sub MaximizeCaption_Click(ByVal sender As Object, ByVal e As EventArgs)
	If WindowState = FormWindowState.Maximized Then
		Me.WindowState = FormWindowState.Normal
	Else
		 Dim workingArea As Rectangle = Screen.GetWorkingArea(Me)
		 Me.MaximizedBounds = workingArea
		 Me.WindowState = FormWindowState.Maximized
	End If
End Sub

• Close - this value renders a close (X) icon on the caption button. You will code its click event which will close the Windows Form when clicked. Here's the code that closes the form:

C#

private void CloseCaption_Click(object sender, EventArgs e)
{
   this.Close();
}

VB.NET

Private Sub CloseCaption_Click(ByVal sender As Object, ByVal e As EventArgs)
   Me.Close()
End Sub

• Help - this value renders a help icon on the caption button. You will code its click event which can open a process that can open a link to a browser or other window with your help resources. Here's a sample event code for the caption button:

C#

private void HelpCaption_Click(object? sender, EventArgs e)
{
    string defaultBrowserPath = GetDefaultBrowserPath();
    Process.Start(defaultBrowserPath, "https://docs2.bunifuframework.com/docs/ui/controls");
}

//get the default browser in windows
private string GetDefaultBrowserPath()
{
    //get the default browser from windows
    string userChoice = (string)Registry.GetValue(@"HKEY_CURRENT_USER\Software\Microsoft\Windows\Shell\Associations\UrlAssociations\http\UserChoice", "ProgId", null);
    string browserPath = (string)Registry.GetValue(@"HKEY_CLASSES_ROOT\" + userChoice + @"\shell\open\command", null, null);
    browserPath = browserPath.Replace("\"", "");
    browserPath = browserPath.Substring(0, browserPath.LastIndexOf(".exe") + 4);
    return browserPath;
}

VB.NET

Private Sub HelpCaption_Click(ByVal sender As Object, ByVal e As EventArgs)
	Dim defaultBrowserPath As String = GetDefaultBrowserPath()
	Process.Start(defaultBrowserPath, "https://docs2.bunifuframework.com/docs/ui/controls")
End Sub

'get the default browser in windows
Private Function GetDefaultBrowserPath() As String
	'get the default browser from windows
	Dim userChoice As String = CStr(Registry.GetValue("HKEY_CURRENT_USER\Software\Microsoft\Windows\Shell\Associations\UrlAssociations\http\UserChoice", "ProgId", Nothing))
	Dim browserPath As String = CStr(Registry.GetValue("HKEY_CLASSES_ROOT\" & userChoice & "\shell\open\command", Nothing, Nothing))
	browserPath = browserPath.Replace("""", "")
	browserPath = browserPath.Substring(0, browserPath.LastIndexOf(".exe") + 4)
	Return browserPath
End Function

Animation Properties

AllowAnimations

This property allows you to achieve a smooth, sleek transition between button states (i.e. default, hover, and pressed) over a specified duration. By default, the property is set to true.

AnimationSpeed

This property allows us to set the pace of animation of color changes when the button properties transition from one state to another. By default, the value is set to 200. The larger the value is, the slower the animation speed is.

Events

Below is an appropriate event to be used with the caption button:

Click

This event allows you to set an action when the mouse is clicked on the caption button. To set the action for this event, double-click the value field of the click event in the property panel, which then opens the code view, and you will find the click event defined for you so that you can code your preferred action that you need for the event.

You can also set the click event for the caption button using the form load event. Below is a code example that shows closing a custom dialog box and setting a dialog result to the form with the dialog result returned by the caption button.

C#

private void DialogForm_Load(object sender, EventArgs e)
{
    bunifuFormCaptionButton1.Click += BunifuFormCaptionButton1_Click;
}

private void BunifuFormCaptionButton1_Click(object sender, EventArgs e)
{
    this.DialogResult=bunifuFormCaptionButton1.DialogResult;
    this.Close();
}

VB.NET

 Private Sub Form2_Load(ByVal sender As Object, ByVal e As EventArgs)
	AddHandler bunifuFormCaptionButton1.Click, AddressOf BunifuFormCaptionButton1_Click
 End Sub

Private Sub BunifuFormCaptionButton1_Click(ByVal sender As Object, ByVal e As EventArgs)
	Me.DialogResult=bunifuFormCaptionButton1.DialogResult
	Me.Close()
End Sub