Splitview with frame and navigating to another page, back button does not work

Question

I've made simple hamburger menu and it works fine but after navigating to another page using "myFrame" back button does not work(app closes).

If I navigate using this.Frame it works fine, back button works fine but splitview is not visable on second page.

How to make my code so I have splitview on second page and that back button stil works?

public MainPage()
{
    this.InitializeComponent();
}

private void btnHamburger_Click(object sender, RoutedEventArgs e)
{
    myFrame.Navigate(typeof(SecondPage));
}

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <RelativePanel>
        <Button Name="btnHamburger" FontFamily="Segoe MDL2 Assets" Content="&#xE700;" 
            FontSize="24" Click="btnHamburger_Click" Margin="0,0,-4,0" Width="48"/>
    </RelativePanel>
    <SplitView Name="mySV" Grid.Row="1" DisplayMode="CompactInline" OpenPaneLength="200" 
        CompactPaneLength="48" HorizontalAlignment="Left"  Margin="0,0,0,0">
        <SplitView.Pane>
            <TextBlock></TextBlock>
        </SplitView.Pane>
        <SplitView.Content>
            <Frame Name="myFrame"></Frame>
        </SplitView.Content>
    </SplitView>
</Grid>

With code above I see the hamburger menu on the second page but the back button does not work.

This code works for the back button but I cant see the hamburger on the second page:

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
    }

    private void btnHamburger_Click(object sender, RoutedEventArgs e)
    {
        this.Frame.Navigate(typeof(SecondPage));
    }
}

Back button code:

    public App()
    {
        Microsoft.ApplicationInsights.WindowsAppInitializer.InitializeAsync(
            Microsoft.ApplicationInsights.WindowsCollectors.Metadata |
            Microsoft.ApplicationInsights.WindowsCollectors.Session);
        this.InitializeComponent();
        this.Suspending += OnSuspending;
    }

    /// <summary>
    /// Invoked when the application is launched normally by the end user.  Other entry points
    /// will be used such as when the application is launched to open a specific file.
    /// </summary>
    /// <param name="e">Details about the launch request and process.</param>
    protected override void OnLaunched(LaunchActivatedEventArgs e)
    {

        Frame rootFrame = Window.Current.Content as Frame;

        // Do not repeat app initialization when the Window already has content,
        // just ensure that the window is active
        if (rootFrame == null)
        {
            // Create a Frame to act as the navigation context and navigate to the first page
            rootFrame = new Frame();

            rootFrame.NavigationFailed += OnNavigationFailed;
            rootFrame.Navigated += RootFrame_Navigated;
            if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
            {
                //TODO: Load state from previously suspended application
            }

            // Place the frame in the current Window
            Window.Current.Content = rootFrame;
        }

        if (e.PrelaunchActivated == false)
        {
            if (rootFrame.Content == null)
            {
                // When the navigation stack isn't restored navigate to the first page,
                // configuring the new page by passing required information as a navigation
                // parameter
                rootFrame.Navigate(typeof(MainPage), e.Arguments);
            }
            // Ensure the current window is active
            Window.Current.Activate();
        }

        // Register a handler for BackRequested events and set the  
        // visibility of the Back button  
        SystemNavigationManager.GetForCurrentView().BackRequested += OnBackRequested;

        SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility =
            rootFrame.CanGoBack ?
            AppViewBackButtonVisibility.Visible :
            AppViewBackButtonVisibility.Collapsed;

    }

    /// <summary>
    /// Invoked when Navigation to a certain page fails
    /// </summary>
    /// <param name="sender">The Frame which failed navigation</param>
    /// <param name="e">Details about the navigation failure</param>
    void OnNavigationFailed(object sender, NavigationFailedEventArgs e)
    {
        throw new Exception("Failed to load Page " + e.SourcePageType.FullName);
    }

    /// <summary>
    /// Invoked when application execution is being suspended.  Application state is saved
    /// without knowing whether the application will be terminated or resumed with the contents
    /// of memory still intact.
    /// </summary>
    /// <param name="sender">The source of the suspend request.</param>
    /// <param name="e">Details about the suspend request.</param>
    private void OnSuspending(object sender, SuspendingEventArgs e)
    {
        var deferral = e.SuspendingOperation.GetDeferral();
        //TODO: Save application state and stop any background activity
        deferral.Complete();
    }

    private void RootFrame_Navigated(object sender, NavigationEventArgs e)
    {

        SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility =
            ((Frame)sender).CanGoBack ?
            AppViewBackButtonVisibility.Visible :
            AppViewBackButtonVisibility.Collapsed;
    }

    private void OnBackRequested(object sender, BackRequestedEventArgs e)
    {
        Frame rootFrame = Window.Current.Content as Frame;

        if (rootFrame.CanGoBack)
        {
            e.Handled = true;
            rootFrame.GoBack();
        }
    }
}

Thanks

Answer 1

I've made simple hamburger menu and it works fine but after navigating to another page using "myFrame" back button does not work(app closes). If I navigate using this.Frame it works fine, back button works fine but splitview is not visable on second page.

According to the code you provided above, you register a handler RootFrame_Navigated for rootFrame's Navigated events to set the visibility of the Back button, and the BackRequested event registered is also used to handle rootFrame's GoBack . So Back button will show and work only when you use rootFrame to navigate to another page, and it won't work when you use myFrame .

How to make my code so I have splitview on second page and that back button still works?

According to your description, you should register a handler for myFrame's Navigated event to set the visibility of the Back button, and register the BackRequested event to handle myFrame's GoBack in MainPage.xmal.cs .

MainPage.xaml.cs:

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        // set an initial page for myFrame
        myFrame.Navigate(typeof(Page1));
        // register a handler for myFrame's Navigated event to set the visibility of the Back button
        myFrame.Navigated += myFrame_Navigated;
        // register BackRequested event to handle myFrame's GoBack
        SystemNavigationManager.GetForCurrentView().BackRequested += OnBackRequested;
    }

    private void myFrame_Navigated(object sender, NavigationEventArgs e)
    {
        SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility =
            ((Frame)sender).CanGoBack ?
            AppViewBackButtonVisibility.Visible :
            AppViewBackButtonVisibility.Collapsed;
    }

    private void OnBackRequested(object sender, BackRequestedEventArgs e)
    {
        if (myFrame.CanGoBack)
        {
            e.Handled = true;
            myFrame.GoBack();
        }
    }

    private void btnHamburger_Click(object sender, RoutedEventArgs e)
    {
        myFrame.Navigate(typeof(SecondPage));
    }
}

Here is the Entire Sample for your reference, and following is the output: