Search code examples
c#winrt-xamlwin-universal-appwindows-10splitview

Hamburger button overlaps SplitView pane


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;
            };
    }

Solution

  • 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.