UWP开发笔记——嵌套式页面的实现-白红宇

UWP开发笔记——嵌套式页面的实现

阅读量：6859 次

发布时间：2019-06-26

本文共 3950 字，大约阅读时间需要 13 分钟。

原文:

绪论

UWP开发中，Page是最常用的Control之一，通常情况下，在开发的application中，每一个页面就是一个Page。有时候，为了开发整合度更高，UI表现更为一致的UI，开发者需要把UI控件和功能整合到一个页面的子页面中，子页面拥有自己的UI表现和生命周期，这就需要在Page中嵌套Page来达到需要实现的效果。

一种实现方法

其实，实现嵌套页面是一件很简单的事情，我们知道，page都是通过Frame显示和控制Navigation的，基于这点，就可以在主页面（即最外层的页面）中添加一个Frame，通过控制这个Frame来实现子Page的显示和导航。

在xmal中添加Frame

在code中实现子Page的navigation

contentFrame.Navigate(typeof(Page1));

为子Frame添加默认的Page

protected override void OnNavigatedTo(NavigationEventArgs e){    if (e.NavigationMode == NavigationMode.New)    {        contentFrame.Navigate(typeof(Page1));    }    base.OnNavigatedTo(e);}

为back键添加Event

public MainPage(){    this.InitializeComponent();    SystemNavigationManager.GetForCurrentView().BackRequested += PageBackRequested;}private void PageBackRequested(object sender, BackRequestedEventArgs e){    if (contentFrame == null)        return;    if (contentFrame.CanGoBack)    {        e.Handled = true;        contentFrame.GoBack();    }}

一个例子

在这个例子中，外层的MainPage有一个汉堡键配合SplitView菜单实现内层Page的切换，back键用来实现contentFrame的Navigation。其中，Page1和Page2是嵌套在MainPage里面的两个Page。

MainPage.xaml

MainPage.xaml.cs

using System;using System.Collections.Generic;using System.IO;using System.Linq;using System.Runtime.InteropServices.WindowsRuntime;using Windows.Foundation;using Windows.Foundation.Collections;using Windows.UI.Core;using Windows.UI.Xaml;using Windows.UI.Xaml.Controls;using Windows.UI.Xaml.Controls.Primitives;using Windows.UI.Xaml.Data;using Windows.UI.Xaml.Input;using Windows.UI.Xaml.Media;using Windows.UI.Xaml.Navigation;// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409namespace NestedFrameExample{    ///     /// An empty page that can be used on its own or navigated to within a Frame.    /// 
    public sealed partial class MainPage : Page    {        public List
     
       NavLinks = new List
      
       ()        {            new NavLink() { Label = "Page1", LinkType = typeof(Page1) },            new NavLink() { Label = "Page2", LinkType = typeof(Page2) }        };        public MainPage()        {            this.InitializeComponent();            SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = AppViewBackButtonVisibility.Visible;            SystemNavigationManager.GetForCurrentView().BackRequested += PageBackRequested;        }        private void NavLinkClick(object sender, ItemClickEventArgs e)        {            NavLink link = e.ClickedItem as NavLink;            if (link != null && link.LinkType != null)                contentFrame.Navigate(link.LinkType);            splitView.IsPaneOpen = false;        }        private void SplitViewToggle_Click(object sender, RoutedEventArgs e)        {            splitView.IsPaneOpen = !splitView.IsPaneOpen;        }        protected override void OnNavigatedTo(NavigationEventArgs e)        {            //this.InitialBackButton();            if (e.NavigationMode == NavigationMode.New)            {                contentFrame.Navigate(typeof(Page1));            }            base.OnNavigatedTo(e);        }        private void PageBackRequested(object sender, BackRequestedEventArgs e)        {            if (contentFrame == null)                return;            if (contentFrame.CanGoBack)            {                e.Handled = true;                contentFrame.GoBack();            }        }    }    public class NavLink    {        public String Label { get; set; }        public Type LinkType { get; set; }        public override String ToString()        {            return Label;        }    }}

总结

嵌套式的页面使每个Page的结构更加清晰，更能专注于自己的功能实现，也使代码更加清晰，容易维护，避免代码冗余，推荐使用，希望本文能给大家带来帮助！！

转载地址：http://iqtyl.baihongyu.com/

你可能感兴趣的文章