Hamburger button overlaps SplitView pane

Question

I need help regarding implementing XAML Navigation menu sample.

In the code I wrote, Hamburger button overlaps SplitView pane.

PS Note: To keep app simple. I used a simple ListView (instead of customized ListView as shown in sample for keyboard support).

Demo Image

Code for titlebar's back button:

private void backButtonLogic()   //Method related to back button
    {
        //Make titlebar's back button visible
        SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = 
            AppViewBackButtonVisibility.Visible;

        //Back button handler 
        SystemNavigationManager.GetForCurrentView().BackRequested += (s,e) => 
        {
            bool handled = e.Handled;

            if (AppFrame.CanGoBack && !handled)
            {
                handled = true;
                AppFrame.GoBack();
            }

            e.Handled = handled;
        };

        //Mobile hardware back button handler
        if (ApiInformation.IsTypePresent("Windows.Phone.UI.Input.HardwareButtons"))
            Windows.Phone.UI.Input.HardwareButtons.BackPressed += (s, e) =>
            {
                bool handled = e.Handled;

                if (AppFrame.CanGoBack && !handled)
                {
                    handled = true;
                    AppFrame.GoBack();
                }

                e.Handled = handled;
            };
    }

If you placed a ListView into the SplitView.Pane, it also worked well, I noticed that you've added a back button on the TitleBar, could you show us some code snippets? — Franklin Chen - MSFT, Aug 30 '15 at 04:37
@Franklin Chen Yes, Surely. I've used a simple ListView in pane. You've some idea about how to prevent hamburger & pane from overlapping? — Anil, Aug 30 '15 at 12:59
This method can be called from AppShell constructor. AppFrame is the frame placed in SplitView's Content property — Anil, Aug 31 '15 at 12:05
@JeffreyChen: Please try to make more comprehensive edits which are actually worth it. See [How do I make a good edit?](http://meta.stackoverflow.com/q/303219) — Deduplicator, Sep 01 '15 at 23:42

score 0 · Accepted Answer · answered Sep 29 '15 at 07:09

in the "XAMLNavigation" sample the Hamburger Button (called TogglePaneButton) is declared outside of the SplitView element. That's why the custom ListView in SplitView.Pane has a margin of "0,48,0,0" so they don't overlap.

I assume changing the top margin of the ListView should solve your problem. Hope this helps.

Hamburger button overlaps SplitView pane

1 Answers1