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:
BorderProperties
BorderColor
BorderColor
This property enables you to set the outline color of the control with an RGB or a HEX color value.
BorderHoverColor
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
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
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
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
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
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
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
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
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
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
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
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
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:
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:
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:
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:
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
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.
Last updated