Plattformsspecifika värden i XAML

  • 5 minuter

Appens visuella upplevelse skiljer sig åt på varje plattform. Du behöver ofta finjustera användargränssnittet för varje plattform baserat på de visuella element som du använder. Med .NET MAUI kan du hantera appens layout baserat på dessa enhetsegenskaper.

I den här lektionen får du lära dig om de funktioner som .NET MAUI tillhandahåller så att du kan justera användargränssnittet för dina appar enligt den plattform där de körs.

Använda enhetsklassen

Klassen DeviceInfo är en verktygsklass som tillhandahåller enhetsspecifik information för den enhet som appen körs på. Den exponerar den här informationen via en uppsättning egenskaper. Den viktigaste egenskapen är DeviceInfo.Platform, som returnerar en sträng som anger vilken typ av enhet som för närvarande används: Android, iOS, WinUIeller macOS.

Tänk på följande scenario som ett exempel på när du kan använda den här funktionen. Standardbeteendet för en .NET MAUI iOS-app är att innehåll som läggs till på en sida inkräktar på iOS-statusfältet överst på skärmen. Du vill ändra det här beteendet. Den enklaste lösningen är att flytta ned innehållet på sidan. Den notes-lösning som du skapade i föregående övning åtgärdar det här problemet genom att ange Padding egenskapen VerticalStackLayout för kontrollen för att flytta ned innehållet med 60 punkter:

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

Problemet är att det här problemet endast gäller för iOS. Att flytta ner innehållet så här mycket på Android och WinUI resulterar i slöseri med skärmfastigheter överst på sidan.

Du kan fråga egenskapen DeviceInfo.Platform för att lösa det här visningsproblemet. Du kan lägga till följande kod i appens sidkonstruktor för att expandera utfyllnaden överst på sidan, men bara för 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

Kommentar

DevicePlatform.iOS är en DevicePlatform struct som returnerar strängvärdet iOS. Det finns motsvarande egenskaper för de andra plattformar som stöds. Du bör använda dessa egenskaper i stället för att jämföra med hårdkodade strängar. det är bra praxis och det framtidssäkrar koden om vissa av dessa strängvärden ändras i framtiden.

Den här koden fungerar, men den finns i sidans kod bakom-fil. Utfyllnad är ett användargränssnittsspecifikt värde. Förmodligen är det mer lämpligt och bekvämt att göra det från XAML i stället för i koden bakom.

Använda OnPlatform-markeringstillägget

.NET MAUI XAML tillhandahåller markeringstillägget OnPlatform , som gör att du kan identifiera körningsplattformen inifrån din XAML-kod. Du kan använda det här påläggstillägget som en del av XAML-koden som anger ett egenskapsvärde. Tillägget kräver att du anger egenskapstypen tillsammans med en serie On Platform block där du anger egenskapsvärdet enligt plattformen.

Kommentar

Markeringstillägget är generiskt. Det OnPlatform tar en typparameter. Den typ som TypeArguments attributet anger säkerställer att rätt tilläggstyp används.

Du kan ange egenskapen så Padding här. Observera att egenskapens Padding typ är 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>

För andra plattformar än iOS förblir utfyllnaden inställd på standardvärdet "0,0,0,0". För WinUI och Android kan du ange utfyllnad till 30 poäng med ytterligare OnPlatform block:

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

Du kan använda samma teknik för andra egenskaper. I följande exempel ändras stacklayoutens bakgrundsfärg på en sida till Silver på iOS, till Grön på Android och gul i 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>

Den här syntaxen är lite utförlig, men det finns en reducerad syntax för OnPlatform tillägget. Du kan förenkla exemplet som anger utfyllnad enligt följande:

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

Du kan ange ett standardvärde för en egenskap tillsammans med alla plattformsspecifika värden. I det här formuläret härleds typparametern från egenskapen som OnPlatform attributet tillämpas på.

Om du vill ange bakgrundsfärgen kan du använda det här XAML-fragmentet i stället för det andra exemplet ovan:

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

Kunskapstest

1.

Vilket påläggstillägg kan du använda i din XAML-kod för att identifiera plattformen där appen körs?

2.

Vad är syftet med TypeArguments attributet för OnPlatform tillägget?