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

Navegar no exemplo

Os aplicativos .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ê desenhar um aplicativo para ter uma boa aparência em um dispositivo móvel, o aplicativo ainda será utilizável em um computador de mesa, 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 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 executar.
• Aproveite os recursos do dispositivo. Determinados dispositivos são mais propensos a ter determinadas funcionalidades. Por exemplo, os dispositivos móveis são mais propensos a ter um sensor de localização e uma câmera, enquanto os dispositivos da área de trabalho podem não ter nenhum dos dois. Seu aplicativo pode detectar quais recursos estão disponíveis e habilitar controles que os usam.
• Otimize para dados de 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 acessar para os usuários móveis. Mas os usuários da área de trabalho geralmente esperam ver elementos de navegação na parte superior do aplicativo.

Ao otimizar a interface do usuário do aplicativo para plataformas específicas e expressões de dispositivo, você está criando uma interface do usuário responsiva. A abordagem principal para criar uma interface do usuário responsiva no .NET MAUI envolve o uso das classes OnPlatform<T> e OnIdiom<T>. Uma abordagem alternativa é usar as extensões de marcação XAML OnPlatform e OnIdiom. No entanto, essas extensões de marcação não são seguras contra corte. Para obter mais informações sobre as extensões de marcação, consulte Personalizar a aparência da interface do usuário com extensões de marcação.

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

As classes OnPlatform<T> e On permitem personalizar a aparência da interface do usuário por plataforma:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyMauiApp.MainPage">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness">
            <On Platform="iOS" Value="0,20,0,0" />
            <On Platform="Android" Value="10,20,20,10" />
        </OnPlatform>
    </ContentPage.Padding>
    ...
</ContentPage>

OnPlatform<T> é uma classe genérica e, portanto, você precisa especificar o argumento de tipo genérico, nesse caso, Thickness, que é o tipo de propriedade Padding. Isso é obtido com o atributo XAML x:TypeArguments. A classe OnPlatform<T> define uma propriedade Default que pode ser definida como um valor que será aplicado a todas as plataformas:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyMauiApp.MainPage">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness" Default="20">
            <On Platform="iOS" Value="0,20,0,0" />
            <On Platform="Android" Value="10,20,20,10" />
        </OnPlatform>
    </ContentPage.Padding>
    ...
</ContentPage>

Neste exemplo, a propriedade Padding é definida para valores diferentes no iOS e Android, enquanto as outras plataformas são definidas com o valor padrão.

A classe OnPlatform<T> também define uma propriedade Platforms, que é uma IList de objetos On. Cada objeto On pode definir a propriedade Platform e Value para definir o valor Thickness para uma plataforma específica. Além disso, a propriedade On.Platform é do tipo IList<string>, portanto, você pode incluir várias plataformas delimitadas por vírgula se os valores forem os mesmos:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyMauiApp.MainPage">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness" Default="20">
            <On Platform="iOS, Android" Value="10,20,20,10" />
        </OnPlatform>
    </ContentPage.Padding>
    ...
</ContentPage>

Fornecer um valor de Platform incorreto não resultará em um erro. Em vez disso, seu XAML será executado sem que o valor específico da plataforma seja aplicado.

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

A classe OnIdiom<T> permite personalizar a aparência da interface do usuário com base no idioma do dispositivo em que o aplicativo está sendo executado:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyMauiApp.MainPage">
    <ContentPage.Margin>
        <OnIdiom x:TypeArguments="Thickness">
            <OnIdiom.Phone>0,20,0,0</OnIdiom.Phone>
            <OnIdiom.Tablet>0,40,0,0</OnIdiom.Tablet>
            <OnIdiom.Desktop>0,60,0,0</OnIdiom.Desktop>
        </OnIdiom>
    </ContentPage.Margin>
    ...
</ContentPage>

OnIdiom<T> é uma classe genérica e, portanto, você precisa especificar o argumento de tipo genérico, nesse caso, Thickness, que é o tipo de propriedade Margin. Isso é obtido com o atributo XAML x:TypeArguments. A classe OnIdiom<T> define uma propriedade Default que pode ser definida como um valor que será aplicado a todas as plataformas:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyMauiApp.MainPage">
    <ContentPage.Margin>
        <OnIdiom x:TypeArguments="Thickness" Default="20">
            <OnIdiom.Desktop>0,60,0,0</OnIdiom.Desktop>
        </OnIdiom>
    </ContentPage.Margin>
    ...
</ContentPage>

Neste exemplo, a propriedade Margin é definida como um valor específico em idiomas da área de trabalho, com os outros idiomas sendo definidos como o valor padrão.

Personalizar a aparência da UI com extensões de marcação

A aparência da interface do usuário também pode ser personalizada com as extensões de marcação OnPlatform e OnIdiom. No entanto, essas extensões de marcação não são seguras para recortes.

Personalizar a aparência da interface do usuário com uma extensão de marcação com base na plataforma

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

A extensão de marcação OnPlatform é compatível com a classe OnPlatformExtension, que define as seguintes propriedades:

• Default, do tipo object, que você define como um valor padrão para ser aplicado às propriedades que descrevem 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ê configura como valor para aplicar no WinUI.
• Converter, do tipo IValueConverter, que pode ser atribuído a uma implementação de IValueConverter.
• ConverterParameter, do tipo object, que pode ser definido como um valor a ser passado para a implementação de IValueConverter.

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

O exemplo XAML a seguir 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 Color, WidthRequeste HeightRequest do BoxView para 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, ao mesmo tempo em que eliminam a parte Default= da expressão.

Personalizar a aparência da interface do usuário com uma extensão de marcação 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. Ele fornece a mesma funcionalidade que a classe OnIdiom<T>, mas com uma representação mais concisa.

A extensão de marcação OnIdiom é compatível com a 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 do 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. Essa propriedade não é exclusiva para plataformas Android e iOS.
• Desktop, do tipo object, que você define como um valor a ser aplicado em plataformas de área de trabalho. Observe que alguns laptops podem ser classificados usando a propriedade Tablet.
• TV, do tipo object, que você define como um valor a ser aplicado em plataformas de TV.
• Watch, do tipo object, que você define para ser aplicado nas plataformas Watch.
• Converter, do tipo IValueConverter, que pode ser configurado como uma implementação de IValueConverter.
• ConverterParameter, do tipo object, que pode ser definido como um valor a ser passado para a implementação de IValueConverter.

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

O exemplo XAML a seguir 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, WidthRequeste HeightRequest do BoxView para valores diferentes no telefone, tablet e idiomas da área de trabalho. As extensões de marcação também fornecem valores padrão para essas propriedades nas expressões que não estão especificadas, enquanto eliminam a parte Default= da expressão.