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

Esplorare l'esempio

Le app .NET multipiattaforma dell'interfaccia utente dell'app (.NET MAUI) possono avere l'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 spostamento verso la 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. Gli approcci principali alla creazione di un'interfaccia utente reattiva in .NET MAUI implicano l'uso dell'estensione OnPlatform di markup e dell'estensione di OnIdiom markup.

Nota

Esiste una categoria di trigger, noti come trigger di stato, che possono essere usati per personalizzare l'aspetto dell'interfaccia utente in scenari specifici, ad esempio quando cambia l'orientamento di un dispositivo. Per altre informazioni, vedere Trigger di stato.

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

L'estensione di markup OnPlatform consente di personalizzare l'aspetto dell'interfaccia utente per ogni piattaforma. Offre le stesse funzionalità delle OnPlatform<T> classi e On , ma con una rappresentazione più concisa.

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

• Default, di tipo object, 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, 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 IValueConverter .
• ConverterParameter, di tipo object, che può essere impostato su un valore da passare all'implementazione IValueConverter .

Nota

Il parser XAML consente di abbreviatare la OnPlatformExtension classe come OnPlatform.

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

Importante

Il parser XAML prevede che i valori del tipo corretto vengano forniti alle proprietà che utilizzano l'estensione di OnPlatform markup. Se è necessaria la conversione dei tipi, l'estensione OnPlatform di markup tenterà di eseguirla usando i convertitori predefiniti forniti da .NET MAUI. Tuttavia, esistono alcune conversioni di tipo che non possono essere eseguite dai convertitori predefiniti e in questi casi la Converter proprietà deve essere impostata su un'implementazione IValueConverter .

La pagina Demo OnPlatform mostra come usare l'estensione OnPlatform di markup:

<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 OnPlatform le espressioni usano la versione abbreviata del nome della OnPlatformExtension classe. Le tre OnPlatform estensioni di markup impostano le xref:Microsoft.Maui.Graphics.Colorproprietà , WidthRequeste HeightRequest di su BoxView valori diversi in iOS e Android. Le estensioni di markup forniscono anche valori predefiniti per queste proprietà sulle piattaforme non specificate, eliminando la Default= parte dell'espressione.

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

L'estensione OnIdiom di markup consente di personalizzare l'aspetto dell'interfaccia utente in base al linguaggio del dispositivo in cui è in esecuzione l'app. È supportato dalla OnIdiomExtension classe , che definisce le proprietà seguenti:

• Default, di tipo object, impostato su un valore predefinito da applicare alle proprietà che rappresentano i idiomi del dispositivo.
• Phone, di tipo object, impostato su un valore da applicare ai telefoni.
• Tablet, di tipo object, impostato su un valore da applicare ai tablet.
• Desktop, di tipo object, impostato su un valore da applicare nelle piattaforme desktop.
• TV, di tipo object, impostato su un valore da applicare sulle piattaforme TV.
• Watch, di tipo object, impostato su un valore da applicare nelle piattaforme Espressioni di controllo.
• 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 .

Nota

Il parser XAML consente di abbreviatare la OnIdiomExtension classe come OnIdiom.

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

Importante

Il parser XAML prevede che i valori del tipo corretto vengano forniti alle proprietà che utilizzano l'estensione di OnIdiom markup. Se è necessaria la conversione dei tipi, l'estensione OnIdiom di markup tenterà di eseguirla usando i convertitori predefiniti forniti da .NET MAUI. Tuttavia, esistono alcune conversioni di tipo che non possono essere eseguite dai convertitori predefiniti e in questi casi la Converter proprietà deve essere impostata su un'implementazione IValueConverter .

L'esempio XAML seguente illustra come usare l'estensione di OnIdiom markup:

<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 OnIdiom le espressioni usano la versione abbreviata del nome della OnIdiomExtension classe. Le tre OnIdiom estensioni di markup impostano le Colorproprietà , WidthRequeste HeightRequest di BoxView su valori diversi nel telefono, nel tablet e nei linguaggi desktop. Le estensioni di markup forniscono anche valori predefiniti per queste proprietà nei termini non specificati, eliminando la Default= parte dell'espressione.