Comment on page
Bunifu Icon Button
Craftily visualize stylish, flawless button icons with smooth, sleek hover and click effects
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.
This section describes adding Bunifu Icon Button at the designer level and during a runtime event.
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.
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
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)
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.
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
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
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.
This property allows you to display the border-color outlines and the border style of the Icon button when set to true.
This property enables you to set the border outline color with an RGB or a HEX color value.
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 propertiesThis 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.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.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.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.
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. 
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.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. AllowMouseEffectsThis 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.
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).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).
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.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.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.
Last modified 2yr ago