UWP SplitView CommandBar content binding

Question

In my app i have a SplitView and set the content as Frame for each page. Each page contains its own CommandBar. This works without issue. Now i am creating VisualStates for a mobile view. In it i want to hide the PlitView in the closed state (inline). But now i need a way to add only the "HamburgerButton" (in my case a RadioButton), on the top, for opening the inline SplitView. I have done it also, but the "HamburgerButton" is overlapping each pages Text on the CommandBar. So what is the best solution, create only one CommandBar on the MainPage (where my SplitView is) and bind the content, or create a CommandBar for each Page?

Best regards

Answer 1

I think creating one CommandBar in the MainPage and binding the content may requires more work. Don't forget that you may need to bind the Primary and Secondary Buttons too.

If you want to use a CommandBar in each page and one HamburgerMenu in MainPage, you can try this method.

1. Create a separate top Row in the Grid for the CommandBar to occupy.
2. Horizontally stack a transparent Rectangle of width equal to your "HamburgerButton" along with the CommandBar and place it in the above created row.
3. Create VisualStates to trigger on Phone and set the visibility of the Rectangle accordingly to shift the CommandBar to the right.

Check out Template10 PageHeader Control (Search for "VisualStateNarrow" and "Spacer" in particular). If you are not particular about developing these boilerplate code yourselves, check out Template10. It has many helpful controls developed by the community. Please pardon me if you already knew about this.