你的位置:首页 > ASP.net教程

[ASP.net教程]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"  ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  ="http://schemas.microsoft.com/winfx/2006/xaml"  ="using:NestedFrameExample"  ="http://schemas.microsoft.com/expression/blend/2008"  ="http://schemas.open  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="&#xE700;" 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=0x409namespace 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;    }  }}

总结

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