Proposal: CommandBar improvements

[manfromarce]

Proposal: make CommandBar more flexible

Summary

Since AppBar it's been discontinued and it's not consistent with new WinUI look, the only toolbar-like control is the CommandBar. In my opinion it should be more flexible and have features like:

• allow for left or center alignment (currently right only)
• allow for a more compact layout (currently when Label is Collapsed and only icon is displayed, the button is still too large. IsCompact property doesn't seem to work)
• ability to add SplitButton, DropDownButton, TextBox and ComboBox in a consistent way, and display a down arrow for buttons that have a flyout
• ability to display only labels for some buttons (currently, when the icon is not set, a small space is still reserved for it, making the button asymmetrical)
• ability to change overflow mode, allowing the commandbar to span across 2 lines or display a scrollbar when the window shrinks

Rationale

Improving CommandBar would allow developers to more easily migrate from WPF to WinUI. For example, I'm trying to achieve a layout similar to this (but with slightly bigger buttons):

and it's difficult with the current CommandBar.

Scope

Capability	Priority
Allow left alignment	Must
Allow for more compact layout	Must
Allow to display label only	Must
SplitButton and DropDownButton	Must
Overflow mode	Could

[StephenLPeters]

@manfromarce are you looking for a ribbon style control? https://github.com/microsoft/microsoft-ui-xaml/issues/168

[manfromarce]

No, I'm looking for a toolbar control

[mdtauk]

The new Simplified Office Ribbon, with a CommandBar smooshed together (a techincal term) could become a Toolbar control. That along with #2310 could be a good idea.

Ideally the CommandBar would get support for ButtonGroups, with single select and multi-select behaviours, with support for Text and Combo boxes - and keep the same overflow behaviour - but look more like the CommandBarFlyout (without the flyout)

If these came together, you could have a toolbar like this

[yoshiask]

I prototyped a super basic control similar to that single select ButtonGroup using a ListView with special styles. As for a multi-select ButtonGroup, can't that be implemented today as a bunch of ToggleButtons with no label?

[leoshusar]

I feel like I'm either lucky or too demanding, because anytime I pick up new framework I run into something missing in the first few hours😅

I needed some icons-only command bar for my app and I was able to abuse CommandBarFlyoutCommandBar for this:

I also used Closing="MainCommandBar_Closing" which always resets IsOpen = true, because when it's "closed", those separators will stretch to the bottom, but not to the top, so they look not centered:

Unfortunately I don't see a way to show labels on the right side with the flyout, so this is also not the greatest workaround, but works for me "for now".

When I use CommandBar, I can set the label position to right (works), but then I can either set position to collapsed for individual buttons (button becomes too wide) or not set the label (icon is not centered): EDIT: Setting Width to 40 and collapsed label looks like this could work. I tried to make custom style with width 40 but it looks like something gets overwritten and the style breaks. I also tried to create control that inherits from AppBarButton and sets width to 40 but it broke again, so now I am just setting the number 40 as a static resource.

Plus if there was an option for vertical command bar, it would be even better.