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 usados. 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, , , iOSWinUIou 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
Nota
DevicePlatform.iOS é uma DevicePlatform struct que retorna o valor iOSda cadeia de caracteres . Existem propriedades equivalentes para as outras plataformas suportadas. Você deve usar essas propriedades em vez de comparar com cadeias de caracteres codificadas; É uma boa prática e prepara seu código para o futuro se alguns desses valores de cadeia de caracteres mudarem no futuro.
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 extensão de marcação, que permite detetar a OnPlatform 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 propriedade de On Platform acordo com a plataforma.
Nota
A OnPlatform extensão de marcação é genérica, leva um parâmetro type. O tipo especificado pelo TypeArguments atributo garante que o tipo correto de extensão seja usado.
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>