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

مكتمل

في السيناريو النموذجي، لديك تطبيق .NET MAUI يحتوي على صفحات لعرض معلومات حول الأجسام الفلكية، وأطوار القمر، وأوقات شروق الشمس/غروب الشمس. يتضمن التطبيق أيضا صفحة حول. حاليا، كل هذه الصفحات مستقلة، ولكنك تريد توفير طريقة منطقية للمستخدم للتنقل بينها.

في هذا التمرين، يمكنك إضافة التنقل المنبثق إلى التطبيق.

تستخدم هذه الوحدة حزمة تطوير البرمجيات .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. استنساخ أو تحميل exercise repo.

   إشعار

   من الأفضل استنساخ محتوى التمرين أو تنزيله إلى مسار مجلد قصير، مثل C:\dev، لتجنب تجاوز الملفات المنشأة الحد الأقصى لطول المسار.

2. انتقل إلى مجلد exercise1 في المستودع المستنسخ، ثم انتقل إلى مجلد البدء.

3. استخدم Visual Studio لفتح حل Astronomy.sln أو المجلد في Visual Studio Code.

4. في نافذة مستكشف الحلول، في مشروع Astronomy، قم بتوسيع مجلد Pages. يحتوي هذا المجلد على الصفحات التالية:

   • حول الصفحة. تعرض هذه الصفحة معلومات التطبيق.
   • MoonPhasePage. تعرض هذه الصفحة معلومات محددة حول مراحل القمر كما هو معروض من الأرض.
   • شروق الشمس. تعرض هذه الصفحة أوقات شروق الشمس وغروب الشمس للمواقع على الأرض. يتم توفير البيانات بواسطة خدمة ويب Sunrise Sunset.

5. قم بإنشاء التطبيق وتشغيله. عند بدء تشغيل التطبيق، يتم عرض MoonPhasePage ، ولكن حاليا لا توجد وسائل متوفرة لتمكين المستخدم من الانتقال إلى الصفحات الأخرى.

   تظهر الصورة التالية التطبيق الذي يعمل على محاكي Android:

   

6. أغلق التطبيق وارجع إلى Visual Studio أو Visual Studio Code.

إضافة التنقل المنبثق

1. في نافذة Solutions Explorer، افتح صفحة AppShell.xaml .

2. في محرر علامات XAML، قم بإحاطة العنصر الموجود <ShellContent> ب <FlyoutItem>. Title تعيين الخاصية للعنصر <Flyout> ليكون Moon Phase. يجب أن تبدو العلامات كما يلي:

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