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

  • Artigo

Procurar amostra. Procurar no exemplo

Os aplicativos .NET MAUI (.NET Multi-Platform App UI) podem ter a interface do usuário personalizada para plataformas e dispositivos específicos. Com isso, seu aplicativo pode:

  • Fazer o uso mais eficaz do espaço. Se você criar um aplicativo para que ele tenha um bom layout em um dispositivo móvel, o aplicativo ainda poderá ser utilizado em um dispositivo de área de trabalho, mas provavelmente um pouco de espaço será desperdiçado. Você pode personalizar seu aplicativo para exibir mais conteúdo quando a tela estiver acima de 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 de área de trabalho. Além disso, ao colocar mais conteúdo na tela, você pode reduzir a quantidade de navegação que os usuários precisam realizar.
  • Aproveitar as funcionalidades do dispositivo. Alguns dispositivos costumam ter determinadas funcionalidades. Por exemplo, os dispositivos móveis tendem a ter um sensor de localização e uma câmera, enquanto os dispositivos da área de trabalho talvez não tenham nenhum dos dois. Seu aplicativo pode detectar as funcionalidades que estão disponíveis e habilitar controles que as usam.
  • Faça uma otimização para 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 para os usuários de dispositivos móveis. Mas, em geral, os usuários da área de trabalho esperam ver os elementos de navegação na parte superior do aplicativo.

Ao otimizar a interface do usuário do aplicativo para plataformas específicas e idiomas de dispositivos, você está criando uma interface do usuário dinâmica. As principais abordagens usadas para criar uma interface do usuário dinâmica no .NET MAUI envolvem o uso das extensões de marcação OnPlatform e OnIdiom.

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 é alterada. Para obter mais informações, confira 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 das classes OnPlatform<T> e On, mas com uma representação mais concisa.

A extensão de marcação OnPlatform tem o suporte da classe OnPlatformExtension, que define as seguintes propriedades:

  • Default, do tipo object, que você define como um valor padrão a ser aplicado às propriedades que representam as 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 implementação de IValueConverter.
  • ConverterParameter, do tipo object, que pode ser definido como um valor a ser transmitido para a implementação de IValueConverter.

Observação

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

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

Importante

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

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

<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 expressões OnPlatform usam a versão abreviada do nome da classe OnPlatformExtension. As três extensões de marcação OnPlatform definem as propriedades xref:Microsoft.Maui.Graphics.Color, WidthRequest e HeightRequest da BoxView com valores diferentes no iOS e no Android. As extensões de marcação também fornecem valores padrão para essas propriedades nas plataformas que não são especificadas, eliminando a parte Default= da expressão.

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

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

  • Default, do tipo object, que você define como um valor padrão a ser aplicado às propriedades que representam os idiomas dos dispositivos.
  • Phone, do tipo object, que você define como um valor a ser aplicado nos telefones.
  • Tablet, do tipo object, que você define como um valor a ser aplicado nos tablets. Essa propriedade não é exclusiva das plataformas Android e iOS.
  • Desktop, do tipo object, que você define como um valor a ser aplicado nas plataformas de área de trabalho. Observe que alguns laptops podem ser classificados por meio da propriedade Tablet.
  • TV, do tipo object, que você define como um valor a ser aplicado nas plataformas de TV.
  • Watch, do tipo object, que você define como um valor a ser aplicado nas plataformas do Watch.
  • Converter, do tipo IValueConverter, que pode ser definido como uma implementação de IValueConverter.
  • ConverterParameter, do tipo object, que pode ser definido como um valor a ser transmitido para a implementação de IValueConverter.

Observação

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

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

Importante

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

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

<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 expressões OnIdiom usam a versão abreviada do nome da classe OnIdiomExtension. As três extensões de marcação OnIdiom definem as propriedades Color, WidthRequest e HeightRequest da BoxView com valores diferentes nos idiomas do telefone, tablet e desktop. As extensões de marcação também fornecem valores padrão para essas propriedades nos idiomas que não são especificados, eliminando a parte Default= da expressão.