Hodnoty specifické pro platformu v XAML

  • 5 min

Vizuální prostředí vaší aplikace se bude na jednotlivých platformách lišit. Často budete muset vyladit uživatelské rozhraní pro každou platformu na základě vizuálních prvků, které používáte. .NET MAUI umožňuje spravovat rozložení vaší aplikace na základě těchto vlastností zařízení.

V této lekci se dozvíte o funkcích, které .NET MAUI poskytuje, abyste mohli upravit uživatelské rozhraní pro vaše aplikace podle platformy, na které běží.

Použití třídy Zařízení

Třída DeviceInfo je třída nástroje, která poskytuje informace specifické pro zařízení pro zařízení, na kterém je vaše aplikace spuštěná. Tyto informace zveřejňuje prostřednictvím sady vlastností. Nejdůležitější vlastností je DeviceInfo.Platform, která vrací řetězec označující typ zařízení, který se právě používá: Android, iOS, WinUI, nebo macOS.

Jako příklad použití této funkce zvažte následující scénář. Výchozí chování aplikace .NET MAUI pro iOS je to, že obsah přidaný na stránku zakročí stavový řádek iOS v horní části obrazovky. Toto chování chcete změnit. Nejjednodušším řešením je posunout obsah na stránce dolů. Řešení poznámek, které jste vytvořili v předchozím cvičení, tento problém řeší nastavením Padding vlastnosti VerticalStackLayout ovládacího prvku tak, aby se obsah přesunul o 60 bodů dolů:

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

Problém spočívá v tom, že tento problém platí jenom pro iOS. Když obsah posunete na Androidu a WinUI o tolik dolů, v horní části stránky se zobrazí plýtvání nemovitostí na obrazovce.

Pokud chcete tento problém se zobrazením vyřešit, můžete zadat dotaz na DeviceInfo.Platform vlastnost. Do konstruktoru stránky aplikace můžete přidat následující kód, který rozbalí odsazení v horní části stránky, ale jenom pro 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

Poznámka:

DevicePlatform.iOSDevicePlatform je struktura, která vrací řetězcovou hodnotu iOS. Existují ekvivalentní vlastnosti pro ostatní podporované platformy. Tyto vlastnosti byste měli použít místo porovnání s pevně zakódovanými řetězci; je to dobrý postup a v budoucnu váš kód prokazuje, pokud se některé z těchto řetězcových hodnot v budoucnu změní.

Tento kód funguje, ale je v souboru kódu stránky. Odsazení je hodnota specifická pro uživatelské rozhraní. Pravděpodobně je vhodnější a pohodlnější to udělat z XAML místo v kódu na pozadí.

Použití rozšíření značek OnPlatform

.NET MAUI XAML poskytuje OnPlatform rozšíření značek, které umožňuje zjistit platformu runtime z kódu XAML. Toto rozšíření značek můžete použít jako součást kódu XAML, který nastaví hodnotu vlastnosti. Toto rozšíření vyžaduje, abyste zadali typ vlastnosti společně s řadou On Platform bloků, ve kterých jste nastavili hodnotu vlastnosti podle platformy.

Poznámka:

Rozšíření OnPlatform značek je obecné. Přebírá parametr typu. Typ atributu TypeArguments určuje, že se použije správný typ rozšíření.

Tuto vlastnost můžete nastavit Padding takto. Všimněte si, že typ Padding vlastnosti je 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>

U jiných platforem než iOS zůstane odsazení nastaveno na výchozí hodnotu 0,0,0,0.0. Pro WinUI a Android můžete nastavit odsazení na 30 bodů s dalšími OnPlatform bloky:

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

Stejnou techniku můžete použít i u jiných vlastností. Následující příklad změní barvu pozadí rozložení zásobníku na stránce na Silver v iOSu, na Zelenou v Androidu a na Žlutou ve 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>

Tato syntaxe je trochu podrobná, ale pro OnPlatform rozšíření je k dispozici omezená syntaxe. Příklad, který nastaví odsazení, můžete zjednodušit následujícím způsobem:

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

Můžete zadat výchozí hodnotu vlastnosti spolu s libovolnými hodnotami specifickými pro platformu. V tomto formuláři je parametr typu odvozen z vlastnosti, na kterou OnPlatform je atribut použit.

Pokud chcete nastavit barvu pozadí, můžete místo druhého předchozího příkladu použít tento fragment XAML:

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

Kontrola znalostí

1.

Které rozšíření značek můžete použít v kódu XAML ke zjištění platformy, na které je aplikace spuštěná?

2.

Jaký je účel atributu TypeArguments OnPlatform rozšíření?