יישום ניווט בכרטיסיות באמצעות מעטפת .NET MAUI
- 10 דקות
ניווט באמצעות מקש טאב הוא תבנית ניווט שבה רצועת כרטיסיות (שורה של פקדים הניתנים למגע) מוצגת לצמיתות בחלק העליון או התחתון של המסך. ניווט בכרטיסיות מספק מנגנון לבחירת המשתמש בין דפים ביישום מרובה עמודים.
ביחידה זו, תלמד כיצד ליצור אפליקציה המיישמת ניווט בכרטיסיות.
מהו ניווט בכרטיסיות?
באפליקציה המשתמשת בניווט באמצעות כרטיסיות, כל כרטיסיה מייצגת מקטע או עמוד ספציפי של היישום. המשתמשים בוחרים כרטיסיות בתוך רצועת הכרטיסיות כדי לעבור בין התוכן ביישום. לדוגמה, האיור הבא מציג את השימוש בניווט בכרטיסיות באפליקציית שעון iOS. הסמלים המסומנים בבסיס הדף מאפשרים לך לעבור בין תצוגות שונות. סמלים אלה מתאימים לכרטיסיות, והתצוגות הן עמודים בכרטיסיות:
מאחר שרצועת הכרטיסיות גלויה תמיד, ניווט בכרטיסיות מאפשר למשתמשים לעבור במהירות בין התוכן ביישום. ניווט באמצעות טאבים הוא אידיאלי כאשר יישום כולל כמה מקטעים שבהם משתמש עשוי להשתמש לעתים קרובות. יישומי שעון הם דוגמה מעולה. המקטעים שעון, התראה ושעון עצר עשויים לשמש לעתים קרובות.
במכשירים ניידים, רצועת הכרטיסיות כוללת בדרך כלל כמות מוגבלת של שטח והיא יכולה להציג רק מספר קבוע של כרטיסיות, בהתאם לגודל ולכיוון של המכשיר. ההמלצה היא להשתמש בשלוש עד ארבע כרטיסיות בלבד. אם תכלול כרטיסיות נוספות, לא מובטח שיהיה לך מספיק מקום להצגת כל הכרטיסיות בכל המכשירים. מערכות ההפעלה הנתמכות על-ידי .NET MAUI מאפשרות אזור גלישה. אזור זה מספק שטח נוסף לגישה אל כרטיסיות שלא נכנסות למסך. עם זאת, ניווט אל כרטיסיות גלישה אלה דורש שלבים נוספים על-ידי המשתמש. מקטעים אלה פחות ניתנים לגילוי.
אם דרושות לך יותר מארבע כרטיסיות, שקול להשתמש בתבנית ניווט אחרת, כגון ניווט של פריט נשלף. בנוסף, ניווט בכרטיסיות אינו האפשרות הטובה ביותר אם הנתונים שלך מספקים הירארכיה טבעית של פרטי בסיס. במקרים אלה, עליך לשקול ניווט בערימה.
ניווט בכרטיסיות באפליקציית .NET MAUI
עליך להשתמש באובייקט TabBar כדי ליישם ניווט בכרטיסיות ביישום מעטפת של .NET MAUI. האובייקט TabBar מציג קבוצת כרטיסיות ומציג באופן אוטומטי את התוכן המוצג כאשר המשתמש בוחר כרטיסיה. האיור הבא מציג את אזורי ממשק המשתמש.
כדי להשתמש בכרטיסיות ביישום מעטפת MAUI של .NET, צור מופע TabBar המחלקה כצאצא של Shell המחלקה. לאחר מכן Tab אובייקטים אלה TabBar. בתוך Tab, יש ShellContent אובייקט אחר לאובייקט ContentPage אובייקט.
יצירת עמוד עם לשוניות
באפשרותך ליצור מופע 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>