Bunifu Icon Button

Bunifu Framework Docs

Home Pricing FAQs My Account

Search…

Introduction

Getting started

BUNIFU CHARTS

BUNIFU DATAVIZ [Deprecated]

Basic Charts [Deprecated]

Advanced Charts [Deprecated]

Bunifu Icon Button

Craftily visualize stylish, flawless button icons with smooth, sleek hover and click effects

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:
C#
VB.NET
1
private Image GetIconFromFolder()
2
{   //get image from a folder by getting its path
3
    string imagePath = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments),
4
        @"icons\sample-icon.ico");
5
    //get the image by passing the path to the Image.FromFile() method
6
    var image = Image.FromFile(imagePath);
7
    return image;
8
}
9
private void Form_Load(object sender, EventArgs e)
10
{
11
    //instantiate the icon button using using Bunifu.UI.WinForms.BunifuButton;
12
    BunifuIconButton iconButton = new BunifuIconButton();
13
    //set the icon button size
14
    iconButton.Size = new Size(52, 52);
15
    iconButton.BackgroundColor = Color.DodgerBlue;
16
    iconButton.BorderColor = Color.DodgerBlue;
17
    //set color contrast on click and on hover
18
    iconButton.ColorContrastOnClick = 40;
19
    iconButton.ColorContrastOnHover = 40;
20
    iconButton.Location = new Point(295, 168);
21
    //set the icon
22
    iconButton.Image = GetIconFromFolder();
23
    //add the icon button in the form
24
    this.Controls.Add(iconButton);
Copied!
​
1
Option Infer On
2
​
3
Private Function GetIconFromFolder() As Image 'get image from a folder by getting its path
4
	Dim imagePath As String = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments), "icons\sample-icon.ico")
5
	'get the image by passing the path to the Image.FromFile() method
6
	Dim image As System.Drawing.Image = System.Drawing.Image.FromFile(imagePath)
7
	Return image
8
End Function
9
Private Sub Form_Load(ByVal sender As Object, ByVal e As EventArgs)
10
	'instantiate the icon button using using Bunifu.UI.WinForms.BunifuButton;
11
	Dim iconButton As New BunifuIconButton()
12
	'set the icon button size
13
	iconButton.Size = New Size(52, 52)
14
	iconButton.BackgroundColor = Color.DodgerBlue
15
	iconButton.BorderColor = Color.DodgerBlue
16
	'set color contrast on click and on hover
17
	iconButton.ColorContrastOnClick = 40
18
	iconButton.ColorContrastOnHover = 40
19
	iconButton.Location = New Point(295, 168)
20
	'set the icon
21
	iconButton.Image = GetIconFromFolder()
22
	'add the icon button in the form
23
'INSTANT VB TODO TASK: The following line uses invalid syntax:
24
 	Me.Controls.Add(iconButton)
25
​
26
​
Copied!
​
The icon button added at run-time upon execution of the above code.
Let's deep dive and get insights into the available properties on Bunifu Icon Button.
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:
C#
VB.NET
1
private void Form1_Load(object sender, EventArgs e)
2
{
3
    var imagePath= Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments),
4
    @"icons\sample-icon.ico");
5
    var image = Image.FromFile(imagePath);
6
    bunifuIconButton.Image = image;
7
}
Copied!
1
Option Infer On
2
​
3
Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
4
	Dim imagePath= Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments), "icons\sample-icon.ico")
5
	Dim image As System.Drawing.Image = System.Drawing.Image.FromFile(imagePath)
6
	bunifuIconButton.Image = image
7
End Sub
8
​
Copied!
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.
To use the property, ensure that the RoundBorders property is set to true and the style property is set to flat. 
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.
​