ערכים ספציפיים לפלטפורמה ב- XAML
- 5 דקות
החוויה החזותית של האפליקציה שלך תהיה שונה בכל פלטפורמה. לעתים קרובות תצטרך לכוונן את ממשק המשתמש עבור כל פלטפורמה בהתבסס על הרכיבים החזותיים שבהם אתה משתמש. .NET MAUI מאפשר לך לנהל את פריסת האפליקציה שלך בהתבסס על מאפייני מכשיר אלה.
ביחידה זו, תלמדו על התכונות ש- .NET MAUI מספק כדי לאפשר לך לכוונן את ממשק המשתמש עבור האפליקציות שלך בהתאם לפלטפורמה שבה הן פועלות.
שימוש בכיתה 'מכשיר'
מחלקת DeviceInfo היא מחלקת כלי שירות המספקת מידע ספציפי למכשיר שבו פועלת האפליקציה שלך. היא חושפת מידע זה באמצעות קבוצת מאפיינים. המאפיין החשוב ביותר הוא DeviceInfo.Platform, המחזירה מחרוזת המציינת את סוג המכשיר הנמצא כעת בשימוש: Android, iOS, WinUIאו 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.iOS הוא DevicePlatform המחזיר את ערך המחרוזת iOS. קיימים מאפיינים שוות ערך עבור הפלטפורמות הנתמכות האחרות. עליך להשתמש במאפיינים אלה במקום להשוות בין מחרוזות המקודדות באופן קשיח; מומלץ לעשות זאת, והוא יגהה בעתיד את הקוד שלך אם חלק מערכים אלה של מחרוזות ישתנו בעתיד.
קוד זה פועל, אך הוא נמצא בקובץ מאחורי הקוד של הדף. הריווך הוא ערך ספציפי לממשק המשתמש. לטענתך, מתאים ונוח יותר לעשות זאת מ- XAML במקום בקוד שמאחורי הקוד.
שימוש בסיומת הסימון OnPlatform
XAML של .NET MAUI OnPlatform את סיומת הסימון של .NET, המאפשרת לך לזהות את פלטפורמת זמן הריצה מתוך קוד ה- 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>
באפשרותך להחיל שיטה זו על מאפיינים אחרים. הדוגמה הבאה משנה את צבע הרקע של פריסת הערימה בעמוד ל'כסף' ב- 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>
באפשרותך לציין ערך ברירת מחדל עבור מאפיין, יחד עם ערכים ספציפיים לפלטפורמה. בטופס זה, הפרמטר type נגזר מהמאפיין שאליו מוחלת OnPlatform ברירת מחדל.
כדי להגדיר את צבע הרקע, באפשרותך להשתמש במקטע XAML זה במקום בדוגמה הקודמת השניה:
<VerticalStackLayout BackgroundColor="{OnPlatform WinUI=Yellow, iOS=Silver, Android=Green}">
...
</VerticalStackLayout>