Xamarin Form Hierarchical Navigation

วันนี้เราจะมาทำความรู้จักกับการ Navigation ของ Xamarin Form กันนะครับ ซึ่งการ Navigation ของ Xamarin Form นี้จะมีหลายแบบหลายประเภท ณ ที่นี้ผมจะมาสอนการ Navigation แบบ Hierarchical Navigation ในแบบฉบับที่ผมใช้ในการทำงานจริงๆ เชิญรับชมรับอ่านรับฟังรับดูได้แล้วครับ

Hierarchical Navigation คือวิธีการเปลี่ยนหน้าของแอปเราจากหน้าที่เราดูอยู่ปัจจุบันไปหน้าที่ 2 หรือจากหน้า 2 ไปหน้า 3 และก็ตามชื่อคับ มันจะเป็นทอดๆกันไปเป็นลำดับและยังกลับมาหน้าก่อนหน้าได้ ตามลำดับ ในรูปแบบ last-in, first-out (LIFO) หรือก็คือ เข้าก่อนออกทีหลัง หรือจะ Stack หน้าไปเรื่อยๆ

ในการ Navigation ต่างๆนั้น ทุก View หรือหน้าๆหนึ่งของเราจำเป็นจำต้องต้องอยู่ภายใต้ NavigationPage

var page = new NavigationPage(new SomeView);

เรามาลองทำกันดูบ้าง ก่อนอื่นใดๆ เราจะไปหน้านั้นหน้านี้ได้เราจะเป็นจะต้องมีหน้าแรกก่อน เราจะสร้าง View ง่ายๆให้ชื่อว่า Page1.xaml และผมจะให้หน้านี้มาเป็นหน้าแรกแทนหน้า MainPage

เราจะมาสร้างหน้าแรกหรือที่เรียกกันว่า Root Page โดยให้ไปที่ App.xaml.cs ของเราแล้วเพิ่มโค๊ดดังนี้

MainPage = new NavigationPage(new Page1());

ต่อมาเราจะสร้างปุ่ม Next Page ให้กับหน้า Page1.xaml กันนะครับ โดยเขียนโค๊ดดังนี้

<Button Text="Next Page" 
        Clicked="OnNextPageClicked" 
        HorizontalOptions="Center" 
        VerticalOptions="Center"/>

และเราก็จะสร้างหน้า Page2.xaml โดยให้ Page2 มีทั้งปุ่ม Next Page และปุ่ม Previous Page จะได้โค๊ดดังนี้

<Button Text="Next Page" 
        Clicked="OnNextPageClicked" 
        HorizontalOptions="Center" 
        VerticalOptions="Center"/>
<Button Text="Previous Page" 
        Clicked="OnPreviousPageClicked" 
        HorizontalOptions="Center" 
        VerticalOptions="Center"/>

และหน้าสุดท้ายเรา Page3.xaml จะให้มีแค่ปุ่ม Previous Page

<Button Text="Previous Page" 
        Clicked="OnPreviousPageClicked" 
        HorizontalOptions="Center" 
        VerticalOptions="Center"/>

ใน Page1.xaml.cs เราจะรับ callback ของการกดปุ่ม Next Page แบบนี้

await Navigation.PushAsync(new Page2());

เช่นเดียวกันใน Page2.xaml.cs ก็ทำแบบเดียวกันแต่ให้ Navigation ไปที่ Page3 แทน

await Navigation.PushAsync(new Page3());

แต่ใน OnPreviousPageClicked นั้นเราจะไม่ได้ให้มัน Navigation.PushAsync(new Page1()); เพราะ ถ้าเราอ่านจากโค๊ดก็รู้แล้วว่า มันสร้างหน้า Page1 ใหม่ มันผิดธรรมชาติ เราแค่อยากกลับไปไม่ใช่สร้างใหม่ ดังนั้นเราจะใช้ PopAsync() คับ ตามชื่อ มี Push ก็ต้องมี Pop มันก็จะ Pop หน้าที่แสดงอยู่ปัจจุบัน ออกไปนั่นเอง โดยใช้โค๊ดดังนี้

await Navigation.PopAsync();

Page2.xaml.cs จะมีหน้าตาแบบนี้ครับ

หน้าสุดท้าย Page3.xaml.cs จะเป็นแบบนี้คับ

เราลองกดรันแล้วทดลองกดปุ่มได้เลยคับ ซึ่งถ้าใช้ Android เราจะสามารถ Back ได้เลยโดยกดที่ปุ่ม Back ในเครื่องได้เลยซึ่งใน iPhone ไม่มี และที่บนซ้ายของหน้าจะมีลูกศร ถ้าเรากดแล้วจะกลับไปหน้าก่อนหน้าเช่นกัน มันคือความสามารถของ Navigation Page ที่ช่วยให้เราควบคุมหน้าต่างๆได้อย่างง่าย

ref: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/