Personalizzare l'aspetto dell'interfaccia utente in base al linguaggio della piattaforma e del dispositivo

Esplora il di esempio

Le app multipiattaforma di .NET MAUI possono avere la loro interfaccia utente personalizzata per piattaforme e dispositivi specifici. In questo modo l'app può:

• Sfruttare al meglio lo spazio. Se progetti un'app per apparire bene in un dispositivo mobile, l'app sarà comunque utilizzabile in un dispositivo desktop, ma probabilmente ci sarà uno spazio sprecato. Puoi personalizzare la tua app per visualizzare più contenuto quando la schermata è superiore a una determinata dimensione. Ad esempio, un'app per gli acquisti potrebbe visualizzare un elemento alla volta in un dispositivo mobile, ma potrebbe mostrare più elementi in un dispositivo desktop. Inoltre, inserendo più contenuto sullo schermo, è possibile ridurre la quantità di navigazione che gli utenti devono eseguire.
• Sfruttare le funzionalità del dispositivo. Alcuni dispositivi hanno maggiori probabilità di avere determinate funzionalità. Ad esempio, i dispositivi mobili hanno maggiori probabilità di avere un sensore di posizione e una fotocamera, mentre i dispositivi desktop potrebbero non avere neanche. L'app può rilevare le funzionalità disponibili e abilitare i controlli che li usano.
• Ottimizzare per l'input. Puoi riorganizzare gli elementi dell'interfaccia utente per ottimizzare per tipi di input specifici. Ad esempio, se si posizionano gli elementi di spostamento nella parte inferiore dell'app, gli utenti mobili potranno accedere più facilmente. Ma gli utenti desktop spesso si aspettano di vedere gli elementi di navigazione nella parte superiore dell'app.

Quando si ottimizza l'interfaccia utente dell'app per piattaforme e idiomi di dispositivo specifici, si sta creando un'interfaccia utente reattiva. L'approccio principale alla creazione di un'interfaccia utente reattiva in .NET MAUI prevede l'uso delle classi OnPlatform<T> e OnIdiom<T>. Un approccio alternativo consiste nell'usare le estensioni di markup XAML OnPlatform e OnIdiom. Tuttavia, queste estensioni di markup non sono sicure. Per altre informazioni sulle estensioni di markup, vedere Personalizzare l'aspetto dell'interfaccia utente con le estensioni di markup.

Personalizzare l'aspetto dell'interfaccia utente in base alla piattaforma

Le classi OnPlatform<T> e On consentono di personalizzare l'aspetto dell'interfaccia utente in base alla piattaforma:

<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> è una classe generica, quindi è necessario specificare l'argomento del tipo generico, in questo caso Thickness, che è il tipo della proprietà Padding. Questo risultato viene ottenuto con l'attributo XAML x:TypeArguments. La classe OnPlatform<T> definisce una proprietà Default che può essere impostata su un valore che verrà applicato a tutte le piattaforme:

<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>

In questo esempio, la proprietà Padding è impostata su valori diversi in iOS e Android, con le altre piattaforme impostate sul valore predefinito.

La classe OnPlatform<T> definisce anche una proprietà Platforms, ovvero un IList di oggetti On. Ogni oggetto On può impostare la proprietà Platform e Value per definire il valore Thickness per una piattaforma specifica. Inoltre, la proprietà On.Platform è di tipo IList<string>, quindi è possibile includere più piattaforme delimitate da virgole se i valori sono uguali:

<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>

Se si specifica un valore di Platform non corretto, non verrà generato un errore. Il codice XAML verrà invece eseguito senza applicare il valore specifico della piattaforma.

Personalizzare l'aspetto dell'interfaccia utente in base al linguaggio del dispositivo

La classe OnIdiom<T> consente di personalizzare l'aspetto dell'interfaccia utente in base al linguaggio del dispositivo in cui è in esecuzione l'app:

<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>
        </OnPlatform>
    </ContentPage.Margin>
    ...
</ContentPage>

OnIdiom<T> è una classe generica, quindi è necessario specificare l'argomento del tipo generico, in questo caso Thickness, che è il tipo della proprietà Margin. Questo risultato viene ottenuto con l'attributo XAML x:TypeArguments. La classe OnIdiom<T> definisce una proprietà Default che può essere impostata su un valore che verrà applicato a tutte le piattaforme:

<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>
        </OnPlatform>
    </ContentPage.Margin>
    ...
</ContentPage>

In questo esempio, la proprietà Margin è impostata su un valore specifico nei idiomi desktop, con gli altri idiomi impostati sul valore predefinito.

Personalizzare l'aspetto dell'interfaccia utente con le estensioni di markup

L'aspetto dell'interfaccia utente può anche essere personalizzato con le estensioni di markup OnPlatform e OnIdiom. Tuttavia, queste estensioni di markup non sono sicure.

Personalizzare l'aspetto dell'interfaccia utente con un'estensione di markup basata sulla piattaforma

L'estensione di markup OnPlatform consente di personalizzare l'aspetto dell'interfaccia utente in base alla piattaforma. Fornisce la stessa funzionalità delle classi OnPlatform<T> e On, ma con una rappresentazione più concisa.

L'estensione di markup OnPlatform è supportata dalla classe OnPlatformExtension, che definisce le proprietà seguenti:

• Default, di tipo object, che hai impostato su un valore predefinito da applicare alle proprietà che rappresentano le piattaforme.
• Android, di tipo object, impostato su un valore da applicare in Android.
• iOS, di tipo object, impostato su un valore da applicare in iOS.
• MacCatalyst, di tipo object, impostato su un valore da applicare in Mac Catalyst.
• Tizen, di tipo object, che hai impostato su un valore da applicare alla piattaforma Tizen.
• WinUI, di tipo object, impostato su un valore da applicare in WinUI.
• Converter, di tipo IValueConverter, che può essere impostato su un'implementazione di IValueConverter.
• ConverterParameter, di tipo object, che può essere impostato a un valore da trasmettere all'implementazione IValueConverter.

La proprietà Default è la proprietà di contenuto di OnPlatformExtension. Pertanto, per le espressioni di markup XAML espresse con parentesi graffe, puoi eliminare la parte Default= dell'espressione se è il primo argomento. Se la proprietà Default non è impostata, assume per impostazione predefinita il valore della proprietà BindableProperty.DefaultValue, purché l'estensione di markup sia destinata a un BindableProperty.

L'esempio XAML seguente illustra come usare l'estensione di markup 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" />

In questo esempio, tutte e tre le espressioni OnPlatform usano la versione abbreviata del nome della classe OnPlatformExtension. Le tre estensioni di markup OnPlatform impostano le proprietà Color, WidthRequeste HeightRequest del BoxView su valori diversi in iOS e Android. Le estensioni di markup forniscono anche valori predefiniti per queste proprietà nelle piattaforme non specificate, eliminando la parte Default= dell'espressione.

Personalizzare l'aspetto dell'interfaccia utente con un'estensione di markup in base al linguaggio del dispositivo

L'estensione di markup OnIdiom consente di personalizzare l'aspetto dell'interfaccia utente in base al linguaggio del dispositivo in cui è in esecuzione l'app. Fornisce la stessa funzionalità della classe OnIdiom<T>, ma con una rappresentazione più concisa.

L'estensione di markup OnIdiom è supportata dalla classe OnIdiomExtension, che definisce le proprietà seguenti:

• Default, di tipo object, impostato su un valore predefinito da applicare alle proprietà che rappresentano gli idiomi del dispositivo.
• Phone, di tipo object, impostato su un valore da applicare ai telefoni.
• Tablet, di tipo object, che hai impostato a un valore da applicare ai tablet. Questa proprietà non è esclusiva per le piattaforme Android e iOS.
• Desktop, di tipo object, che hai impostato a un valore da applicare sulle piattaforme desktop. Si noti che alcuni portatili possono essere classificati usando la proprietà Tablet.
• TV, di tipo object, impostato su un valore da applicare sulle piattaforme TV.
• Watch, di tipo object, che imposti a un valore da applicare sulle piattaforme Watch.
• Converter, di tipo IValueConverter, che può essere impostato su un'implementazione IValueConverter.
• ConverterParameter, di tipo object, che può essere impostato su un valore da passare all'implementazione IValueConverter.

La proprietà Default è la proprietà di contenuto di OnIdiomExtension. Pertanto, per le espressioni di markup XAML espresse con parentesi graffe, puoi eliminare la sezione Default= dell'espressione se è il primo argomento.

L'esempio XAML seguente illustra come usare l'estensione di markup 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" />

In questo esempio, tutte e tre le espressioni OnIdiom usano la versione abbreviata del nome della classe OnIdiomExtension. Le tre estensioni di markup OnIdiom impostano le proprietà Color, WidthRequeste HeightRequest del BoxView su valori diversi nel telefono, nel tablet e nei linguaggi desktop. Le estensioni di markup forniscono anche valori di default per queste proprietà sugli idiomi non specificati, eliminando la parte Default= di quell'espressione.