Important: For new users and those migrating from a previous version, please note that you now won't need to set colors for the onHoverState and OnPressedState as the colors will be automatically generated for you whenever the property AutoGenerateColors is set to true. Also, the border-radius and border-thickness will be applied based on the default values.
Bunifu Button is truly one of a kind type of button. There's just so much you can achieve with this one control, and so effortlessly easy to customize you'd wonder how you lived without it... With over 12 design styles built right into it, all you need is a little bit of creativity and you're ready to craft something beautiful!
But let me not simply say this without giving you the facts...
From the sweet and simple state animations, to the border styling options, to using either text or icon button views, to the fluid curves and effects, and definitely not forgetting the overall look and feel of Bunifu Button, you can never miss out on building those great interfaces you've always craved to build.
Now, let's get straight into some of the best features included.
Firstly off, ensure you've added
Bunifu.UI.WinForms.BunifuButton.dll inside Visual Studio's Toolbox (don't you worry, we're working on including Toolbox additions in an upcoming release). Once done, simply locate
BunifuButton inside the Toolbox and drag it onto your Form.
You should then see something similar to this:
To quickly customize Bunifu Button, simply click on the Play button to access the Smart Tags feature and change the most common button properties:
Bunifu Button provides some really neat animations, transitioning users from one state to another using visual cues or feedbacks. They assist in notifying a change of state. These states include: Idle, Hover, and Pressed. These states are represented as:
OnHoverState , and
Here's an illustration of the three states in action:
As you can see, it move from Idle to Hover then finally to the Pressed state.
You can customize the animation speed using the
AnimationSpeed property. Setting this property to
1 disables the animation and lets the button move statically from one state to another.
Border Style Options
There are quite a number of impressive styling options for the border layout in Bunifu Buttons. The first styling option is provided by the
BorderStyle property which includes a number of variation options namely: Solid, Dash, and Dot.
These three options can be used from one state to another, for example, you can change the border style to Solid when transitioning from the idle state to the hover state or from the hover state to the pressed state. Here's an example:
We're not yet done with borders... With Bunifu Buttons also comes the ability to customize the edges using the
CustomizableEdges. property. Here' you can choose which edges will be included when styling the border radius:
The edges will be preserved whenever states change at runtime so no need to worry:
Automatic sizing is a feature that provides automatic size adjustments based on the button's content, that is, the text and icons which we will discuss a bit later. This feature enables you to simply provide your content as the button auto-adjusts itself to fit its content. You can easily enable this by setting the property
Here, we can see the button adjusting its size based the text:
This will also apply whenever you add icons:
Bunifu Button also gives you the ability of toggling focus on when clicked and off when lost focus. This gives you the chance to have a tab-like effect when you have a set of arranged buttons (button group) all doing something almost similar, for example, when working with Bunifu Pages, you can use a Bunifu Button group with each displaying a certain page.
Here's an example:
To do this, simply set the property
true . Once this is set, you will notice that the property
IndicateFocus is also applied to
true. This is because this property
IndicateFocus is used to set visual some focus to the button once clicked.
You can also set the state to be used whenever the button is focused using the property
FocusState , meaning that you can use the Idle state, Hover state or Pressed state (which is the default state) as the state to be used when active or focused.
Automatic Color Generation
By default, Bunifu Button helps auto-generate colors for your button's other states (namely, Hover and Pressed) whenever the property
AutoGenerateColors is set to
true. This is a pretty awesome feature as it lets you simply work with one color for the button's background and border or one for the background and another for the border and you're all set!
This means that all you need to do is find a theme color for your button(s), apply them using the properties
IdleBorderColor and the same colors will be used to generate a variation of two color sets - a lighter contrast for the hover state, and a darker contrast for the pressed state.
Here's an example:
You can also play around with how dark or light the colors generated will be using the properties
ColorContrastOnClick. These two properties accept integer values between 0 and 100 or even a negative value if you'd wish to have reverse colors generated (hover colors representing pressed and pressed colors representing hover). This makes up for some interesting color mixes which, of course, will be based on your own preferences.
Take time to play around with this feature!
As always, with such an awesome control comes the ability to add icons.
Bunifu Button has the ability to add icons to the left and/or the right using the properties
IdleIconRightImage. These properties accept
Image type variables, meaning you can pass an image to each via code. Also, we have extended this property to the various states to allow you to change the icons when in either the Hover or Pressed states, giving you maximum flexibility.
Below are examples detailing these features:
- Icons applied in the Idle state only:
- Different icons applied in the Hover and Pressed states:
You can set the button to only include icons by removing the Text content, leaving only the icon(s). Here's an example:
A final word...
We have tried to exhaust most of the recommended and requested features in Bunifu Button, but we definitely know that there's still some few more features to come later. We took part in a creative design process when building this control, with it being one of the controls we consider as the base controls for any UI Kit. And with these features (and more), we truly believe that Bunifu Button will help you build THE most amazing interfaces yet to be seen in the 'world of software'.
Do have fun with it, craft it to your liking, and make the most out of it!
Here's a comprehensive list of the built-in properties in Bunifu Button:
• CustomizableEdges: This property allows you to customize each single edge differently; especially when it comes to applying border radius.
• ColorContrastOnClick: This property allows you to set a value for the intensity of color contrast when you click the button.
• ColorContrastOnHover: This property allows you to set a value for the intensity of color contrast when you hover the button.
• DisabledBorderColor: This property allows you to set the border color for a button when its state is disabled
• DisabledFillColor: This property allows you to set the background color of your button when the state is disabled.
• DisableForeColor: This property allows you to set the color of your text when the button is in disabled state.
• IdleBorderColor: This property allows you to set the border color of the button when on an idle state.
• IdleBorderRadius: This property allows you to achieve smooth edged buttons by simply defining the border radius size.
• IdleBorderThickness: This property allows you to modify the thickness of the button border on idle state. Simply achieve this by setting the thickness value.
• Text: This property lets you associate text with the button.
• TextMarginLeft: This property lets you set a value to apply offset to the button text on the left margin.
• IconLeftImage: This property allows you to place an icon on the left side of your button. It’s customizable on all the states; i.e OnIdleState, OnpressedState, OnHoverState.
• IconRightImage: This property allows you to place an icon on the right side of your button. It’s customizable on all the states; i.e OnIdleState, OnpressedState, OnHoverState.
• IconLeftCursor: This property allows you to choose from a variety, the type of cursor you want to appear upon hovering a button with a left icon.
• IconRightCursor: This property allows you to choose from a variety, the type of cursor you want to appear upon hovering a button with a right icon.
• IconMarginLeft: This property lets you set a value to apply offset to the button icon on the left margin towards the middle depending on the value set.
• IconPaddding: This property allows you to define a value to control the size of the icon when hovered.
• BorderThickness: This property allows you to modify the thickness of the button border. Simply achieve this by setting the thickness value. It’s customizable on all the states, i.e. OnIdleState, OnpressedState, OnHoverState.
• Focus state: This property sets the state to use when the button contains focus while the cursor is away.
• BorderStyle: This property allows one to set the controls border style.
• BorderColor: This property sets the control’s border color. It’s customizable on all the states i.e. OnIdleState, OnpressedState, OnHoverState.
• BorderRadius: This property allows you to define rounded edges on your button using border radius. It’s customizable on all the states; i.e OnIdleState, OnpressedState, OnHoverState.
• FillColor: This property allows one to set the background color for the button. It’s customizable on all the states; i.e OnIdleState OnpressedState, OnHoverState.
• ForeColor: This property sets the button’s foreground color. It’s customizable on all the states; i.e OnIdleState, OnpressedState, OnHoverState.
• AllowToggling: This property sets a value indicating whether the button will be automatically toggled to receive or release focus when clicked.
• AnimationSpeed: This property sets the button’s transition speed when changing from one state to another.
• AutoGenerateColors: This property when set to true uses the IdleFillColor and IdleBorderColor to generate colors for the other states.
• AutoSize: This property specifies whether the button will automatically resize its width to accommodate its contents.
• DialogResult: This property allows one to set the ‘Dialog Result’ returned by the button.