Wrong placement of CommandBar using Page's TopAppBar property.

microsoft / microsoft-ui-xaml

Windows UI Library: the latest Windows 10 native controls and Fluent styles for your applications

MIT License

6.12k stars 661 forks source link

Wrong placement of CommandBar using Page's TopAppBar property. #9618

Closed jcz0389 closed 4 days ago

jcz0389 commented 1 month ago

Describe the bug

The CommandBar is placed at the top of the window, rather than at the top of a specific Page.

Steps to reproduce the bug

create two rows' grid in app window
place a frame in second row
create a page with CommandBar in page's TopAppBar prop
show this page in the frame
observe where CommandBar is displayed

Expected behavior

CommandBar should be placed at the top of the page, not the window.

Screenshots

NuGet package version

None

Windows version

No response

Additional context

No response

github-actions[bot] commented 1 month ago

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one. Thank you!

Open similar issues:

[WinUI][.NET 8] The in-app toolbar is in the wrong position (#8602), similarity score: 0.73
CommandBar not respecting Fluent sizing (#9260), similarity score: 0.70

Closed similar issues:

CommandBar appears above NavigationView (#2970), similarity score: 0.81
CommandBar placed in Page.BottomAppBar does not move when window is resized (#8378), similarity score: 0.78
CommandBar near top of window opens up, causes clipping (#1024), similarity score: 0.73

Note: You can give me feedback by thumbs upping or thumbs downing this comment.

jcz0389 commented 1 month ago

This is the same cause as in #2970. In my app CommandBar is placed over "Click Me!" button and it is impossible to click the button.

brabebhin commented 1 month ago

I think the TopAppBar has been deprecated since windows 10 uwp. It's there to prevent compiler errors. Iirc TopAppBar was one of the key elements of the metro design language that simply forced apps to have a top and a bottom app bar, and used system defined rendering for that. It was replaced by the CommandBar cause nobody really wanted the inflexible behaviour of windows 8 metro app bars. I'm surprised it has any effect at all.

kmahone commented 4 days ago

We should remove the TopAppBar and BottomAppBar properties from Page since they are no longer recommended for use. We don't make abi breaking changes in 1.x releases so it is not something we can remove now, but it is something that we could do in a 2.x release.

For now, I recommend working around the issue by adding a Grid to the root of your Page and putting the CommandBar in a top most or bottom most Auto sized Row. That should give the desired behavior.

I will take note of this issue as a possible update to remove these two properties in a 2.x release (we do not currently have plans for a 2.0 release, but I imagine that it will happen at some point in the future).