ใช้การนําทางแบบแท็บด้วย .NET MAUI Shell

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

ในหน่วยนี้ คุณจะได้เรียนรู้วิธีการสร้างแอปที่ใช้การนําทางของแท็บ

การนําทางของแท็บคืออะไร

ในแอปที่ใช้การนําทางของแท็บ แต่ละแท็บจะแสดงส่วนหรือหน้าที่เฉพาะเจาะจงของแอป ผู้ใช้เลือกแท็บภายในแถบแท็บเพื่อย้ายไปมาระหว่างเนื้อหาในแอปพลิเคชัน ตัวอย่างเช่น ภาพประกอบต่อไปนี้แสดงการใช้การนําทางแบบแท็บในแอปนาฬิกา iOS ไอคอนที่ไฮไลต์ที่ฐานของหน้า ช่วยให้คุณสามารถสลับไปมาระหว่างมุมมองต่างๆ ได้ ไอคอนเหล่านี้สอดคล้องกับแท็บ และมุมมองเป็นหน้าแบบแท็บ:

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

บนอุปกรณ์เคลื่อนที่ โดยทั่วไปแถบแท็บจะมีพื้นที่จํากัด และสามารถแสดงได้เฉพาะจํานวนแท็บที่กําหนดโดยขึ้นอยู่กับขนาดอุปกรณ์และการวางแนว คําแนะนําคือการใช้แท็บเพียงสามถึงสี่แท็บ ถ้าคุณใส่แท็บเพิ่มเติม คุณไม่รับประกันว่ามีพื้นที่เพียงพอที่จะแสดงแท็บทั้งหมดในอุปกรณ์ทั้งหมด ระบบปฏิบัติการที่ได้รับการสนับสนุนโดย .NET MAUI อนุญาตสําหรับพื้นที่ที่ล้นออกมา พื้นที่นี้มีพื้นที่เพิ่มเติมในการเข้าถึงแท็บที่ไม่พอดีกับหน้าจอ อย่างไรก็ตาม การนําทางไปยังแท็บที่ล้นเกินเหล่านี้ต้องการขั้นตอนเพิ่มเติมโดยผู้ใช้ ส่วนเหล่านี้จะไม่สามารถค้นหาได้น้อยกว่า

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

การนําทางแบบแท็บในแอป .NET MAUI

คุณใช้วัตถุ TabBar เพื่อใช้การนําทางแท็บในแอปเชลล์ .NET MAUI วัตถุ TabBar จะแสดงชุดของแท็บและสลับเนื้อหาที่แสดงโดยอัตโนมัติเมื่อผู้ใช้เลือกแท็บ ภาพประกอบต่อไปนี้แสดงพื้นที่ UI

หากต้องการใช้แท็บในแอปพลิเคชัน .NET MAUI Shell ให้สร้างอินสแตนซ์ของคลาส TabBar เป็นระดับลูกของคลาส Shell จากนั้นเพิ่ม Tab วัตถุ ไปยัง TabBar ภายในวัตถุ Tab วัตถุ ShellContent ควรถูกตั้งค่าเป็นวัตถุ ContentPage

สร้าง TabbedPage

คุณสามารถสร้างอินสแตนซ์ TabBar เป็นระดับลูกของคลาส Shell เพิ่มวัตถุ Tab เป็นวัตถุย่อยลงใน TabBar ตามความจําเป็น ภายในวัตถุ Tab วัตถุ ShellContent ควรถูกตั้งค่าเป็นวัตถุ ContentPage

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
    <TabBar>
       <Tab Title="Moon Phase"
            Icon="moon.png">
           <ShellContent ContentTemplate="{DataTemplate local:MoonPhasePage}" />
       </Tab>
       <Tab Title="Sunrise"
            Icon="sun.png">
           <ShellContent ContentTemplate="{DataTemplate local:SunrisePage}" />
       </Tab>
    </TabBar>
</Shell>

แท็บภายในเมนูลอย

รายการลอยสามารถเปิดหน้าด้วยแถบแท็บที่แสดงอย่างน้อยหนึ่งแท็บ

เมื่อต้องการนําการออกแบบนี้ไปใช้ ให้เพิ่มรายการ <ShellContent> ภายใน <FlyoutItem> สําหรับแต่ละแท็บที่คุณต้องการให้แสดง

ตั้งค่า Title และ Icon บน <ShellContent> เพื่อควบคุมชื่อและไอคอนของแท็บ

<FlyoutItem Title="Astronomy" Icon="moon.png">
    <ShellContent Title="Moon Phase" Icon="moon.png"
        ContentTemplate="{DataTemplate local:MoonPhasePage}"/>

    <ShellContent Title="Sunrise" Icon="sun.png"
        ContentTemplate="{DataTemplate local:SunrisePage}"/>
</FlyoutItem>

<FlyoutItem Title="About" Icon="question.png">
    <ShellContent
        ContentTemplate="{DataTemplate local:AboutPage}"/>
</FlyoutItem>