תרגיל: יישום ניווט נשלף

הושלמה

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

בתרגיל זה, תוסיף ניווט נשלף לאפליקציה.

מודול זה משתמש ב-SDK של .NET 10.0. ודא שיש לך .NET 10.0 מותקן על ידי הרצת הפקודה הבאה בטרמינל הפקודות המועדף עליך:

dotnet --list-sdks

הפלט דומה לדוגמה הבאה מופיע:

9.0.100 [C:\Program Files\dotnet\sdk]
10.0.100 [C:\Program Files\dotnet\sdk]

ודא שגירסה המתחילה 10 רשומה. אם לא מופיעה פקודה או שהפקודה לא נמצאת, התקן את ערכת הפיתוח העדכנית ביותר .NET 10.0.

פתח את פתרון ההתחלה

1. שכפל או הורד את של פעילות גופנית.

   הערה

   מומלץ לשכפל או להוריד את תוכן התרגיל לנתיב תיקיה קצר, כגון C:\dev, כדי להימנע מקבצים שנוצרו על-ידי גירסאות Build שחורגים מאורך הנתיב המרבי.

2. עבור אל תרגיל 1 התיקיה repo המשוכפל ולאחר מכן עבור אל התחל התיקיה.

3. השתמש ב- Visual Studio כדי לפתוח את Astronomy.sln או את התיקיה ב- Visual Studio Code.

4. בחלון פתרון, בחלון אסטרונומיה, הרחב את עמודים שלך. תיקיה זו מכילה את הדפים הבאים:

   • אודותPage. דף זה מציג מידע אודות היישום.
   • MoonPhasePage. דף זה מציג מידע ספציפי על שלבי הירח כפי שניתן לראות מכדור הארץ.
   • SunrisePage. עמוד זה מציג שעות של זריחה ושקיעה עבור מיקומים על כדור הארץ. הנתונים מסופקים על-ידי שירות האינטרנט של שקיעה בזריחה.

5. בנה והפעל את האפליקציה. כאשר האפליקציה מופעלת, MoonPhasePage מוצג, אך בשלב זה אין כל אמצעי שניתן לאפשר למשתמש לנווט לדפים האחרים.

   התמונה הבאה מציגה את האפליקציה הפועלת על אמולטור Android:

   

6. סגור את האפליקציה וחזור אל Visual Studio או Visual Studio Code.

הוספת ניווט נשלף

1. בחלון סייר הפתרונות, פתח את AppShell.xaml שלך.

2. בעורך הסימון של XAML, הקף את <ShellContent> הקיים בפריט <FlyoutItem>. הגדר את Title המאפיינים של <Flyout> כך ש- הירח. הסימון אמור להיראות כך:

   <FlyoutItem Title="Moon Phase">
       <ShellContent
           ContentTemplate="{DataTemplate local:MoonPhasePage}"/> 
   </FlyoutItem>
   

3. הוסף מאפיין FlyoutIcon לצומת <Shell> כדי להציג תמונה. כברירת מחדל, היא מציגה שלושה פסים אופקיים, אך אנו יכולים לשנות אותה כך שהיא תהיה מה שנרצונך. הסימון אמור להיראות כך:

   <Shell
       x:Class="Astronomy.AppShell"
       xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:local="clr-namespace:Astronomy.Pages"
       FlyoutIcon="moon.png">
   

4. הפעל את היישום. כעת אתה אמור לראות תמונת ירח בפינה הימנית העליונה של האפליקציה.

   

   הקש על הסמל והתפריט הנשלף יופיע.

   

5. כעת הוסף אפשרויות תפריט נשלף נוספות. צור דף <FlyoutItem> מתחת לפריט שיצרת זה עתה והגדר את Title שלו בזריחה. הטקסט ShellContent אמור להצביע על SunrisePage העמוד.

6. הוסף עוד <FlyoutItem>, הגדר את הכותרת שלה אודות. הפעם הגדר את ShellContent ל- AboutPage. ה- XAML עבור שני פריטים אלה אמור להיראות כך:

   <FlyoutItem Title="Sunrise">
       <ShellContent
           ContentTemplate="{DataTemplate local:SunrisePage}"/>
   </FlyoutItem>
   
   <FlyoutItem Title="About">
       <ShellContent
           ContentTemplate="{DataTemplate local:AboutPage}"/>
   </FlyoutItem>
   

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

   

   הערה

   אם אתה משתמש בפלטפורמה שאינה Windows, ייתכן שתצטרך להפוך את הרשאת המיקום לזמינה עבור האפליקציה שלך בפלטפורמה זו כדי שהדף Sunrise/Sunset Times שלך יפעל. לדוגמה, במכשיר Android, הגדר את גישה למיקום אפשר רק בעת שימוש באפליקציה.

הוספת סמלים

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

כמה תמונות נוספו כבר לתיקיה משאבים/ שלך לשימוש.

1. הגדר את Icon של המאפיין הראשון FlyoutItem ל- moon.png.

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

2. חזור על הפעולה עבור שני הפריטים הנשלף האחרים, באמצעות sun.png ו- question.png בהתאמה.

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

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

   

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

פריטי התפריט הנשלף נמצאים בחלק העליון של התפריט הנשלף, כך שקשה להבחין ביניהם. אנו יכולים להוסיף שטח לחלק העליון, ואפילו רווח שלם View באמצעות <Shell.FlyoutHeader>.

1. הוסף כותרת תפריט נשלף כצאצא של <Shell> ההודעה:

   <Shell.FlyoutHeader>
   </Shell.FlyoutHeader>
   

2. באפשרותך ליצור כל הירארכיית תצוגה שתרצה בתוך <Shell.FlyoutHeader>. בוא נשים חוברת עבודה עם Grid עם Image.

   <Shell.FlyoutHeader>
       <Grid HeightRequest="100" BackgroundColor="DarkSlateBlue">
           <Image Source="moon.png" />
       </Grid>
   </Shell.FlyoutHeader>