تنفيذ التنقل بين علامات التبويب باستخدام .NET MAUI Shell
- 10 دقائق
التنقل بين علامات التبويب هو نمط تنقل حيث يتم عرض شريط علامات التبويب (صف من عناصر التحكم التي يمكن لمسها) بشكل دائم في أعلى الشاشة أو أسفلها. يوفر التنقل بين علامات التبويب آلية للمستخدم لتحديدها بين الصفحات في تطبيق متعدد الصفحات.
في هذه الوحدة، ستتعلم كيفية إنشاء تطبيق ينفذ التنقل بين علامات التبويب.
ما المقصود بالتنقل بين علامات التبويب؟
في تطبيق يستخدم التنقل بين علامات التبويب، تمثل كل علامة تبويب مقطعا أو صفحة معينة من التطبيق. يقوم المستخدمون بتحديد علامات التبويب داخل شريط علامات التبويب للتنقل بين المحتوى في التطبيق. على سبيل المثال، يوضح الرسم التوضيحي التالي استخدام التنقل بين علامات التبويب في تطبيق iOS Clock. تمكنك الأيقونات المميزة في قاعدة الصفحة من التبديل بين طرق العرض المختلفة. تتوافق هذه الأيقونات مع علامات التبويب، وتكون طرق العرض صفحات مبوبة:
نظرًا إلى أن شريط علامات التبويب يكون مرئيًا دائمًا، يتيح التنقل بين علامات التبويب للمستخدمين التبديل بسرعة بين المحتوى في التطبيق. يعد نظام التنقل بين علامات التبويب مثاليًا عندما يحتوي التطبيق على عدة أقسام من المحتمل أن يستخدمها المستخدم بشكل متكرر. تطبيقات الساعة مثال ممتاز. من المرجح أن يتم استخدام أقسام clock وalarm وstopwatch بشكل متكرر.
على الأجهزة المحمولة، عادةً ما يحتوي شريط علامات التبويب على مساحة محدودة ويمكن عرض عدد محدد فقط من علامات التبويب، اعتمادًا على حجم الجهاز واتجاهه. التوصية هي استخدام ثلاث إلى أربع علامات تبويب فقط. إذا قمت بتضمين المزيد من علامات التبويب، فليس من المضمون أن تكون لديك مساحة كافية لإظهار كل علامات التبويب على كل الأجهزة. تسمح أنظمة التشغيل المدعومة من قبل .NET MAUI بمنطقة تجاوز السعة. توفر هذه المنطقة مساحة أكبر للوصول إلى علامات التبويب التي لا تتناسب مع الشاشة. ومع ذلك، يتطلب الانتقال إلى علامات التبويب تجاوز السعة هذه خطوات إضافية من قبل المستخدم. هذه الأقسام أقل قابلية للاكتشاف.
إذا كنت بحاجة إلى أكثر من أربع علامات تبويب، ففكر في استخدام نمط تنقل آخر، مثل التنقل بين عناصر القائمة المنبثقة. بالإضافة إلى ذلك، لا يعد التنقل بين علامات التبويب الخيار الأفضل إذا كانت بياناتك تشكل تسلسلا هرميا طبيعيا تفصيليا رئيسيا. في هذه الحالات، يجب مراعاة التنقل بين الصفحات المجمعة.
التنقل بين علامات التبويب في تطبيق .NET MAUI
يمكنك استخدام TabBar الكائن لتنفيذ التنقل بين علامات التبويب في تطبيق .NET MAUI shell.
TabBar يعرض الكائن مجموعة من علامات التبويب ويبدل المحتوى المعروض تلقائيا عندما يحدد المستخدم علامة تبويب. يوضح الرسم التوضيحي التالي مناطق واجهة المستخدم.
لاستخدام علامات التبويب في تطبيق .NET MAUI Shell، قم بإنشاء مثيل للفئة TabBar كفئة تابعة للفئة Shell . ثم أضف Tab كائنات إلى TabBar.
Tab داخل الكائن، يجب تعيين كائن ShellContent إلى كائنContentPage.
قم بإنشاء TabbedPage
يمكنك إنشاء مثيل TabBar باعتباره تابعا للفئة Shell . إضافة Tab كائنات كتوابع إلى TabBar حسب الحاجة.
Tab داخل الكائن، يجب تعيين كائن ShellContent إلى كائنContentPage.
<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:views="clr-namespace:Xaminals.Views"
x:Class="Xaminals.AppShell">
<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>
علامات التبويب ضمن قائمة منبثقة
يمكن لعنصر القائمة المنبثقة فتح صفحة مع شريط علامات تبويب يعرض علامة تبويب واحدة أو أكثر.
لتنفيذ هذا التصميم، أضف عنصرا <ShellContent> داخل <FlyoutItem> لكل علامة تبويب تريد عرضها.
Title قم بتعيين و Icon على <ShellContent> للتحكم في عنوان علامة التبويب وأيقونتها.
<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>