UWP Development Notes--implementation of nested pages

Introduction

In UWP development, page is one of the most commonly used control, usually in the application of development, each page is one. Sometimes, in order to develop a more integrated, UI-consistent UI, developers need to integrate UI controls and functionality into a page's sub-pages, which have their own UI performance and life cycle, which requires the page to be nested within pages to achieve the desired effect.

An implementation method

In fact, the implementation of nested pages is a very simple thing, we know that pageis through Frame display and control navigation, based on this, you can add a frame to the main page (that is, the outermost page) , by controlling this frame to implement the display and navigation of the child page.

Add a frame to the Xmal

<x:name= "Contentframe"  grid.row= "1"/>

Implementing the Navigation of a child page in code

Contentframe.navigate (typeof(Page1));

Add a default page for a child frame

protected Override void onnavigatedto (NavigationEventArgs e) {    if (e.navigationmode = = navigationmode.new)    {        contentframe.navigate (typeof(Page1));    }     Base . Onnavigatedto (e);}

ForBack key to add Event

 PublicMainPage () { This.    InitializeComponent (); Systemnavigationmanager.getforcurrentview (). Backrequested+=pagebackrequested;}Private voidPagebackrequested (Objectsender, Backrequestedeventargs e) {    if(Contentframe = =NULL)        return; if(contentframe.cangoback) {e.handled=true;    Contentframe.goback (); }}

An example

In this example, the outer mainpage has a hamburger key with the Splitview menu to implement the inner page of the switch, the back key is used to implement the Contentframe navigation. Among them, Page1 and Page2 are two page nested inside the mainpage.

MainPage.xaml

<Pagex: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">    <GridBackground="{ThemeResource Applicationpagebackgroundthemebrush}">        <grid.rowdefinitions>            <RowDefinitionHeight= "Auto"/>            <RowDefinitionHeight="*"/>        </grid.rowdefinitions>        <GridHeight= "$"VerticalAlignment= "Top"Background= "White">            <Buttonx:name= "Hamburgerbutton"Background= "Transparent"Grid.column= "0"VerticalAlignment= "Center"HorizontalAlignment= "Left"Click= "Splitviewtoggle_click">                <TextBlockText= "& #xE700;"FontFamily="{ThemeResource symbolthemefontfamily}"/>            </Button>        </Grid>        <!--This frame is used to display child page pages.  -        <Framex:name= "Contentframe"Grid.Row= "1"/>        <SplitViewx:name= "SplitView"Grid.Row= "1"Ispaneopen= "False"Openpanelength= "+"Compactpanelength= "$"DisplayMode= "Overlay"horizontalcontentalignment= "Stretch">            <Splitview.pane>                <ListViewItemsSource="{x:bind Path=navlinks}"isitemclickenabled= "True"ItemClick= "Navlinkclick"SelectionMode= "None"/>            </Splitview.pane>        </SplitView>    </Grid></Page>

MainPage.xaml.cs

usingSystem;usingSystem.Collections.Generic;usingSystem.IO;usingSystem.Linq;usingSystem.Runtime.InteropServices.WindowsRuntime;usingwindows.foundation;usingWindows.Foundation.Collections;usingWindows.UI.Core;usingWindows.UI.Xaml;usingWindows.UI.Xaml.Controls;usingWindows.UI.Xaml.Controls.Primitives;usingWindows.UI.Xaml.Data;usingWindows.UI.Xaml.Input;usingWindows.UI.Xaml.Media;usingWindows.UI.Xaml.Navigation;//The Blank Page item template is documented athttp://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409namespacenestedframeexample{/// <summary>    ///An empty page that can is used on its own or navigated to within a Frame. /// </summary>     Public Sealed Partial classMainpage:page { PublicList<navlink> navlinks =NewList<navlink>()        {            NewNavLink () {Label ="Page1", linktype =typeof(Page1)},NewNavLink () {Label ="Page2", linktype =typeof(Page2)}};  PublicMainPage () { This.            InitializeComponent (); Systemnavigationmanager.getforcurrentview (). Appviewbackbuttonvisibility=appviewbackbuttonvisibility.visible; Systemnavigationmanager.getforcurrentview (). Backrequested+=pagebackrequested; }        Private voidNavlinkclick (Objectsender, Itemclickeventargs e) {NavLink link= E.clickeditem asNavLink; if(Link! =NULL&& link. Linktype! =NULL) contentframe.navigate (link.            Linktype); Splitview.ispaneopen=false; }        Private voidSplitviewtoggle_click (Objectsender, RoutedEventArgs e) {Splitview.ispaneopen= !Splitview.ispaneopen; }        protected Override voidonnavigatedto (NavigationEventArgs e) {//This . Initialbackbutton ();            if(E.navigationmode = =navigationmode.new) {contentframe.navigate (typeof(Page1)); }            Base.        Onnavigatedto (e); }        Private voidPagebackrequested (Objectsender, Backrequestedeventargs e) {            if(Contentframe = =NULL)                return; if(contentframe.cangoback) {e.handled=true;            Contentframe.goback (); }        }    }     Public classNavLink { PublicString Label {Get;Set; }  PublicType Linktype {Get;Set; }  Public OverrideString ToString () {returnLabel; }    }}

Summarize

Nested pages make each page structure clearer, more focused on their own function implementation, but also make the code more clear, easy to maintain, avoid code redundancy, recommended use, I hope this article can bring you help!!

UWP Development Notes--implementation of nested pages