Twist is my favorite snack bar, which makes me kind of weird (and old). At the end of every happy hour at the office, the snack bars bowl had only those left, cause no one wanted to touch them, so there were plenty left for me. Life's great.
Google's Material Design Snackbar is a great way to send short messages to the user. No need for a modal dialog box just to say everything went fine. According to Google's design, they are either dark gray or off-white on light or dark themes respectively. Google also recommends that they will have not more than one button, they should not contain any icons and they should be opaque (unless you insist, but they say you should make sure the text stays clear enough).
The color of the button is the accent color (secondary). I really love this design.
Of course, a Snackbar alone is not enough. We will need to use a modal dialog box in our apps (called DialogHost in Google's language) and I will cover that topic on one of my next posts, but this post is all about Snackbars.
The Snackbar control, just like any other Xaml control, comes with some attributes, part of them are unique to it.
The most interesting mechanism is the queue system that comes with it.
Once you define a queue object, every message you enter will pile up in this queue, waiting to be displayed. It also has a cool optional feature of discarding duplicate messages that have entered the queue.
My way of using Snackbars is quite simple - If it's a success message it will have no buttons and it will auto hide (after 2.5 seconds). If it's something the user must acknowledge, It will have one button (usually an 'OK' button) and it will only hide itself after the user clicked on its sole button.
Go ahead and download example3 from my GitHub. With the size of the files increasing as the examples being more complex, It's less efficient to have the whole code sit here inside the post.
So, here we have a textbox for you to type any message, and two buttons for both type of messages to send.
The Snackbar element is in line 36, right before The </Grid> closing tag.
<materialDesign:Snackbar Name="Snackbar1" Opacity="1"/>The 'materialDesign:' at the beginning of the tag is the reference to materialdesigninxaml which we declared in line 4. You will see a lot of Xaml files where people are using 'md:' as an alias. That's absolutely fine. In fact you can put any alias you want, but md and materialDesign have a better corellation to Material Design controls.
The Opacity attribute is not necessary as "1" is the default value (Which is opaque). I've put it there for you to play with and have a sense of its opacity.
Just put a value of "0.7" or lower and try it out.
Our code in the PS script begins at line 24. Remember that usually we will not have to change the 20+ first lines as they are common to almost any project.
There are only few things like "Title", windows size etc. that need to be adjusted.
So at lines 24-25 we create the MessageQueue object and we set its discard duplicate property to $true.
Then we defined the function New-Snackbar that will get the Snackbar object, text and the button caption. If no button caption will be provided, the function will insert a Auto-Hide message in the queue.
For the No-Hide type of message, I've set a durationOverride of 9999 hours. If anyone knows what's the magic value for No-Hide, drop me a message.
Last thing we did is added two events for the two buttons. One will call the New-Snackbar with the value of TxtBox1.Text and "OK" as the button caption (No-Hide type) and the other will not provide a button caption (Auto-Hide).
Both commands look like this:
New-Snackbar -Snackbar $Snackbar1 -Text $TxtBox1.Text -ButtonCaption "OK"
New-Snackbar -Snackbar $Snackbar1 -Text $TxtBox1.TextAn important thing you have to understand when dealing with a Snackbar - It isn't "floating" like a modal windows. It is just another control. That means, if you place it as the first element of a StackPanel, when it pops up it will "push" down all of the other controls that are part of this StackPanel, causing the elements on the screen to behave differently than what you've planned. You should carefully plan where to put it. Preferably in a bottom DockPanel as the last element of the Xaml file, just before the closing Grid and Window.
When a user is hovering over a Snackbar that is set to auto-hide, it will stay on the screen as long as the mouse cursor is still there. Once it left the Snackbar area, the auto-hide timer will start the counting (for 2.5 seconds).
Discard duplicate will discard only the same text and the same type of messages while they are still in the queue. For example, we have two messages still in queue, both carry the same text "Everything's fine". One message is set with a button (No-Hide) and the other one is set to Auto-Hide. They will both show up.
As a rule of thumb - all 7 arguments of the Enqueue need to be identical to at least one message in the current queue, for that message to be considered as a duplicate one.
A message will leave the queue only a fraction of a second after it hid itself.
As long as it is being displayed, it is considered to be in the queue.
For the 'discard duplicate' feature to work you need both $MessageQueue.DiscardDuplicates set to $true and the 6th argument of Enqueue set to $false
You can play with this example app by sending multiple Snackbars from both kinds simultaneously with the same text or with a different one, and try to understand the concept I was explaining.
Bon Appétit !
Comments