تمرين: تنفيذ التنقل بين علامات التبويب

مكتمل

في تطبيق علم الفلك، يطلب منك دمج علامات التبويب مع القائمة المنبثقة للمساعدة في التنقل بين الصفحات المختلفة.

أول شيء تقرر القيام به هو إزالة جميع الصفحات من القائمة المنبثقة وإضافتها إلى 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 إلى شروق الشمس وإلى Iconsun.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 إلى Astronomy وأيقونتها إلى moon.png.

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

3. <FlyoutItem>ضمن ، أضف <ShellContent> الذي يشير إلى MoonPhasePage. تعيين الخاصية الخاصة به Title إلى طور القمر وخاصية 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 إلى شروق الشمس والخاصية إلى Icon.

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