Microsoft-ui-xaml: Proposal: Changing the default placement for CommandBar SecondaryCommands flyout from Top to Bottom.

Created on 7 Apr 2020  路  5Comments  路  Source: microsoft/microsoft-ui-xaml

Proposal: Changing the default placement for CommandBar SecondaryCommands flyout from Top to Bottom.

Summary

Improve the usability of CommandBar SecondaryCommands by changing the default flyout placement from Top to Bottom.

Rationale

When adding a CommandBar, the default Flyout behavior for the Secondary Commands is Top. I think if the CommandBar is placed at the bottom of the window as it was in a Windows Phone/Mobile or Windows 8 app then this makes sense. However, when you dock your CommandBar to the top of your window like most Win10 apps, having the secondary commands show above makes no sense.

This seems to be the default behavior for all Win10 apps that use SecondaryCommmands.

Here is an example of how it works now:
image

Here is what I would like (I was able to do this if I moved my window to the screen bounds to trigger the placement change):
image

Trying to change the default behavior by code/XAML is not easy or fun and after mucking around with it for long enough to waste time, I found a work around which meant I removed the SecondaryCommands and added another AppCommandButton for the more command "..." and attached to it a flyout. This allowed me the option to specify the placement value which satisfied my goal. However, I should not have to do this when the SecondaryCommands functionality can do it for me.

  • This change would make a consistent UI when compared to other Microsoft 1st party apps that use the CommandBar SecondaryCommands flyout.

Scope

Scope: Should/Could

| Capability | Priority |
| :---------- | :------- |
| This proposal will allow developers to accomplish W | Must |
| This proposal will allow end users to accomplish X | Should |
| This proposal will allow developers to accomplish Y | Could |
| This proposal will allow end users to accomplish Z | Won't |

Important Notes

N/A

Open Questions

N/A

area-Commanding feature proposal needs-winui-3 team-Controls

Most helpful comment

While I would welcome this feature in some form, switching the default would be a breaking change, and I personally still use the bottom command bar very often.

It would be nicer to add a new property like SecondaryCommandsDirection, which would allow us to choose the direction of the flyout. This would alleviate the need to tinker with the style while making it easy to choose. There could also be an "auto" option that would decide automatically based on the position within the window.

All 5 comments

While I would welcome this feature in some form, switching the default would be a breaking change, and I personally still use the bottom command bar very often.

It would be nicer to add a new property like SecondaryCommandsDirection, which would allow us to choose the direction of the flyout. This would alleviate the need to tinker with the style while making it easy to choose. There could also be an "auto" option that would decide automatically based on the position within the window.

Totally agree with @MartinZikmund here. Changing the default behavior is generally not a good idea. Since the root problem of the proposal is that you can not easily change it, a better way to address this problem is to introduce something like SecondaryCommandsDirection .

It should definitely be dependent on the location. Top goes down. Bottom goes up.

Yes, I agree that the root issue is just not being able to control it, so I agree that if we could introduce the idea @MartinZikmund .

As for the location, if my app is not docked or close to the top of the screen, it always opens up as shown in my screenshot above where you can see Visual Studio running behind the app.

Sounds similar to #2229. The CommandBar seems to be using a popup which needs to be unfortunately positioned manually and this code is in the framework which means we need to make the fix in WinUI3. Changing the default makes sense if the current default is not doing the correct thing.

Was this page helpful?
0 / 5 - 0 ratings