Personalizar a aparência da interface do usuário com base na plataforma e no idioma do dispositivo

Navegue pelo exemplo

Os aplicativos .NET Multi-Platform App UI (.NET MAUI) podem ter sua interface do usuário personalizada para plataformas e dispositivos específicos. Isso permite que seu aplicativo:

• Faça o uso mais eficaz do espaço. Se você projetar um aplicativo para ter uma boa aparência em um dispositivo móvel, o aplicativo ainda poderá ser usado em um dispositivo desktop, mas provavelmente haverá algum espaço desperdiçado. Você pode personalizar seu aplicativo para exibir mais conteúdo quando a tela estiver acima de um determinado tamanho. Por exemplo, um aplicativo de compras pode exibir um item de cada vez em um dispositivo móvel, mas pode mostrar vários itens em um dispositivo desktop. Além disso, ao colocar mais conteúdo na tela, você pode reduzir a quantidade de navegação que os usuários precisam executar.
• Aproveite os recursos do dispositivo. É mais provável que certos dispositivos tenham determinadas capacidades. Por exemplo, os dispositivos móveis são mais propensos a ter um sensor de localização e uma câmera, enquanto os dispositivos desktop podem não ter nenhum dos dois. Seu aplicativo pode detectar quais recursos estão disponíveis e habilitar controles que os usam.
• Otimize a entrada. Você pode reorganizar os elementos da interface do usuário para otimizar para tipos de entrada específicos. Por exemplo, se você colocar elementos de navegação na parte inferior do aplicativo, eles serão mais fáceis de serem acessados pelos usuários móveis. Mas os usuários de desktop geralmente esperam ver elementos de navegação na parte superior do aplicativo.

Quando você otimiza a interface do usuário do seu aplicativo para plataformas e expressões idiomáticas de dispositivo específicas, você está criando uma interface do usuário responsiva. As principais abordagens para criar uma interface do usuário responsiva no .NET MAUI envolvem o uso da extensão de marcação e da OnPlatformOnIdiom extensão de marcação.

Observação

Há uma categoria de gatilhos, conhecidos como gatilhos de estado, que podem ser usados para personalizar a aparência da interface do usuário em cenários específicos, como quando a orientação de um dispositivo muda. Para obter mais informações, consulte Gatilho de estado.

Personalizar a aparência da interface do usuário com base na plataforma

A extensão de marcação OnPlatform permite que você personalize a aparência da interface do usuário por plataforma. Ele fornece a mesma funcionalidade que as OnPlatform<T> classes e On , mas com uma representação mais concisa.

A OnPlatform extensão de marcação é suportada OnPlatformExtension pela classe, que define as seguintes propriedades:

• Default, do tipo object, que você define como um valor padrão a ser aplicado às propriedades que representam plataformas.
• Android, do tipo object, que você define como um valor a ser aplicado no Android.
• iOS, do tipo object, que você define como um valor a ser aplicado no iOS.
• MacCatalyst, do tipo object, que você define como um valor a ser aplicado no Mac Catalyst.
• Tizen, do tipo object, que você define como um valor a ser aplicado na plataforma Tizen.
• WinUI, do tipo object, que você define como um valor a ser aplicado no WinUI.
• Converter, do tipo IValueConverter, que pode ser definido como uma IValueConverter implementação.
• ConverterParameter, do tipo object, que pode ser definido como um valor a ser passado para a IValueConverter implementação.

Observação

O analisador XAML permite que a OnPlatformExtension classe seja abreviada como OnPlatform.

A Default propriedade é a propriedade content de OnPlatformExtension. Portanto, para expressões de marcação XAML expressas com chaves curvas, você pode eliminar a Default= parte da expressão se for o primeiro argumento. Se a propriedade não estiver definida, ela assumirá como padrão o valor da BindableProperty.DefaultValue propriedade, desde que a extensão de marcação esteja direcionada a Default um BindablePropertyarquivo .

Importante

O analisador XAML espera que valores do tipo correto sejam fornecidos às propriedades que consomem a OnPlatform extensão de marcação. Se a conversão de tipo for necessária, a extensão de OnPlatform marcação tentará executá-la usando os conversores padrão fornecidos pelo .NET MAUI. No entanto, existem algumas conversões de tipo que não podem ser executadas pelos conversores padrão e, nesses casos, a Converter propriedade deve ser definida como uma IValueConverter implementação.

A página OnPlatform Demo mostra como usar a OnPlatform extensão de marcação:

<BoxView Color="{OnPlatform Yellow, iOS=Red, Android=Green}"
         WidthRequest="{OnPlatform 250, iOS=200, Android=300}"
         HeightRequest="{OnPlatform 250, iOS=200, Android=300}"
         HorizontalOptions="Center" />

Neste exemplo, todas as três OnPlatform expressões usam a versão abreviada do nome da OnPlatformExtension classe. As três OnPlatform extensões de marcação definem o xref:Microsoft.Maui.Graphics.Color, WidthRequeste as propriedades do BoxView para valores diferentes no iOS e HeightRequest Android. As extensões de marcação também fornecem valores padrão para essas propriedades nas plataformas que não são especificadas, enquanto eliminam a Default= parte da expressão.

Personalizar a aparência da interface do usuário com base no idioma do dispositivo

A OnIdiom extensão de marcação permite personalizar a aparência da interface do usuário com base no idioma do dispositivo em que o aplicativo está sendo executado. Ele é suportado OnIdiomExtension pela classe, que define as seguintes propriedades:

• Default, do tipo object, que você define como um valor padrão a ser aplicado às propriedades que representam expressões idiomáticas de dispositivo.
• Phone, do tipo object, que você define como um valor a ser aplicado em telefones.
• Tablet, do tipo object, que você define como um valor a ser aplicado em tablets.
• Desktop, do tipo object, que você define como um valor a ser aplicado em plataformas de desktop.
• TV, do tipo object, que você define como um valor a ser aplicado em plataformas de TV.
• Watch, do tipo object, que você define como um valor a ser aplicado nas plataformas Watch.
• Converter, do tipo IValueConverter, que pode ser definido como uma IValueConverter implementação.
• ConverterParameter, do tipo object, que pode ser definido como um valor a ser passado para a IValueConverter implementação.

Observação

O analisador XAML permite que a OnIdiomExtension classe seja abreviada como OnIdiom.

A Default propriedade é a propriedade content de OnIdiomExtension. Portanto, para expressões de marcação XAML expressas com chaves curvas, você pode eliminar a Default= parte da expressão se for o primeiro argumento.

Importante

O analisador XAML espera que valores do tipo correto sejam fornecidos às propriedades que consomem a OnIdiom extensão de marcação. Se a conversão de tipo for necessária, a extensão de OnIdiom marcação tentará executá-la usando os conversores padrão fornecidos pelo .NET MAUI. No entanto, existem algumas conversões de tipo que não podem ser executadas pelos conversores padrão e, nesses casos, a Converter propriedade deve ser definida como uma IValueConverter implementação.

O exemplo XAML a seguir mostra como usar a extensão de OnIdiom marcação:

<BoxView Color="{OnIdiom Yellow, Phone=Red, Tablet=Green, Desktop=Blue}"
         WidthRequest="{OnIdiom 100, Phone=200, Tablet=300, Desktop=400}"
         HeightRequest="{OnIdiom 100, Phone=200, Tablet=300, Desktop=400}"
         HorizontalOptions="Center" />

Neste exemplo, todas as três OnIdiom expressões usam a versão abreviada do nome da OnIdiomExtension classe. As três OnIdiom extensões de marcação definem o Color, WidthRequeste as propriedades do para valores diferentes nos idiomas do BoxView telefone, tablet e HeightRequest desktop. As extensões de marcação também fornecem valores padrão para essas propriedades nos idiomas que não são especificados, enquanto eliminam a Default= parte da expressão.