Windows 10开发 - 导航

在通用Windows平台(UWP)应用程序中，导航是导航结构，导航元素和系统级功能的灵活模型.它支持各种直观的用户体验，可以在应用程序，页面和内容之间移动.

在某些情况和场景中，所有内容和功能都可以轻松融入单个页面，开发人员无需创建多个页面.但是，在大多数应用程序中，多个页面用于不同内容和功能之间的交互.

当应用程序有多个页面时，开发人员提供这些页面非常重要正确的导航体验.

页面模型

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

重要功能包括&减去;

• 单页导航模型可维护您的所有上下文将应用程序和其他内容和数据放入中央框架.

• 您可以将应用程序的内容划分为多个页面.但是，当从一个页面移动到另一个页面时，您的应用程序会将页面加载到主页面中.

• 您的应用程序的主页面都没有卸载也没有代码和数据被卸载，它使管理状态变得更容易，并在页面之间提供更平滑的过渡动画.

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

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

导航结构

在多页面导航中，每个页面都有自己的一组功能，用户界面和数据等.例如，照片应用程序可能有一个用于捕获照片的页面，然后当用户想要编辑照片时，它导航到另一个页面并维护图像库，它有另一个页面.

您的应用程序的导航结构是这些页面是如何组织的.

以下是在您的应用程序中构建导航的方法 :

Hierarchy

在这种类型的导航结构中，

• 页面被组织成树状结构.

• 每个子页面只有一个父页面，但父页面可以有一个或多个子页面.

• 要访问子页面，您必须通过父级访问.

Peer

在这种类型的导航 :

• 页面并排存在.

• 您可以按任意顺序从一个页面转到另一个页面.

在大多数多页应用程序中，都使用了两种结构同时.有些页面被组织为对等，其中一些被组织成层次结构.

让我们举一个包含三个页面的例子.

• 创建一个名为 UWPNavigation 的空白UWP应用程序.

• 添加通过右键单击解决方案资源管理器中的项目再选择两个空白页，然后选择添加>菜单中的New Item 选项，将打开以下对话窗口.

• 从中间窗格中选择空白页面并单击添加按钮.

• 现在按照上述步骤再添加一页.

您将在Solution Explorer&minus中看到三个页面; MainPage，BlankPage1 和 BlankPage2 .

以下是 MainPage 的XAML代码，其中两个按钮被添加.

下面是 MainPage 上两个按钮的C＃代码，它将导航到另外两个页面.

使用Windows.UI.Xaml

using Windows.UI.Xaml; using Windows.UI.Xaml.Controls;  // The Blank Page item template is documented at    http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409  namespace UWPNavigation {   /// 
       /// An empty page that can be used on its own or navigated to within a Frame.    /// 
    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代码如下所示.

按钮上的C＃代码 -  空白页1上的点击事件，将导航到主页面如下所示.

using System; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls;  // The Blank Page item template is documented at   http://go.microsoft.com/fwlink/?LinkId=234238 namespace UWPNavigation {   /// 
       /// An empty page that can be used on its own or navigated to within a Frame.    /// 
    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代码.

以下是空白页2 上按钮点击事件的C＃代码，它将导航到主页面.

using Windows.UI.Xaml; using Windows.UI.Xaml.Controls;  // The Blank Page item template is documented at     http://go.microsoft.com/fwlink/?LinkId=234238namespace UWPNavigation {   /// 
       /// An empty page that can be used on its own or navigated to within a Frame.    /// 
   public sealed partial class BlankPage2 : Page {         public BlankPage2(){          this.InitializeComponent();       }       private void Button_Click(object sender, RoutedEventArgs e) {         this.Frame.Navigate(typeof(MainPage));       }   } }

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

当您点击任何按钮时，它会导航到相应的页面.让我们点击转到第1页，将显示以下页面.

当您点击按钮'转到主页'时，它将导航回主页面.