UWP – FlyingCommandBar Revisited

After writing yesterday about the FlyingCommandBar (which was really a StackPanel with buttons) I got contacted by Rudy Huyn with the comment that the thing I tried to achieve actually is possible with the regular CommandBar, making both maintaining and adapting the control into your own app a lot easier. It required a little trickery to pull it off and in this post I’ll explain you how to do this.


Old vs. new (Dark theme)

If you’re not familiar with the design principles of this control, please read my post from yesterday first. This one goes a bit more into detail as I feel that I didn’t do that last time, as I tried to let the code with comments speak for itself. (Still, but going over a few smaller details you otherwise might overlook)

Unlike in the previous post, the FLUI Framework NuGet Package isn’t necessary anymore for this sample, though I would recommend using it for it’s TextBlock styles. Disclaimer; I maintain this NuGet package myself, so with that out of the way, let’s get started.

Old vs. new (Light theme)


The basis

The control starts with a DropShadowPanel that will house the CommandBar. You’ll need to set the Margin to “24” to make it look nicely distanced from the sides of the app window. You’ll also need to set the HorizontalAlignment to “Right” and the VerticalAlignment to “Bottom”, unless if you want the bar to appear anywhere else on the screen.

Now that we have our DropShadowPanel ready, add a CommandBar to it. Give it a CornerRadius of “2”, set the Style to “{ThemeResource CommandBarRevealStyle}” and set the DefaultLabelPosition to “Right”. This last detail is important, as you’ll see later on.

Primary Button

The PrimaryButton is the AppBarButton that displays both the Icon and the Label. Because the default Label position has been set to “Right” in the CommandBar properties the label of this button will be displayed, well, on the right. If you are planning to display other buttons as well then set the CornerRadius to “2,0,0,2”. If it is the only button in the bar you can set it to “2”.

If you want to highlight the button to make it stand out even more you can add these two lines:

Background="{ThemeResource SystemControlBackgroundAccentBrush}"

Foreground="{ThemeResource SystemControlForegroundChromeWhiteBrush}"

These’ll make the background of the button use the users Accent colour and set the foreground colour white so the text will be readable against the accent colour background.

Secondary Buttons

Remember that we set the default label position to “Right” in the CommandBar properties? This is where it get’s tricky. In order to get icons only, we’ll have to manually hide the Labels in these buttons. Luckily it’s fairly easy; just set the LabelPosition of the button to “Collapsed”. Boom, done! Or are you?

Unfortunately, the button won’t show the Label as a ToolTip when you hide it, so we’ll have to implement that manually. Add the following inside the AppBarButton and you should be fine:

<ToolTipService.ToolTip>

<ToolTip Content="[YOUR_LABEL_HERE]" />

</ToolTipService.ToolTip>

Boom, now it’s really done! 🙂

Overflow Button

The Overflow Button is pretty much being handled by the <CommandBar.SecondaryCommands>, so put your AppBarButtons you want to be displayed in the overflow menu there and everything will be fine. 😉


That’s it! You can customize your FlyingAppBar to your own style, just keep in mind that you only show 3 buttons and a overflow button at most to keep the UI clean and easy for your user.

I’ve updated all samples in the GitHub repository with this new code. If you want to compare it with the old version, you can still access those, as they are hidden under the <!-- Old FlyingCommandBar --> Comments with their Visibility set to Collapsed.

Once more a really big thank you to amazing Rudy Huyn for both the criticism and help on this, go give that man your cheers on his blog or his Twitter! 😎

Happy coding! 😊