قيم خاصة بالنظام الأساسي في XAML - Training

5 دقائق

ستكون التجربة المرئية لتطبيقك مختلفة على كل نظام أساسي. ستحتاج في كثير من الأحيان إلى ضبط واجهة المستخدم الخاصة بك لكل نظام أساسي استنادًا إلى العناصر المرئية التي تستخدمها. يمكنك .NET MAUI من إدارة تخطيط التطبيق الخاص بك استنادا إلى خصائص الجهاز هذه.

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

استخدام فئة الجهاز

DeviceInfo الفئة هي فئة أداة مساعدة توفر معلومات خاصة بالجهاز للجهاز الذي يعمل عليه تطبيقك. يعرض هذه المعلومات من خلال مجموعة من الخصائص. الخاصية الأكثر أهمية هي DeviceInfo.Platform، التي ترجع سلسلة تشير إلى نوع الجهاز المستخدم حاليا: Androidأو iOSWinUI.macOS

ضع في اعتبارك السيناريو التالي كمثال على الوقت الذي قد تستخدم فيه هذه الميزة. السلوك الافتراضي لتطبيق .NET MAUI iOS هو أن المحتوى الذي تمت إضافته إلى صفحة يتعدى على شريط حالة iOS في أعلى الشاشة. تريد تغيير هذا السلوك. أبسط حل هو نقل المحتوى لأسفل في الصفحة. يعالج حل الملاحظات الذي أنشأته في التمرين السابق هذه المشكلة عن طريق تعيين Padding خاصية VerticalStackLayout عنصر التحكم لنقل المحتوى لأسفل بمقدار 60 نقطة:

<VerticalStackLayout x:Name="MyStackLayout" Padding="30,60,30,30">
    ...
</VerticalStackLayout>

المشكلة هي أن هذه المشكلة قابلة للتطبيق فقط على iOS. يؤدي نقل المحتوى إلى أسفل هذا القدر على Android وWinUI إلى إهدار شاشة العقارات في أعلى الصفحة.

يمكنك الاستعلام عن الخاصية DeviceInfo.Platform لحل مشكلة العرض هذه. يمكنك إضافة التعليمات البرمجية التالية إلى منشئ صفحة التطبيق لتوسيع المساحة في أعلى الصفحة، ولكن فقط لنظام التشغيل iOS:

MyStackLayout.Padding = 
    DeviceInfo.Platform == DevicePlatform.iOS
        ? new Thickness(30, 60, 30, 30) // Shift down by 60 points on iOS only
        : new Thickness(30); // Set the default margin to be 30 points

إشعار

DevicePlatform.iOSDevicePlatform هي بنية ترجع قيمة iOSالسلسلة . هناك خصائص مكافئة للأنظمة الأساسية المدعومة الأخرى. يجب استخدام هذه الخصائص بدلا من المقارنة مع السلاسل ذات التعليمات البرمجية المضمنة؛ إنها ممارسة جيدة، وهي تبرهن على التعليمات البرمجية في المستقبل إذا تغيرت بعض قيم السلسلة هذه في المستقبل.

تعمل هذه التعليمة البرمجية، ولكنها في ملف التعليمات البرمجية الخلفية للصفحة. ترك المساحة هو قيمة خاصة بواجهة المستخدم. يمكن القول إنه من الأنسب والمريح القيام بذلك من XAML بدلا من التعليمات البرمجية في الخلف.

استخدام ملحق العلامات OnPlatform

يوفر OnPlatform .NET MAUI XAML ملحق العلامات، والذي يسمح لك بالكشف عن النظام الأساسي لوقت التشغيل من داخل التعليمات البرمجية XAML. يمكنك تطبيق ملحق العلامات هذا كجزء من التعليمات البرمجية XAML التي تعين قيمة خاصية. يتطلب منك الملحق توفير نوع الخاصية، جنبا إلى جنب مع سلسلة من On Platform الكتل التي تقوم فيها بتعيين قيمة الخاصية وفقا للنظام الأساسي.

إشعار

OnPlatform ملحق العلامات عام؛ يأخذ معلمة نوع. يضمن النوع المحدد بواسطة السمة TypeArguments استخدام نوع الملحق الصحيح.

يمكنك تعيين الخاصية Padding مثل هذا. لاحظ أن نوع الخاصية Padding هو Thickness:

<VerticalStackLayout>
    <VerticalStackLayout.Padding>
        <OnPlatform x:TypeArguments="Thickness">
            <On Platform="iOS" Value="30,60,30,30" />
        </OnPlatform>
    </VerticalStackLayout.Padding>
    <!--XAML for other controls goes here -->
    ...
</VerticalStackLayout>

بالنسبة للأنظمة الأساسية غير iOS، سيبقى ترك المساحة معينا إلى قيمته الافتراضية "0,0,0,0". بالنسبة إلى WinUI وAndroid، يمكنك تعيين ترك المساحة إلى 30 نقطة مع كتل إضافية OnPlatform :

<VerticalStackLayout>
    <VerticalStackLayout.Padding>
        <OnPlatform x:TypeArguments="Thickness">
            <On Platform="iOS" Value="30,60,30,30" />
            <On Platform="Android" Value="30" />
            <On Platform="WinUI" Value="30" />
        </OnPlatform>
    </VerticalStackLayout.Padding>
    ...
</VerticalStackLayout>

يمكنك تطبيق هذه التقنية نفسها على خصائص أخرى. يغير المثال التالي لون خلفية تخطيط المكدس على صفحة إلى Silver على iOS، إلى أخضر على Android، وإلى أصفر على Windows.

<VerticalStackLayout>
    ...
    <VerticalStackLayout.BackgroundColor>
        <OnPlatform x:TypeArguments="Color">
            <On Platform="iOS" Value="Silver" />
            <On Platform="Android" Value="Green" />
            <On Platform="WinUI" Value="Yellow" />
        </OnPlatform>
    </VerticalStackLayout.BackgroundColor>
    ...
</VerticalStackLayout>

بناء الجملة هذا مطول قليلا، ولكن هناك بناء جملة منخفض متاح للملحق OnPlatform . يمكنك تبسيط المثال الذي يعين ترك المساحة، كما يلي:

<VerticalStackLayout Padding="{OnPlatform iOS='30,60,30,30', Default='30'}">
    <!--XAML for other controls goes here -->
</VerticalStackLayout>

يمكنك تحديد قيمة افتراضية لخاصية، جنبا إلى جنب مع أي قيم خاصة بالنظام الأساسي. في هذا النموذج، يتم استنتاج معلمة النوع من الخاصية التي يتم تطبيق السمة OnPlatform عليها.

لتعيين لون الخلفية، يمكنك استخدام جزء XAML هذا بدلا من المثال السابق الثاني:

<VerticalStackLayout BackgroundColor="{OnPlatform WinUI=Yellow, iOS=Silver, Android=Green}">
    ...
</VerticalStackLayout>

اختبر معلوماتك

ما ملحق العلامات الذي يمكنك استخدامه في التعليمات البرمجية XAML للكشف عن النظام الأساسي الذي يعمل عليه التطبيق؟

DevicePlatform

DeviceInfo

OnPlatform

ما هو الغرض من السمة TypeArguments للملحق OnPlatform ؟

يحدد معلمة النوع للملحق، ويضمن إنشاء النوع الصحيح من الملحق.

يحدد نوع النظام الأساسي الذي يعمل عليه التطبيق

يمكنك من تحديد الخاصية التي سيتم تعيينها بقيمة خاصة بالنظام الأساسي.

عليك الإجابة على كل الأسئلة قبل مراجعة عملك.

متابعة