Bunifu Icon Button

Overview

Bunifu Icon Button is an extra engaging icon control built with the underlying properties and methods of a Bunifu Button control. It lets you add a creative touch with interactive and pretty engaging icons for your user interface if you are looking to stand out. And the best part here too is that it has smooth transitional animations when hovered over or clicked. Let's take a look at an example of a user interface implementing the icon button.

Getting Started

This section describes adding Bunifu Icon Button at the designer level and during a runtime event.

Adding Bunifu Icon Button at Design-time

Bunifu Button is added to a Form by simply locating BunifuIconButton in your Visual Studio toolbox, and dragging it to the form as demonstrated below.

Adding Bunifu Icon Button at Run-time

To add Bunifu Icon Button at runtime, we will use the Form's load event to instantiate BunifuIconButton class and add it to the form as shown in the codes below:

private Image GetIconFromFolder()
{   //get image from a folder by getting its path
    string imagePath = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments),
        @"icons\sample-icon.ico");
    //get the image by passing the path to the Image.FromFile() method
    var image = Image.FromFile(imagePath);
    return image;
}
private void Form_Load(object sender, EventArgs e)
{
    //instantiate the icon button using using Bunifu.UI.WinForms.BunifuButton;
    BunifuIconButton iconButton = new BunifuIconButton();
    //set the icon button size
    iconButton.Size = new Size(52, 52);
    iconButton.BackgroundColor = Color.DodgerBlue;
    iconButton.BorderColor = Color.DodgerBlue;
    //set color contrast on click and on hover
    iconButton.ColorContrastOnClick = 40;
    iconButton.ColorContrastOnHover = 40;
    iconButton.Location = new Point(295, 168);
    //set the icon
    iconButton.Image = GetIconFromFolder();
    //add the icon button in the form
    this.Controls.Add(iconButton);

Option Infer On

Private Function GetIconFromFolder() As Image 'get image from a folder by getting its path
	Dim imagePath As String = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments), "icons\sample-icon.ico")
	'get the image by passing the path to the Image.FromFile() method
	Dim image As System.Drawing.Image = System.Drawing.Image.FromFile(imagePath)
	Return image
End Function
Private Sub Form_Load(ByVal sender As Object, ByVal e As EventArgs)
	'instantiate the icon button using using Bunifu.UI.WinForms.BunifuButton;
	Dim iconButton As New BunifuIconButton()
	'set the icon button size
	iconButton.Size = New Size(52, 52)
	iconButton.BackgroundColor = Color.DodgerBlue
	iconButton.BorderColor = Color.DodgerBlue
	'set color contrast on click and on hover
	iconButton.ColorContrastOnClick = 40
	iconButton.ColorContrastOnHover = 40
	iconButton.Location = New Point(295, 168)
	'set the icon
	iconButton.Image = GetIconFromFolder()
	'add the icon button in the form
'INSTANT VB TODO TASK: The following line uses invalid syntax:
 	Me.Controls.Add(iconButton)

Properties

Image Properties

Image

This property allows you to set an image that will be displayed as an icon in the button. You can easily set the image by accessing the Choose Image option in the smart tag as shown below.

You can as well set the image using code. Here's how you can assign an icon to its image property:

private void Form1_Load(object sender, EventArgs e)
{
    var imagePath= Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments),
    @"icons\sample-icon.ico");
    var image = Image.FromFile(imagePath);
    bunifuIconButton.Image = image;
}

Option Infer On

Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
	Dim imagePath= Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments), "icons\sample-icon.ico")
	Dim image As System.Drawing.Image = System.Drawing.Image.FromFile(imagePath)
	bunifuIconButton.Image = image
End Sub

ImageMargin

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

Border Properties

1. ShowBorders

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

2. BorderColor

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

3. AllowBorderColorChanges

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

4. RoundBorders

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

5. BorderRadius

This property enables you to set a value (integer) that determines the roundness of the button's border. This is applicable if the Style property is set to Flat and the RoundBorders property set to true.

6.BorderStyle

This property allows you to set a style (enumeration) for the button's border. The enumeration defines the following values: Solid, Dash, Dot, DashDot, DashDotDot. By default, the property is set to Solid. Now, to be able to use and see the other border styles, ensure that the BorderThickness prop is set with at least a value of 2.

7. BorderThickness

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

8. 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 icon buttons. The roundness of an edge will depend on the value set on the BorderRadius prop.

Background properties

1. BackColor

This property allows you to set the background color of the icon button with an RGB or a HEX color value. The color will change on hover and click states depending on the amount of contrast set on ColorContrastOnHover and ColorContrastOnClick props.

2. Style

This property allows you to set the style (enumeration) of the icon's 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 icon button.

3. AllowMouseEffects

This property allows you to set a value (boolean) that determines whether the color changes will be displayed when there is a mouse hover or mouse click event on the icon button. By default, the property is set to true.

4. ColorContrastOnHover

This property enables you to set a value (integer) that determines the amount of lightness or darkness of the background color whenever a mouse hover event occurs. By default, the value is set to 30. It is recommended that you use a value between 0 to -100 (which renders darker colors ) and 1 to 100 (which renders lighter colors).

5. ColorContrastOnClick

This property enables you to set a value (integer) that determines the amount of lightness or darkness of the background color whenever a mouse click event occurs. By default, the value is set to 30. It is recommended that you use a value between 0 to -100 (which renders lighter colors ) and 1 to 100 (which renders darker colors).

Animation properties

1. AllowCustomAnimation

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

2. AnimationSpeed

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

Take Away

Bunifu Icon Button is very optimized in design thus reducing the developer’s work on creating interactive icons. Developers can now concentrate on customizing the icons as per their design requirements. We hope that you'll get to improve the appearance and feel of your UI while also providing a better user experience using Bunifu Icon Buttons. If you have feedback or recommendations, please contact us via chat in the bottom right corner of the screen and we will gladly reach out to you.