Valores específicos da plataforma em XAML

A experiência visual do seu aplicativo será diferente em cada plataforma. Muitas vezes, você precisará ajustar sua interface do usuário para cada plataforma com base nos elementos visuais que usa. O .NET MAUI permite que você gerencie o layout do seu aplicativo com base nessas propriedades do dispositivo.

Nesta unidade, você aprenderá sobre os recursos que o .NET MAUI fornece para permitir que você ajuste a interface do usuário para seus aplicativos de acordo com a plataforma na qual eles estão sendo executados.

Usando a classe Device

A DeviceInfo classe é uma classe de utilitário que fornece informações específicas do dispositivo para o dispositivo no qual seu aplicativo está sendo executado. Ele expõe essas informações através de um conjunto de propriedades. A propriedade mais importante é DeviceInfo.Platform, que retorna uma cadeia de caracteres indicando o tipo de dispositivo atualmente em uso: Android, iOS, WinUI, ou macOS.

Considere o cenário a seguir como um exemplo de quando você pode usar esse recurso. O comportamento padrão de um aplicativo .net maui para iOS é que o conteúdo adicionado a uma página invada a barra de status do iOS na parte superior da tela. Você deseja alterar esse comportamento. A solução mais simples é deslocar o conteúdo para baixo na página. A solução Notes que você criou no exercício anterior resolve esse problema definindo a Padding propriedade do VerticalStackLayout controle para mover o conteúdo para baixo em 60 pontos:

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

A questão é que esse problema só é aplicável no iOS. Mudar tanto o conteúdo para baixo no Android e WinUI resulta em um desperdício de espaço de tela no topo da página.

Você pode consultar a DeviceInfo.Platform propriedade para resolver esse problema de exibição. Você pode adicionar o seguinte código ao construtor de página do seu aplicativo para expandir o preenchimento na parte superior da página, mas apenas para 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

Esse código funciona, mas está no arquivo code-behind da página. O preenchimento é um valor específico da interface do usuário. Indiscutivelmente, é mais apropriado e conveniente fazê-lo a partir de XAML em vez de no code-behind.

Usando a extensão de marcação OnPlatform

.NET MAUI XAML fornece a OnPlatform extensão de marcação, que permite detetar a plataforma de tempo de execução de dentro do seu código XAML. Você pode aplicar essa extensão de marcação como parte do código XAML que define um valor de propriedade. A extensão requer que você forneça o tipo de propriedade, juntamente com uma série de blocos nos quais você define o valor da On Platform propriedade de acordo com a plataforma.

Você pode definir a Padding propriedade assim. Observe que o tipo de Padding imóvel é 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>

Para plataformas diferentes do iOS, o preenchimento permanecerá definido como seu valor padrão de "0,0,0,0". Para WinUI e Android, você pode definir o preenchimento para 30 pontos com blocos adicionais 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>

Você pode aplicar essa mesma técnica a outras propriedades. O exemplo a seguir altera a cor de plano de fundo do layout de pilha em uma página para Prata no iOS, Verde no Android e Amarelo no 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>

Essa sintaxe é um pouco detalhada, mas há uma sintaxe reduzida disponível para a OnPlatform extensão. Você pode simplificar o exemplo que define o preenchimento, da seguinte maneira:

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

Você pode especificar um valor padrão para uma propriedade, juntamente com quaisquer valores específicos da plataforma. Neste formulário, o parâmetro type é inferido da propriedade à qual o OnPlatform atributo é aplicado.

Para definir a cor do plano de fundo, você pode usar este fragmento XAML no lugar do segundo exemplo anterior:

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