תרגיל: יישום ניווט בכרטיסיות

הושלמה

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

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

הוספת סרגל כרטיסיות

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

2. בדף הסימון של XAML, מחק את כל מה שבתוך <Shell>.

3. צור <TabBar> ותרשים ריק <Tab>.

   <?xml version="1.0" encoding="UTF-8" ?>
   <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">
   
       <TabBar>
           <Tab>
   
           </Tab>
       </TabBar>
   </Shell>
   

4. לאחר מכן, הוסף ShellContent לדף Tab והגדר את התוכן שלו MoonPhasePage.

   <TabBar>
       <Tab>
           <ShellContent ContentTemplate="{DataTemplate local:MoonPhasePage}" />
       </Tab>
   </TabBar>
   

5. כעת תן לכרטיסייה כותרת להצגה וסמל באמצעות המאפיינים Title וIcon המאפיינים.

   <Tab Title="Moon Phase" Icon="moon.png">
   

6. הוסף עוד Tab עבור SunrisePage. הגדר את Title כדי בזריחה שלה Icon כדי sun.png. ה- XAML המוגמר נראה כך:

   <?xml version="1.0" encoding="UTF-8" ?>
   <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">  
   
       <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>
   

7. הפעל את האפליקציה כדי לראות כיצד היא נראית.

   

שילוב עמודי כרטיסיה עם תפריט נשלף

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

1. מחק את TabBar ואת כל פריטי הצאצא הכלולים בה.

2. במקומה, הוסף חשבון <FlyoutItem>. הגדר את Title שלו כך אסטרונומיה הסמל שלו כדי moon.png.

   <FlyoutItem Title="Astronomy" Icon="moon.png">
   
   </FlyoutItem>
   

3. בתוך <FlyoutItem>, הוסף <ShellContent> שמצביעה על MoonPhasePage. הגדר את המאפיין Title שלו ל- Moon PhaseIcon ו- Icon ל- moon.png.

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

4. באותו <FlyoutItem>, הוסף עוד <ShellContent> כדי להצביע על SunrisePage. הגדר את המאפיין Title שלו ל- Sunrise ו- Icon כדי לראות sun.png.

   <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>
   

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

5. כדי ליצור פריט תפריט נשלף חדש שמצביע על AboutPage, הוסף פריט <FlyoutItem>. הגדר את המאפיין Title שלו כמאפיין אודות והמאפיין Icon כ- question.png.

6. בתוך <FlyoutItem>, הוסף <ShellContent> שמצביעה על AboutPage.

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

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

זקוק לעזרה?

קוד ה- XAML הסופי עבור AppShell.xaml אמור להיראות כך:

<?xml version="1.0" encoding="UTF-8" ?>
<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">

    <!-- You can add this back in for the header -->
    <!--<Shell.FlyoutHeader>
        <Grid HeightRequest="100" BackgroundColor="DarkSlateBlue">
            <Image Source="moon.png"/>
        </Grid>
    </Shell.FlyoutHeader>-->

    <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>
</Shell>