Windowscommunitytoolkit: BottomAppBar covers up last Hamburger option

[markti]

I'm using Page.BottomAppBar on one of my pages and it is resulting in the Hamburger options to be completely blocked from view (at least the very last option that is furthest to the bottom).

[deltakosh]

Is the navigation frame included in hamburger content area?
Can you provide a simple repro project?

[markti]

you can check out the problem in a little app i'm building here https://github.com/markti/AzureBlobUWP

[CabuxaMapache]

To avoid this problem you can include "CommandBar" inside the page loaded in the "Navigationframe". Align it at the bottom and you are done. Keep in mind that "SecondaryCommands" will overflow over Hamburguer...

[markti]

I know I can fix it by moving the CommandBar out of the tag and just put it inside the content of the page however, isn't it best practice to put the CommandBar in the Why would Microsoft have a BottomAppBar and TopAppBar property on the Page if they wanted us to just create a new in a Grid in the page content to put the CommandBar control?

[markti]

This issue is discussed on this thread. Jesse Bishop, from Microsoft, says there are the following issues if you don't use the Page.BottomAppBar or Page.TopAppBar to place your CommandBar:

• There are known hit-testing issues in the Consumer Preview if AppBars are added without using these properties
• The AppBars do not use the proper animations if they are added without using these properties
• If AppBars are added as children of arbitrary elements then it's easier for multiple controls to attempt to create/modify AppBars, resulting in an inconsistent user experience

[CabuxaMapache]

I'm totally agree with you, just happened to me too, I was just trying to find a solution to help... anybody?

[markti]

Cool. Yes, I'm using that work around now. I'll play around with the control in my fork of the UWP Community Toolkit and see if I can fix it in a sandbox.

[deltakosh]

Hey guys! I'll look at this one later this week (in the middle of MVP summit for now :))
One question: do you reproduce the same issue with a simple SplitView?

[deltakosh]

up :)

[lukasf]

Not sure if this works, but it might be worth a try: Have you tried to add a left Margin to the CommandBar? You could try setting Margin="48,0,0,0" (I think the hamburger menu is 48 px wide). That way, you might be able to use BottomAppBar with its benefits and still have the HamburgerMenu working.

[markti]

@deltakosh, by "up" you mean you fixed it?

[deltakosh]

By up, I mean: did you try with a simple SplitView :)
But I;ve just done the test and I can reproduce the issue. So it is not a specific issue with HamburgerMenu but with the SplitView used internally. I pinged XAML team internally. I keep you posted

[markti]

Ah. OK. Yes, it does fail with a Split View as well.

[deltakosh]

yep..So it is a deeper problem :)

[deltakosh]

Ok it is not a problem per se.
Instead of using Page.BottomAppBar you can put the CommandBar in-line with the other content inside the frame in which case it will be sized to fit within that space. The MSDN docs for CommandBar provide relevant guidance:

Placement
You can place a CommandBar inline with your app content, anywhere in your XAML. If the CommandBar must remain visible to a user when the touch keyboard, or Soft Input Panel (SIP), appears then you can assign it to the BottomAppBar property of a Page and it will move to remain visible when the SIP is present. Otherwise, you should place it inline and positioned relative to your app content. Where you place the CommandBar will influence things like whether you make it sticky, or use the minimal mode when it's closed. For more info and guidance, see Guidelines for command bars.

The comment from Jesse is out dated (2012).

[CabuxaMapache]

One more thing to know... the secondary commands keep overlapping the splitview even inside the frame content page...see image

[deltakosh]

Yep but this is kind of expected.
You can still change the template of the secondary command panel