Windows 10 开发 - 导航

更新于 2025/6/22 18:52:17

在通用 Windows 平台 (UWP) 应用中，导航是一种灵活的导航结构、导航元素和系统级功能模型。它能够在应用、页面和内容之间切换，提供各种直观的用户体验。

在某些情况下，所有内容和功能都可以轻松地整合到一个页面中，开发者无需创建多个页面。然而，大多数应用程序使用多个页面来实现不同内容和功能之间的交互。

当应用程序包含多个页面时，提供正确的导航体验对开发人员来说非常重要。

页面模型

通常，在通用 Windows 平台 (UWP) 应用程序中，使用单页导航模型。

重要特性有 −

单页导航模型将应用程序的所有上下文以及其他内容和数据维护在一个中心框架中。
您可以将应用程序的内容分成多个页面。但是，当从一个页面移动到另一个页面时，您的应用程序会将页面加载到主页面表单中。
应用程序的主页面、代码和数据都不会卸载，这使得状态管理更加容易，并在页面之间提供更流畅的过渡动画。

多页面导航也用于在不同页面或屏幕之间导航，而无需担心应用程序上下文。在多页导航中，每个页面都有各自的功能、用户界面和数据等。

多页导航通常用于网站内的网页。

导航结构

在多页导航中，每个页面都有各自的功能、用户界面和数据等。例如，一个照片应用程序可能有一个用于拍摄照片的页面，当用户想要编辑照片时，它会导航到另一个页面;而当用户想要维护图片库时，它又会导航到另一个页面。

应用程序的导航结构由这些页面的组织方式定义。

以下是在应用程序中构建导航的方式 −

层次结构

在这种导航结构中，

页面被组织成树状结构。
每个子页面只有一个父页面，但父页面可以有一个或多个子页面。
要访问子页面，您必须经过父页面。

同级

在这种导航类型中 −

页面并排存在。
您可以按任意顺序从一个页面切换到另一个页面。

在大多数多页面应用程序中，这两种结构会同时使用。有些页面被组织为对等结构，有些则被组织为层次结构。

让我们以包含三个页面的示例为例。

创建一个名为 UWPNavigation 的空白 UWP 应用程序。
在解决方案资源管理器中右键单击项目并选择添加 >，再添加两个空白页面。从菜单中选择"新建项目"选项，这将打开以下对话框窗口。

从中间窗格中选择空白页，然后点击添加按钮。
现在按照上述步骤再添加一个页面。

您将在解决方案资源管理器中看到三个页面，其中MainPage、BlankPage1和BlankPage2。

下面是MainPage的 XAML 代码，其中添加了两个按钮。

<Page 
   x:Class = "UWPNavigation.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:local = "using:UWPNavigation" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d">  
	
   <Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
      <Hub Header = "Hi, this Main Page"/> 
      <Button Content = "Go to Page 1" Margin = "64,131,0,477" Click = "Button_Click"/>
      <Button Content = "Go to Page 2" Margin = "64,210,0,398" Click = "Button_Click_1"/> 
   </Grid> 
	
</Page>

下面是 MainPage 上两个按钮的 C# 代码，它们将导航到其他两个页面。

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

// 空白页项目模板的文档位于
   http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409  

namespace UWPNavigation {

   /// <summary> 
      /// An empty page that can be used on its own or navigated to within a Frame. 
   /// </summary> 
	
   public sealed partial class MainPage : Page {
      public MainPage() {
         this.InitializeComponent(); 
      }  
		
      private void Button_Click(object sender, RoutedEventArgs e){ 
         this.Frame.Navigate(typeof(BlankPage1)); 
      } 
		
      private void Button_Click_1(object sender, RoutedEventArgs e) {
         this.Frame.Navigate(typeof(BlankPage2)); 
      } 
		
   } 
}

空白页 1 的 XAML 代码如下所示。

<Page 
   x:Class = "UWPNavigation.BlankPage1" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:local = "using:UWPNavigation" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d"> 
   
   <Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
      <Hub Header = "Hi, this is page 1"/> 
      <Button Content = "Go to Main Page" Margin = "64,94,0,514" Click = "Button_Click"/> 
   </Grid> 
	
</Page>

C# 代码用于在空白页 1上执行按钮点击事件，该事件将导航至主页，如下所示。

using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

// 空白页项目模板的文档位于
   http://go.microsoft.com/fwlink/?LinkId=234238 
	
namespace UWPNavigation {

   /// <summary> 
      /// An empty page that can be used on its own or navigated to within a Frame. 
   /// </summary> 
	
   public sealed partial class BlankPage1 : Page {
    
      public BlankPage1() {
         this.InitializeComponent(); 
      }
		
      private void Button_Click(object sender, RoutedEventArgs e) {
         this.Frame.Navigate(typeof(MainPage)); 
      }
		
   } 
}

下面是空白页 2的 XAML 代码。

<Page 
   x:Class = "UWPNavigation.BlankPage2" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:local = "using:UWPNavigation" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d"> 
   
   <Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}">
      <Hub Header = "Hi, this is page 2"/>
      <Button Content = "Go to Main Page" Margin = "64,94,0,514" Click = "Button_Click"/> 
   </Grid> 
	
</Page>

下面是空白页 2按钮点击事件的 C# 代码，该事件将导航到主页面。

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

// 空白页项目模板的文档位于 
   http://go.microsoft.com/fwlink/?LinkId=234238
	
namespace UWPNavigation {

   /// <summary> 
      /// An empty page that can be used on its own or navigated to within a Frame. 
   /// </summary>
	
   public sealed partial class BlankPage2 : Page {
   
      public BlankPage2(){ 
         this.InitializeComponent(); 
      } 
		
      private void Button_Click(object sender, RoutedEventArgs e) {
         this.Frame.Navigate(typeof(MainPage)); 
      }
		
   } 
}

编译并执行上述代码后，您将看到以下窗口。