Question

我正在学习UWP，并尝试在导航窗格中实现“返回”按钮。我将返回按钮放在菜单按钮正下方的RelativePanel下。以下是我当前的XAML页面：

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

以及XAML的代码背后：

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

由于某种原因，单击“返回”按钮后，它无法按预期运行，而且，我发现this.Frame.CanGoBack = false。如何解决？

Answer 1

从您发布的代码中，我们可以看到this.Frame实际上是对应用程序的 root 框架的引用，该框架目前仅导航到单个页面（ MainPage）（如您的 App.xaml.cs 中所定义）。因此，没有页面可以返回到（this.Frame.CanGoBack = false）。

一些深入的解释：

如果您进入项目中的 App.xaml.cs 文件，则在OnLaunched()方法中，您将找到以下代码：

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

在此应用程序启动后，将rootFrame导航到MainPage。

当您从this.Frame中使用MainPage时，它实际上是指rootFrame，目前它仅导航到MainPage，因此没有任何可以返回的页面，因此this.Frame.CanGoBack = false。

解决方案：

使用SplitView时，应在内容中指定一个Frame，可用于在不同页面之间导航。因此，您的应用将如下所示：

此处红色矩形用于显示rootFrame，而蓝色矩形用于显示Frame，您必须在SplitView内容中进行定义。

为此，您需要对代码进行一些如下修改：

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

希望这会有所帮助..！

UWP导航窗格后退按钮不起作用

1 个答案: