Bunifu Snackbar
Add stunning, interruptive-free notifications to your interfaces
Last updated
Add stunning, interruptive-free notifications to your interfaces
Last updated
Bunifu Snackbar is an impressive interruption-free control, that provides pop-up messages after specific actions are enacted by the user in the Windows Form. For example, when a user clicks a delete button in the Windows Form application, you might want to inform them that the message has been deleted. You might even want to give them an option to undo the action. It is fully customizable and will provide you as a developer with a ton of options for customizing predefined standard notification types such as success, information, and error. Other customizable options include animations, durations, and dismissing toasts. Let’s flick through on this Windows Form application that leverages on this control.
This section will guide you on using Bunifu Snackbar via designer approach
Bunifu Snackbar control can be added to an application by dragging it from the toolbox to the Windows Form designer view. Once dropped in the form, an icon named bunifuSnackBar1 should appear in a space below the form i.e the component tray as shown in the following image.
Now for us to initialize a Bunifu Snackbar with a message at run time, add a button to the form and create an event handler for its click event. In the event handler, write or copy the following code snippet below:
Once you run, this will be the result:
For us to fully understand on rendering notifications with Bunifu Snackbar lets dive into this method known as the Show() method
This is the method responsible for displaying a Bunifu Snackbar during runtime. This method has got 7 overloads which means we can pass different parameters to the method to display our notification
Let's have a deep discussion of these 7 overload methods using examples:
Displays a Bunifu Snackbar where we'll pass a form owner value and the text to display on the snackbar.
public static Bunifu.UI.WinForms.SnackbarResult Show (Form owner, string text);
owner Form - sets the form that will own the snackbar i.e the form that will be in charge of displaying the Bunifu Snackbar.
text String - sets the text to display in the snackbar.
SnackbarResult - It can return a result of ActionClicked, AutoClosed, UserClosed.
The following example demonstrates how to use this overload 👇
Displays a Bunifu Snackbar by passing it a form owner value, the specified text, and message type.
public static Bunifu.UI.WinForms.SnackbarResult Show (Form owner, string text, MessageTypes type);
owner Form - sets the form that will own the snackbar i.e The form that will be in charge of displaying the Bunifu Snackbar.
text String - sets the text to display in the snackbar.
type MessageTypes - sets a bitwise of MessageType value. A Message type can be of information, success, error or warning
SnackbarResult - it can return a result of ActionClicked, AutoClosed, UserClosed.
The following example demonstrates how to use this overload:
Displays a Bunifu SnackBar notification, in the context where we'll have the ability to pass a time value which will be the duration in milliseconds that instructs the snackbar how long its visibility will be before automatically closes. It also gets the specified text and message types to the form that will own the snackbar
public static Bunifu.UI.WinForms.SnackbarResult Show (Form owner, string text, MessageTypes type, int duration);
owner Form - sets the form that will own the snackbar i.e The form that will be in charge of displaying the Bunifu SnackBar.
text String - sets the text to display in the snackbar.
type MessageTypes - sets a bitwise of MessageType value. Message types can be of information, success, error or warning
duration Int - sets the time span in milliseconds for displaying the snackbar before it auto closes
SnackbarResult - It can return a result of ActionClicked, AutoClosed, UserClosed.
The following example demonstrates how to use this overload
Displays a Bunifu Snackbar notification in the context, where we'll have the ability to pass a string value, which is going to set the name of the action button, that will be created automatically on inside the SnackBar notification. It also gets the specified text, duration, owner form, message types parameters.
public static Bunifu.UI.WinForms.SnackbarResult Show (Form owner, string text, MessageTypes type,);
Parameters
owner Form- sets the form that will own the snackbar i.e The form that will be in charge of displaying the Bunifu SnackBar.
text String - sets the text to display in the snackbar.
type MessageTypes - sets a bitwise of MessageType value. Message types can be of information, success, error or warning
duration Int - sets the time span in milliseconds for displaying the snackbar before it auto closes
action String - sets the name of the action button that will be created in the snackbar
SnackbarResult - It can return a result of ActionClicked, AutoClosed, UserClosed.
The following example demonstrates how to use this overload:
Displays a Bunifu SnackBar notification in the context where we'll have the ability to set the snackbar on runtime, in relative or custom position of the form. It also gets the specified text, duration, message types, and the form owner.
public static Bunifu.UI.WinForms.SnackbarResult Show (Form owner, string text, MessageTypes type, int duration, String action, Positions positions);
owner Form - sets the Form that will own the snackbar i.e The form that will be in charge of displaying the Bunifu Snackbar.
text String - sets the text to display in the snackbar.
type MessageTypes - sets a bitwise of MessageType value. Message types can be of information, success, error or warning
duration Int - sets the time span in milliseconds for displaying the snackbar before it auto closes
action String - sets the name of the action button that will be created in the snackbar
position Positions - sets a relative postion of the snackbar by passing it an enum of type positions. The enums available for positioning are left, right, bottom, top-right,top-left, bottom-right, bottom-left, middle-center, middle-left middle-right and custom position if you may like
SnackbarResult - It can return a result of ActionClicked, AutoClosed, UserClosed.
The following example demonstrates how to use this overload:
Displays a Bunifu Snackbar notification in the context where we'll have the ability to set the host of this snackbar. The host could be the form, the screen, or a custom user control that hosts the snack bar. By default, the snackbar will be hosted in the form. The method also gets the specified text, duration, owner form, position, action and message types parameters
public static Bunifu.UI.WinForms.SnackbarResult Show (Form owner, string text, MessageTypes type, int duration, String action, Positions positions, Hosts host);
owner Form - sets the form that will own the snackbar i.e The form that will be in charge of displaying the Bunifu SnackBar.
text String - sets the text to display in the snackbar.
type MessageTypes - sets a bitwise of MessageType value. Message types can be of information, success, error or warning
duration Int - sets the time span in milliseconds for displaying the snackbar before it auto closes
action String - sets the name of the action button that will be created in the snackbar
position Positions - Sets the location of the snackbar by passing it an enum of type position. The enums available are left, right, bottom, top-right,top-left, bottom-right, bottom-left, middle-center, middle-left middle-right and custom position if you may like
host Hosts - sets the container that will host the snackbar. The container could be the screen, the form or a standard/user control
SnackbarResult - It can return a result of ActionClicked, AutoClosed, UserClosed.
The following example demonstrates how to use this overload:
Based on the predefined built-in notification types, i.e error, success, warning, and information, it is simple to change its appearance. The change may be in terms of the color, border, and font at the click of the property. In each of the predefined standard notification types, there is a property assigned that we can manipulate. Here’s an overview of these types and their properties.
Type of notification
Property
Success
SuccessOptions
Warning
WarningOptions
Error
ErrorOptions
Information
InformationOptions
You might ask what can we configure in these properties. Well, Bunifu Snackbar has given us a list of options to work on and unleash our creativeness as developers in UI/UX development. Here’s what you can configure:
Option property
Description
ActionBackColor
Sets the backcolor of the action button
ActionBorderColor
Sets a border color for the action button
ActionBorderRadius
Sets a border radius for the action button’s border
ActionFont
Sets a font style for the text in the action button
ActionForeColor
Sets a foreground color for the text in the action button
BackColor
Sets the backcolor color for the snackbar
BorderColor
Sets the border color for the snackbar
CloseIconColor
Sets the icon color for the closing icon in the snackbar
Font
Sets a font style for the text in snackbar
Icon
Sets the option’s icon for the snackbar
IconLeftMargin
Sets a margin between the snackbar border and the option’s icon
ForeColor
Sets a fore color for the text in snackbar
Tips: The four major parent type properties i.e SuccessOption, ErrorOption, WarningOption, InformationOption have the same list of child option properties from the table above.
Let's dive into one example where we shall customize an error notification type of Bunifu Snackbar.
🧙♂️ The following properties have been set to the error option for the example above
ActionBackColor - 255, 255, 255
ActionBorderColor 255, 255, 255
ActionBorderRadius 1
ActionFont Segoe UI, 8.25pt, style=Bold
ActionForeColor 254, 77, 79
BackColor White
BorderColor White Close
IconColor 254, 77, 79
Font Segoe UI, 9.75pt
Icon System.Drawing.Bitmap
IconMargin 12
ForeColor Black
Suppose we wanted to have border shadows, hide or show icons and borders, or even set a margin between the icon and the message we would look at properties such as:
Properties
Description
ShowShadows
Sets a value indicating whether the snackbar will display its shadows rather than borders
ShowCloseIcon
Sets a true or false value indicating whether the close icon will be displayed
ShowBorders
Sets a true or false value indicating whether the snackbar will display its borders rather than the shadows
ShowIcon
Sets a true or false value indicating whether the snackbar’s option will be displayed
Margin
Sets the overall Snackbar’s overall distance between its host and its edges
MessageRightMargin
Sets a margin between the message and the closing icon which is on the right side the snackbar
ZoomCloseIcon
Sets a value indicating whether the close icon will zoom-in when hovered onto
DurationAfterIdle
Sets the time the snackbar will take to close after the system has been idling e.g if there's no activity like cursor movement, typing etc...
Bunifu Snackbar messages can be dismissed through clicking a close icon, an action, or setting a timeframe of how long the snackbar will be active before it auto closes. Dismissing of these notifications is paramount. At times we may need to delay the snackbar when we need the user to click an action button or make sure that the user understands the message being passed through. However, at other times we may want quick dismissal of our notifications if there are other subsequent notifications from program executions. It is upon us as developers to decide for how long would we want to dismiss the snackbar. The following is a discussion on ways we can brush off our Bunifu Snackbar message from the form.
The duration param in the show method helps us change the default active duration value of the snackbar before it automatically hides. By default, the duration value is set to last for 3000 milliseconds which means 3 seconds. The snackbar will be active until the duration runs out of the set value. Once the duration is over the snackbar will close automatically.
Below is an example where we’ll pass a duration with a value of 5000 in the show method.
The following codes will help us carry out the above example:
You can lay off a Bunifu Snackbar message from the form by clicking the close icon button. The close icon button can be enabled by the showCloseIcon property as true.
The ClickToClose property allows us to carry out the snackbar’s dismissal once clicked by the user. Besides, the property named DoubleClickToClose allows you to have the snackbar dismissed by double-clicking it.
The MaximumValue property lends us a hand to change the default number of multiple snackbars within a given duration. By default, the property has been set to display a maximum of 7 (seven) snackbars in the container view. We can change the maximum number of multiple snack bars to show, using the MaximumView property. Here is an example where we want to display a maximum of 5 snackbars in the form container. Hence, we’ve set the MaximumView value to 5.
Tips: At times we may want to only display one notification message at a given time. We can carry that out by setting the AllowMultipleViews property to false
By default, a Bunifu snackbar notification will normally appear near the top of the form/screen container, centered horizontally. However, the snackbar control can be easily custom-positioned wherever you want using the built-in positions. The example below shows a sample application that demonstrates the various positions a Bunifu snackbar can occupy.
Let's figure out how we can custom position our snackbars.
We can change the default positioning of the snackbar by either setting it on the left, right, bottom, top-right,top-left, bottom-right, bottom-left, middle-center, middle-left middle-right positions of the form. The X Positions are left right and center while the Y positions are the top, bottom, and middle.
Below is an example of a code whereby we want to position our snackbar in the top-left position of the form.
Tips: In the case of where multiple snackbars are shown the newest snackbar shown will occupy a lower position while the others are pushed up at equal intervals. Similarly, when a new snackbar occupies an upper position, the other snackbars will be pushed downwards.
You can create a more interactive snackbar message by configuring an action on the notification pop-up that helps the users react quickly on notifications (for example, reply to a chat message, undo the current task, etc..).
Now let’s have an actual example where we will have an action that, suppose we wanted to undo an unchecked option.
The following code demonstrates how to carry out the above example:
Bunifu snackbar is an awesome! awesome! control that you would want to leverage on, in displaying good-looking notifications from your application. Unlike the MessageBox control for Winforms, the snackbar is non-interruptive and customizing its appearance is a bed of roses!
