转载

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

绪论

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

一种实现方法

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

在xmal中添加Frame

<Frame x:Name="contentFrame" Grid.Row="1"/>

在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

<Page  x:Class="NestedFrameExample.MainPage"  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  xmlns:local="using:NestedFrameExample"  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}">   <Grid.RowDefinitions>    <RowDefinition Height="Auto"/>    <RowDefinition Height="*"/>   </Grid.RowDefinitions>   <Grid Height="48" VerticalAlignment="Top" Background="White">    <Button x:Name="hamburgerButton" Background="Transparent" Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Left" Click="SplitViewToggle_Click">     <TextBlock Text="" FontFamily="{ThemeResource SymbolThemeFontFamily}"/>    </Button>   </Grid>   <!-- 这个Frame用于显示子Page页面。 -->   <Frame x:Name="contentFrame" Grid.Row="1"/>   <SplitView x:Name="splitView" Grid.Row="1" IsPaneOpen="False" OpenPaneLength="300" CompactPaneLength="48" DisplayMode="Overlay" HorizontalContentAlignment="Stretch">    <SplitView.Pane>     <ListView ItemsSource="{x:Bind Path=NavLinks}" IsItemClickEnabled="True" ItemClick="NavLinkClick" SelectionMode="None"/>    </SplitView.Pane>   </SplitView>  </Grid> </Page>

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=0x409 namespace NestedFrameExample {  /// <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 List<NavLink> NavLinks = new List<NavLink>()   {    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;   }  } }