Comment on page
Bunifu Snackbar
Add stunning, interruptive-free notifications to your interfaces
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.
Adding Bunifu Snackbar in WinForms
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:
C#
VB.NET
private void bunifuButton1_Click(object sender, EventArgs e){
bunifuSnackbar1.Show(this, "Hello world");
}
Private Sub bunifuButton1_Click(ByVal sender As Object, ByVal e As EventArgs)
bunifuSnackbar1.Show(Me, "Hello world")
End Sub
Once you run, this will be the result:
Our first non-interruptive notification enabled Winform
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
👇
C#
VB.ET
private void bunifuButton1_Click(object sender, EventArgs e){
bunifuSnackbar1.Show(this, "Information sent to server");
}
Private Sub bunifuButton1_Click(ByVal sender As Object, ByVal e As EventArgs)
bunifuSnackbar1.Show(Me, "Information sent to server")
End Sub
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:
C#
VB.NET
private void bunifuButton1_Click(object sender, EventArgs e) {
bunifuSnackbar1.Show(this, "Information sent to server",
Bunifu.UI.WinForms.BunifuSnackbar.MessageTypes.Success);
}
Private Sub bunifuButton1_Click(ByVal sender As Object, ByVal e As EventArgs)
bunifuSnackbar1.Show(Me, "Information sent to server",
Bunifu.UI.WinForms.BunifuSnackbar.MessageTypes.Success)
End Sub
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
C#
VB.NET
private void bunifuButton1_Click(object sender, EventArgs e) {
bunifuSnackbar1.Show(this, "Information sent to server",
Bunifu.UI.WinForms.BunifuSnackbar.MessageTypes.Success,4000);
}
Private Sub bunifuButton1_Click(ByVal sender As Object, ByVal e As EventArgs)
bunifuSnackbar1.Show(Me, "Information sent to server",
Bunifu.UI.WinForms.BunifuSnackbar.MessageTypes.Success,4000)
End Sub
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:
C#
VB.NET
private void bunifuButton7_Click(object sender, EventArgs e){
bunifuSnackbar1.Show(this,
"I have a custom call back when action button is clicked",
Bunifu.UI.WinForms.BunifuSnackbar.MessageTypes.Information,
3000, "DISMISS");
}
Private Sub bunifuButton7_Click(ByVal sender As Object, ByVal e As EventArgs)
bunifuSnackbar1.Show(Me,
"I have a custom call back when action button is clicked",
Bunifu.UI.WinForms.BunifuSnackbar.MessageTypes.Information,
3000, "DISMISS")
End Sub
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:
C#
VB.NET
private void bunifuButton1_Click(object sender, EventArgs e){
bunifuSnackbar1.Show(this,
"Snackbar on the top left side of the form",
Bunifu.UI.WinForms.BunifuSnackbar.MessageTypes.Information,
1000, "",
Bunifu.UI.WinForms.BunifuSnackbar.Positions.TopLeft);
}
Private Sub bunifuButton1_Click(ByVal sender As Object, ByVal e As EventArgs)
bunifuSnackbar1.Show(Me,
"Snackbar on the top left side of the form",
Bunifu.UI.WinForms.BunifuSnackbar.MessageTypes.Information,
1000, "",
Bunifu.UI.WinForms.BunifuSnackbar.Positions.TopLeft)
End Sub
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:
C#
VB.NET
private void bunifuButton1_Click(object sender, EventArgs e){
bunifuSnackbar1.Show(this,
"Snackbar on the top left side of the form",
Bunifu.UI.WinForms.BunifuSnackbar.MessageTypes.Information,
1000, "",
Bunifu.UI.WinForms.BunifuSnackbar.Positions.TopLeft,
Bunifu.UI.WinForms.BunifuSnackbar.Hosts.FormOwner);
}
Private Sub bunifuButton1_Click(ByVal sender As Object, ByVal e As EventArgs)
bunifuSnackbar1.Show(Me,
"Snackbar on the top left side of the form",
Bunifu.UI.WinForms.BunifuSnackbar.MessageTypes.Information,
1000, "",
Bunifu.UI.WinForms.BunifuSnackbar.Positions.TopLeft
Bunifu.UI.WinForms.BunifuSnackbar.Hosts.FormOwner)
End Sub
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:
C#
VB.NET
private void bunifuButton1_Click(object sender, EventArgs e){
bunifuSnackbar1.Show(this, "Snackbar displaying for 5 seconds",
Bunifu.UI.WinForms.BunifuSnackbar.MessageTypes.Information,5000);
}
Private Sub bunifuButton1_Click(ByVal sender As Object, ByVal e As EventArgs)
bunifuSnackbar1.Show(Me, "Snackbar displaying for 5 seconds",
Bunifu.UI.WinForms.BunifuSnackbar.MessageTypes.Information,5000)
End Sub
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.
C#
VB.NET
private void bunifuButton1_Click(object sender, EventArgs e){
bunifuSnackbar1.Show(this,
"Snackbar on the top left side of the form",
Bunifu.UI.WinForms.BunifuSnackbar.MessageTypes.Information,
1000, "",
Bunifu.UI.WinForms.BunifuSnackbar.Positions.TopLeft,
Bunifu.UI.WinForms.BunifuSnackbar.Hosts.FormOwner);
}
Private Sub bunifuButton1_Click(ByVal sender As Object, ByVal e As EventArgs)
bunifuSnackbar1.Show(Me,
"Snackbar on the top left side of the form",
Bunifu.UI.WinForms.BunifuSnackbar.MessageTypes.Information,
1000, "",
Bunifu.UI.WinForms.BunifuSnackbar.Positions.TopLeft
Bunifu.UI.WinForms.BunifuSnackbar.Hosts.FormOwner)
End Sub
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.
snackbar with a callback
The following code demonstrates how to carry out the above example:
C#
VB.NET
private void bunifuCheckBox2_CheckedChanged(object sender, BunifuCheckBox.CheckedChangedEventArgs e) {
if (e.CheckState==BunifuCheckBox.CheckStates.Unchecked)
{
bunifuSnackbar1.Show(this, "Custom notification disabled !", BunifuSnackbar.MessageTypes.Warning, 4000, "Undo uncheck",
BunifuSnackbar.Positions.BottomRight).Then((result) => {
if (result == BunifuSnackbar.SnackbarResult.ActionClicked)
{
bunifuCheckBox2.Checked = true;
}
});
}
}
Private Sub bunifuCheckBox2_CheckedChanged(ByVal sender As Object, ByVal e As BunifuCheckBox.CheckedChangedEventArgs)
If e.CheckState=BunifuCheckBox.CheckStates.Unchecked Then
bunifuSnackbar1.Show(Me, "Custom notification disabled !", BunifuSnackbar.MessageTypes.Warning, 4000, "Undo uncheck",
BunifuSnackbar.Positions.BottomRight).Then(Sub(result)
If result = BunifuSnackbar.SnackbarResult.ActionClicked Then
bunifuCheckBox2.Checked = True
End If
End Sub)
End If
End Sub
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!
Last modified 3yr ago