การพัฒนา Windows 10 - การนำทาง

ในแอปพลิเคชัน Universal Windows Platform (UWP) การนำทางเป็นโมเดลที่ยืดหยุ่นของโครงสร้างการนำทางองค์ประกอบการนำทางและคุณลักษณะระดับระบบ เปิดใช้งานประสบการณ์ผู้ใช้ที่ใช้งานง่ายหลากหลายสำหรับการย้ายไปมาระหว่างแอพเพจและเนื้อหา

มีสถานการณ์และสถานการณ์บางอย่างที่เนื้อหาและฟังก์ชันทั้งหมดสามารถปรับให้พอดีกับหน้าเดียวได้อย่างง่ายดายและผู้พัฒนาไม่จำเป็นต้องสร้างหลายเพจ อย่างไรก็ตามในแอปพลิเคชันส่วนใหญ่จะใช้หลายหน้าสำหรับการโต้ตอบระหว่างเนื้อหาและฟังก์ชันการทำงานที่แตกต่างกัน

เมื่อแอปมีมากกว่าหนึ่งเพจสิ่งสำคัญอย่างยิ่งสำหรับนักพัฒนาในการมอบประสบการณ์การนำทางที่เหมาะสม

แบบจำลองหน้า

โดยทั่วไปในแอปพลิเคชัน Universal Windows Platform (UWP) จะใช้โมเดลการนำทางแบบหน้าเดียว

คุณสมบัติที่สำคัญคือ -

  • โมเดลการนำทางหน้าเดียวจะเก็บรักษาบริบททั้งหมดของแอปพลิเคชันของคุณและเนื้อหาและข้อมูลเพิ่มเติมไว้ในเฟรมกลาง

  • คุณสามารถแบ่งเนื้อหาของแอปพลิเคชันของคุณออกเป็นหลายหน้า อย่างไรก็ตามเมื่อย้ายจากหน้าหนึ่งไปยังอีกหน้าหนึ่งแอปพลิเคชันของคุณจะโหลดหน้าดังกล่าวลงในแบบฟอร์มหน้าหลัก

  • ทั้งหน้าหลักของแอปพลิเคชันของคุณจะไม่ถูกยกเลิกการโหลดหรือไม่มีการโหลดโค้ดและข้อมูลช่วยให้จัดการสถานะได้ง่ายขึ้นและให้ภาพเคลื่อนไหวการเปลี่ยนระหว่างเพจที่ราบรื่นยิ่งขึ้น

การนำทางแบบหลายหน้ายังใช้สำหรับการนำทางระหว่างหน้าหรือหน้าจอต่างๆโดยไม่ต้องกังวลกับบริบทของแอปพลิเคชัน ในการนำทางแบบหลายเพจแต่ละเพจจะมีชุดฟังก์ชันอินเทอร์เฟซผู้ใช้และข้อมูลเป็นต้น

โดยทั่วไปแล้วการนำทางหลายหน้าจะใช้ในหน้าเว็บภายในเว็บไซต์

โครงสร้างการนำทาง

ในการนำทางหลายหน้าแต่ละหน้าจะมีชุดฟังก์ชันส่วนต่อประสานผู้ใช้และข้อมูลของตัวเองเป็นต้นตัวอย่างเช่นแอปพลิเคชันรูปภาพอาจมีหน้าเดียวสำหรับการถ่ายภาพจากนั้นเมื่อผู้ใช้ต้องการแก้ไขภาพถ่ายก็จะไปยังหน้าอื่น และเพื่อรักษาไลบรารีรูปภาพจะมีหน้าอื่น

โครงสร้างการนำทางของแอปพลิเคชันของคุณกำหนดโดยวิธีการจัดระเบียบหน้าเหล่านี้

ต่อไปนี้เป็นวิธีจัดโครงสร้างการนำทางในแอปพลิเคชันของคุณ -

ลำดับชั้น

ในโครงสร้างการนำทางประเภทนี้

  • หน้าจะถูกจัดเป็นโครงสร้างเหมือนต้นไม้

  • เพจย่อยแต่ละเพจมีพาเรนต์เพียงหนึ่งเพจ แต่เพจระดับบนจะมีเพจย่อยได้อย่างน้อยหนึ่งเพจ

  • ในการเข้าถึงเพจย่อยคุณต้องเดินทางผ่านผู้ปกครอง

เพียร์

ในการนำทางประเภทนี้ -

  • มีเพจอยู่เคียงข้างกัน
  • คุณสามารถเปลี่ยนจากหน้าหนึ่งไปยังอีกหน้าหนึ่งในลำดับใดก็ได้

ในแอปพลิเคชันหลายหน้าส่วนใหญ่จะใช้โครงสร้างทั้งสองพร้อมกัน หน้าเว็บบางหน้าถูกจัดเรียงเป็นแบบเดียวกันและบางหน้าจะถูกจัดเป็นลำดับชั้น

ให้เราใช้ตัวอย่างที่มีสามหน้า

  • สร้างแอปพลิเคชัน UWP เปล่าที่มีชื่อ UWPNavigation.

  • เพิ่มหน้าว่างอีกสองหน้าโดยคลิกขวาที่โครงการใน Solution Explorer และเลือก Add > New Item จากเมนูซึ่งจะเปิดหน้าต่างโต้ตอบต่อไปนี้

  • เลือกหน้าว่างจากบานหน้าต่างตรงกลางแล้วคลิก Add ปุ่ม.

  • ตอนนี้เพิ่มอีกหนึ่งหน้าโดยทำตามขั้นตอนที่กำหนดข้างต้น

คุณจะเห็นสามเพจใน Solution Explorer - MainPage, BlankPage1และ BlankPage2.

ระบุด้านล่างคือรหัส XAML สำหรับ MainPage ซึ่งมีการเพิ่มปุ่มสองปุ่ม

<Page 
   x:Class = "UWPNavigation.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:local = "using:UWPNavigation" 
   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}"> 
      <Hub Header = "Hi, this Main Page"/> 
      <Button Content = "Go to Page 1" Margin = "64,131,0,477" Click = "Button_Click"/>
      <Button Content = "Go to Page 2" Margin = "64,210,0,398" Click = "Button_Click_1"/> 
   </Grid> 
	
</Page>

ด้านล่างคือรหัส C # สำหรับสองปุ่มบน MainPageซึ่งจะนำทางไปยังอีกสองหน้า

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 {

   /// <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 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)); 
      } 
		
   } 
}

รหัส XAML สำหรับ blank page 1 ดังแสดงด้านล่าง

<Page 
   x:Class = "UWPNavigation.BlankPage1" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:local = "using:UWPNavigation" 
   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}"> 
      <Hub Header = "Hi, this is page 1"/> 
      <Button Content = "Go to Main Page" Margin = "64,94,0,514" Click = "Button_Click"/> 
   </Grid> 
	
</Page>

รหัส C # สำหรับปุ่ม - คลิกที่เหตุการณ์ blank page 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 {

   /// <summary> 
      /// An empty page that can be used on its own or navigated to within a Frame. 
   /// </summary> 
	
   public sealed partial class BlankPage1 : Page {
    
      public BlankPage1() {
         this.InitializeComponent(); 
      }
		
      private void Button_Click(object sender, RoutedEventArgs e) {
         this.Frame.Navigate(typeof(MainPage)); 
      }
		
   } 
}

ระบุด้านล่างคือรหัส XAML สำหรับ blank page 2.

<Page 
   x:Class = "UWPNavigation.BlankPage2" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:local = "using:UWPNavigation" 
   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}">
      <Hub Header = "Hi, this is page 2"/>
      <Button Content = "Go to Main Page" Margin = "64,94,0,514" Click = "Button_Click"/> 
   </Grid> 
	
</Page>

ด้านล่างนี้คือรหัส C # สำหรับเหตุการณ์การคลิกปุ่มบน blank page 2ซึ่งจะไปที่หน้าหลัก

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 {

   /// <summary> 
      /// An empty page that can be used on its own or navigated to within a Frame. 
   /// </summary>
	
   public sealed partial class BlankPage2 : Page {
   
      public BlankPage2(){ 
         this.InitializeComponent(); 
      } 
		
      private void Button_Click(object sender, RoutedEventArgs e) {
         this.Frame.Navigate(typeof(MainPage)); 
      }
		
   } 
}

เมื่อโค้ดด้านบนถูกคอมไพล์และรันคุณจะเห็นหน้าต่างต่อไปนี้

เมื่อคุณคลิกที่ปุ่มใด ๆ มันจะนำคุณไปยังหน้านั้น ๆ ให้เราคลิกที่Go to Page 1 และหน้าต่อไปนี้จะปรากฏขึ้น

เมื่อคุณคลิกที่ปุ่ม 'Go to Main Page'มันจะกลับไปที่หน้าหลัก