UWP导航窗格返回按钮不起作用

Question

I'm learning UWP and trying to implement GO BACK button in a navigation pane. I put go-back button under a RelativePanel right below menu button. The below is my current XAML page:

<Page
    x:Class="LearningUWP.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:LearningUWP"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:muxc="using:Windows.UI.Xaml.Controls"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" >
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <RelativePanel>
            <Button Name="Menu" FontFamily="Segoe MDL2 Assets" Content="&#xE700;" FontSize="36" Click="Menu_Click"></Button>
            <Button RelativePanel.Below="Menu" Style="{StaticResource NavigationBackButtonNormalStyle}" Name="Back" FontSize="36" Click="Back_Click"></Button> 
        </RelativePanel>
        <SplitView Name="MySplitView"
                   Grid.Row="1"
                   DisplayMode="CompactOverlay"
                   OpenPaneLength="200"
                   CompactPaneLength="56"
                   HorizontalAlignment="Left">
            <SplitView.Pane>
                <ListBox SelectionMode="Single"
                         Name="IconsListBox"
                         SelectionChanged="IconsListBox_SelectionChanged"
                         >
                    <ListBoxItem Name="ShareListBoxItem">
                        <StackPanel Orientation="Horizontal" >
                            <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="36" Text="&#xE72D;"/>
                            <TextBlock Text="Share" FontSize="24" Margin="20, 0, 0, 0"/>
                        </StackPanel>
                    </ListBoxItem>
                    <ListBoxItem Name="FavoritesListBoxItem" >
                        <StackPanel Orientation="Horizontal" >
                            <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="36" Text="&#xE734;"/>
                            <TextBlock Text="Favorites" FontSize="24" Margin="20, 0, 0, 0"/>
                        </StackPanel>
                    </ListBoxItem>
                </ListBox>
            </SplitView.Pane>
            <SplitView.Content>
                <TextBlock Margin="50, 0, 0, 0" Name="ResultTextBlock"/>
            </SplitView.Content>
        </SplitView>
    </Grid>
</Page>

And the XAML's code-behind:

namespace LearningUWP
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }
        private void Menu_Click(object sender, RoutedEventArgs e)
        {
            MySplitView.IsPaneOpen = !MySplitView.IsPaneOpen;
        }
        private void IconsListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if (ShareListBoxItem.IsSelected)
                ResultTextBlock.Text = "shared";
            else if (FavoritesListBoxItem.IsSelected)
                ResultTextBlock.Text = "Favorites";
        }
        private void Back_Click(object sender, RoutedEventArgs e)
        {
            if (this.Frame.CanGoBack)
                this.Frame.GoBack();
        }}}

For some reason, after I click the Go back button, it doesn't work as expected, and what is more, I find this.Frame.CanGoBack = false . How to solve it?

Answer 1

From the code that you have posted we can see that this.Frame is actually the refering to the root frame of the application, which at the moment has only navigated to a single page ( MainPage ) (As defined in your App.xaml.cs ). Thus there is no page that it can go back to ( this.Frame.CanGoBack = false ).

---

A little in depth explanation :

If you go into App.xaml.cs file in your project, in the OnLaunched() method you will find the following code :

rootFrame.Navigate(typeof(MainPage), e.Arguments);

Here the application, after launch will navigate the rootFrame to the MainPage .

When you use this.Frame from your MainPage it actually refers to the rootFrame , which at this moment has only navigated to the MainPage , thus it does not have any page that it can go back to , hence this.Frame.CanGoBack = false .

---

Solution :

When you use a SplitView , in the content you should specify a Frame which you can use to navigate between different pages . Thus your app will look something like this :

Here Red rectangle is used to show the rootFrame where as Blue is used to show the Frame which you have to define in your SplitView content.

For this, you need to make minor modifications to your code something like this :

XAML

<Page
 .....
 .....
   <SplitView Name="MySplitView"
    .....>
       <SplitView.Pane>
         .....                   
        </SplitView.Pane>
        <SplitView.Content>
           <Frame x:Name="appFrame"></Frame>
        </SplitView.Content>
   </SplitView>    
</Page>

C#

private void IconsListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (ShareListBoxItem.IsSelected)
       appFrame.Navigate(typeof(page1));//navigating to page1
    else if (FavoritesListBoxItem.IsSelected)
       appFrame.Navigate(typeof(page2));//navigating to page2
}
private void Back_Click(object sender, RoutedEventArgs e)
{
   if (appFrame.CanGoBack)
      appFrame.GoBack();
}

Hope this helps..!