יישום ניווט נשלף

הושלמה

ניווט נשלף הוא סוג של ניווט שבו חלון של שקופיות פריטי תפריט (או מעופף החוצה) מהצד של מסך המכשיר. היא מופעלת על-ידי הקשה על תפריט 'המבורגר', סמל עם שלושה קווים אופקיים מוערמים זה על זה.

ביחידה זו, תלמד כיצד לבנות אפליקציה המיישמת ניווט נשלף בממשק משתמש של יישום מרובה פלטפורמות (MAUI) של .NET.

מהו ניווט נשלף?

ניווט נשלף מציג תפריט המספק אמצעים מהירים כדי להחליף הקשר בתוך היישום שלך.

התפריט הנשלף מורכב מכמה חלקים, Header, FlyoutItems, MenuItemsו- Footer.

התמונה הבאה מציגה דוגמה חזותית של החלקים הנשלף.

מאחר שתפריט התפריט הנשלף אינו גלוי תמיד, ניתן להשתמש בו כדי להחליף הקשר בין חלקים שונים של היישום באופן מושגי. לדוגמה, פריט נשלף אחד עשוי להוביל לדף הזנת נתונים (או לעמודים) ולדף אחר אודות.

ניווט נשלף באפליקציית .NET MAUI

עליך להשתמש בכיתה FlyoutItem כדי ליישם ניווט נשלף ב- .NET MAUI. FlyoutItem מהווה חלק פיתוח אפליקציות של מעטפת המסופקת על-ידי .NET MAUI

ניווט עם תפריט נשלף ב- .NET MAUI מתרחש FlyoutItem פריט בעת הקישו על פריט. האפליקציה FlyoutItem את התוכן המוצג באפליקציה באופן אוטומטי. ציין מה יוצג בעת הקשה על FlyoutItem על-ידי הגדרת ShellContent המאפיין. מאפיין זה מצביע על דף ביישום שלך.

יש FlyoutItem את הדף הראשי של Shell, המשמש כדף הראשי של היישום שלך. ובאפשרותך לקבל כמה FlyoutItemשתרצה.

הדוגמה הבאה יוצרת תפריט נשלף המכיל שני פריטים נשלף:

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:controls="clr-namespace:Xaminals.Controls"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
    <FlyoutItem Title="Cats"
                Icon="cat.png">
       <Tab>
           <ShellContent ContentTemplate="{DataTemplate views:CatsPage}" />
       </Tab>
    </FlyoutItem>
    <FlyoutItem Title="Dogs"
                Icon="dog.png">
       <Tab>
           <ShellContent ContentTemplate="{DataTemplate views:DogsPage}" />
       </Tab>
    </FlyoutItem>
</Shell>

יצירת תפריט נשלף

ניתן להוסיף פריט נשלף אחד או יותר לתדפיס הנשלף. אובייקט FlyoutItem מייצג כל פריט נשלף. כל FlyoutItem אובייקט צריך להיות צאצא של אובייקט Shell המשנה המשמש כאובייקט היישום MainPage.

האובייקט Shell מכיל אופרטורים משתמעים של המרה המאפשרים להירארכיה החזותית של המעטפת להיות פשוטה יותר. פשטות זו אפשרית מאחר אובייקט Shell בעל מחלקת משנה יכול להכיל אובייקטי FlyoutItem או אובייקט TabBar בלבד, אשר יכולים להכיל רק Tab אובייקטים, העשויים להכיל רק ShellContent אובייקטים.

ניתן להשתמש באופרטורים משתמעים אלה כדי להסיר FlyoutItem האובייקטים Tab האובייקטים מהדוגמה הקודמת:

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:controls="clr-namespace:Xaminals.Controls"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
   <ShellContent Title="Cats"
                 Icon="cat.png"
                 ContentTemplate="{DataTemplate views:CatsPage}" />
   <ShellContent Title="Dogs"
                 Icon="dog.png"
                 ContentTemplate="{DataTemplate views:DogsPage}" />
</Shell>

קוד זה מחזיר תפריט נשלף עם שני פריטים. הטבלה CatsPage מוצגת כברירת מחדל כאשר האפליקציה נפתחת. הקשה על השניה מציגה את DogsPage.

פריטי תפריט נשלף

ניתן להוסיף פריטי תפריט לתפריט הנשלף. אובייקט MenuItem מייצג כל פריט תפריט. פריטי תפריט דומים ללחצנים בהקשה על אחד מהם מובילה לפעולה במקום להצגה של עמוד.

מיקום האובייקטים MenuItem הנשלף תלוי בסדר ההצהרה שלהם בהירארכיה החזותית של המעטפת. לכן, אובייקטי MenuItem שהוצהר לפני אובייקטי FlyoutItem יופיעו לפני אובייקטי FlyoutItem בתפריט הנשלף, ואובייקטי MenuItem שהוצהר לאחר אובייקטי FlyoutItem יופיעו לאחר אובייקטי FlyoutItem בתפריט הנשלף.

<Shell ...>
    ...            
    <MenuItem Text="Help"
              IconImageSource="help.png"
              Command="{Binding HelpCommand}"
              CommandParameter="https://learn.microsoft.com/dotnet/maui/fundamentals/shell" />    
</Shell>

כותרת עליונה וכותרת תחתונה של תפריט נשלף

הכותרת הנשלף היא התוכן שמופיע באופן אופציונלי בחלק העליון של התפריט הנשלף. הגדר את מראה הכותרת על-ידי הגדרת אובייקט עם המאפיין Shell.FlyoutHeader הניתן לאיגוד:

<Shell ...>
    <Shell.FlyoutHeader>
        <Grid>
            <Image Source="header-image.png" />
        </Grid>
    </Shell.FlyoutHeader>
</Shell>

הכותרת התחתונה של התפריט הנשלף היא התוכן שמופיע בחלק התחתון של התפריט הנשלף. הגדר את המראה של הכותרת התחתונה על-ידי הגדרת אובייקט עם Shell.FlyoutFooter הניתן לאיגוד:

<Shell ...>
    <Shell.FlyoutFooter>
        <Grid>
            <Image Source="footer-image.png" />
        </Grid>
    </Shell.FlyoutFooter>
</Shell>