UPDATE 2019-09-16: After some advice I’ve updated the samples of the FlyingCommandBar repository to use the CommandBar instead of custom buttons. You can read more about it here.
Every now and then you need something, but it’s base design just doesn’t fit to your designing needs. I had this problem when reworking the UI of Revent. The regular CommandBar was something I needed to house the commands, but I didn’t like the way it filled up the whole bottom of my Page. And to have it look, well, uhm, a tad outdated. I designed a fix for that; the FlyingCommandBar. And in this post I’ll explain how I you can use this flying CommandBar (or is it really a CommandBar?) in your own apps, including the design philosophy behind it so you fully understand the choices that have been made during its design process.
The FlyingCommandBar is a set of buttons the hover in the lower right corner of the Page, kind of like the primary command button in Google’s Material Design. Except this button isn’t fully round, and it encapsulates more buttons than just one.
The bar is designed to be used with at least 1 Primary Button and can be expanded with two Secondary Buttons and an Overflow Button. Why only 3 visible commands and an overflow button? To keep the user focused on their work and not overwhelm them with too many choices. I’ll explain the sort of buttons here below;
The Primary Button
The Primary Button is the button that has the biggest importance on a page and should house the most important function on that page. This can be a simple save button, but also be a button to add a new item to a list. Or maybe the reply button in an email application. Whatever is the most important function at that moment in your app.
The primary button always shows an icon and a label shortly explaining the function of the button. This way the button will stand out visually against the other ones. If you want to make it stand out even more you can also apply a Accent background to it. Don’t forget to also set the
StackPanel that houses the icon and label to
RequestedTheme=”Dark” so it’ll show up properly when using the app with a light theme.
The secondary buttons house up to 2 other important functions for the page. These buttons only show the icon for the function. You can put the label that ‘explains’ the function in the ToolTip of the button. This way the focus will still lay on the Primary Button without sacrificing on clarity for the user.
The Overflow button houses all extra and less important commands. Think of commands that the user doesn’t always need, like for example a button to the settings of the app, the about page or maybe a print button. You can locate all the extra buttons in the MenuFlyout of this button. Why MenuFlyout? So you can easily stack items and put separators in between if needed.
The look of the overflow button is the three simple dots, like with the original CommandBar.
About the repository
The repository housing the various samples can be found here:
- Page 1-FullBar shows an example of using the bar with all 4 buttons in use.
- Page 2-FullBarAccent shows the same bar with the Primary Button highlighted with the users Accent colour.
- Page 3-PrimayOnly shows an example of using the bar with only a Primary Button (for example, for a save-button, just as mentioned before).
- Page 4-PrimaryOverflow shows an example of the bar with just the Primary Button and Overflow Button.
- Page 5-PrimarySecondary shows an example of only using the Primary Button and a Secondary Button.
- Page 6-MailSample is an example of the FlyingCommandBar used in an email application, this to showcase a ‘real world’ app situation.
The sample repository uses the following NuGet Packages:
- Windows Community Toolkit – Used for the DropShadowPanel
- WinUI – Used for the modern UI controls
- FLUI Framework – Used for the styling of the text
While the sample uses a minimum SDK of 1809, you can also use this on older versions of the UWP SDK, just don’t forget to add a conditional namespace for all the CornerRadius properties (as that got added in 1809).
The repository is available under the MIT license, so go nuts with it. I’m looking forward to see what uses all of you get out of it. 😊 If you like it, consider sharing this post and/or supporting me on Patreon or with a Ko-Fi so I can keep purchasing tea for working on all these open source projects. 😉