Menyesuaikan tampilan UI berdasarkan platform dan idiom perangkat

Telusuri sampel

Aplikasi .NET Multi-platform App UI (.NET MAUI) dapat menyesuaikan UI mereka untuk platform dan perangkat tertentu. Ini memungkinkan aplikasi Anda untuk:

• Manfaatkan ruang yang paling efektif. Jika Anda merancang aplikasi agar terlihat bagus di perangkat seluler, aplikasi akan tetap dapat digunakan di perangkat desktop tetapi kemungkinan besar akan ada beberapa ruang yang terbuang sia-sia. Anda dapat menyesuaikan aplikasi untuk menampilkan lebih banyak konten saat layar berada di atas ukuran tertentu. Misalnya, aplikasi belanja mungkin menampilkan satu item pada satu waktu di perangkat seluler, tetapi mungkin menampilkan beberapa item di perangkat desktop. Selain itu, dengan menempatkan lebih banyak konten di layar, Anda dapat mengurangi jumlah navigasi yang perlu dilakukan pengguna.
• Manfaatkan kemampuan perangkat. Perangkat tertentu lebih mungkin memiliki kemampuan tertentu. Misalnya, perangkat seluler lebih cenderung memiliki sensor lokasi dan kamera, sementara perangkat desktop mungkin juga tidak memilikinya. Aplikasi Anda dapat mendeteksi kemampuan mana yang tersedia dan mengaktifkan kontrol yang menggunakannya.
• Optimalkan untuk input. Anda dapat mengatur ulang elemen UI untuk mengoptimalkan jenis input tertentu. Misalnya, jika Anda menempatkan elemen navigasi di bagian bawah aplikasi, elemen tersebut akan lebih mudah diakses oleh pengguna seluler. Tetapi pengguna desktop sering mengharapkan untuk melihat elemen navigasi menuju bagian atas aplikasi.

Saat mengoptimalkan UI aplikasi untuk platform dan idiom perangkat tertentu, Anda membuat UI responsif. Pendekatan utama untuk membuat UI responsif di .NET MAUI melibatkan penggunaan OnPlatform ekstensi markup dan OnIdiom ekstensi markup.

Catatan

Ada kategori pemicu, yang dikenal sebagai pemicu status, yang dapat digunakan untuk menyesuaikan tampilan UI dalam skenario tertentu seperti ketika orientasi perangkat berubah. Untuk informasi selengkapnya, lihat Pemicu status.

Menyesuaikan tampilan UI berdasarkan platform

Ekstensi OnPlatform markup memungkinkan Anda menyesuaikan tampilan UI berdasarkan per platform. Ini menyediakan fungsionalitas OnPlatform<T> yang sama dengan kelas dan On , tetapi dengan representasi yang lebih ringkas.

Ekstensi OnPlatform markup didukung oleh OnPlatformExtension kelas , yang menentukan properti berikut:

• Default, dari jenis object, yang Anda atur ke nilai default untuk diterapkan ke properti yang mewakili platform.
• Android, dari jenis object, yang Anda atur ke nilai yang akan diterapkan di Android.
• iOS, dari jenis object, yang Anda atur ke nilai yang akan diterapkan di iOS.
• MacCatalyst, dari jenis object, yang Anda atur ke nilai yang akan diterapkan di Mac Catalyst.
• Tizen, dari jenis object, yang Anda atur ke nilai yang akan diterapkan pada platform Tizen.
• WinUI, dari jenis object, yang Anda atur ke nilai yang akan diterapkan pada WinUI.
• Converter, dari jenis IValueConverter, yang dapat diatur ke IValueConverter implementasi.
• ConverterParameter, jenis object, yang dapat diatur ke nilai untuk diteruskan ke IValueConverter implementasi.

Catatan

Parser XAML memungkinkan OnPlatformExtension kelas disingkat sebagai OnPlatform.

Properti Default adalah properti konten dari OnPlatformExtension. Oleh karena itu, untuk ekspresi markup XAML yang dinyatakan dengan kurung kurawal, Anda dapat menghilangkan Default= bagian ekspresi jika itu adalah argumen pertama. Default Jika properti tidak diatur, properti default ke BindableProperty.DefaultValue nilai properti, asalkan ekstensi markup menargetkan BindableProperty.

Penting

Pengurai XAML mengharapkan bahwa nilai jenis yang benar akan disediakan untuk properti yang menggunakan OnPlatform ekstensi markup. Jika konversi jenis diperlukan, OnPlatform ekstensi markup akan mencoba melakukannya menggunakan konverter default yang disediakan oleh .NET MAUI. Namun, ada beberapa konversi jenis yang tidak dapat dilakukan oleh pengonversi default dan dalam kasus Converter ini properti harus diatur ke IValueConverter implementasi.

Halaman Demo OnPlatform memperlihatkan cara menggunakan OnPlatform ekstensi 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" />

Dalam contoh ini, ketiga OnPlatform ekspresi menggunakan versi singkat dari OnPlatformExtension nama kelas. Tiga OnPlatform ekstensi markup mengatur xref:Microsoft.Maui.Graphics.Colorproperti , WidthRequest, dan HeightRequest dari BoxView ke nilai yang berbeda di iOS dan Android. Ekstensi markup juga menyediakan nilai default untuk properti ini pada platform yang tidak ditentukan, sambil menghilangkan Default= bagian ekspresi.

Menyesuaikan tampilan UI berdasarkan idiom perangkat

Ekstensi OnIdiom markup memungkinkan Anda menyesuaikan tampilan UI berdasarkan idiom perangkat yang dijalankan aplikasi. Ini didukung oleh OnIdiomExtension kelas , yang menentukan properti berikut:

• Default, dari jenis object, yang Anda atur ke nilai default untuk diterapkan ke properti yang mewakili idiom perangkat.
• Phone, dari jenis object, yang Anda atur ke nilai yang akan diterapkan di ponsel.
• Tablet, dari jenis object, yang Anda atur ke nilai yang akan diterapkan pada tablet.
• Desktop, dari jenis object, yang Anda tetapkan ke nilai yang akan diterapkan pada platform desktop.
• TV, jenis object, yang Anda tetapkan ke nilai yang akan diterapkan pada platform TV.
• Watch, dari jenis object, yang Anda tetapkan ke nilai yang akan diterapkan pada platform Watch.
• Converter, dari jenis IValueConverter, yang dapat diatur ke IValueConverter implementasi.
• ConverterParameter, jenis object, yang dapat diatur ke nilai untuk diteruskan ke IValueConverter implementasi.

Catatan

Parser XAML memungkinkan OnIdiomExtension kelas disingkat sebagai OnIdiom.

Properti Default adalah properti konten dari OnIdiomExtension. Oleh karena itu, untuk ekspresi markup XAML yang dinyatakan dengan kurung kurawal, Anda dapat menghilangkan Default= bagian ekspresi jika itu adalah argumen pertama.

Penting

Pengurai XAML mengharapkan bahwa nilai jenis yang benar akan disediakan untuk properti yang menggunakan OnIdiom ekstensi markup. Jika konversi jenis diperlukan, OnIdiom ekstensi markup akan mencoba melakukannya menggunakan konverter default yang disediakan oleh .NET MAUI. Namun, ada beberapa konversi jenis yang tidak dapat dilakukan oleh pengonversi default dan dalam kasus Converter ini properti harus diatur ke IValueConverter implementasi.

Contoh XAML berikut menunjukkan cara menggunakan OnIdiom ekstensi 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" />

Dalam contoh ini, ketiga OnIdiom ekspresi menggunakan versi singkat dari OnIdiomExtension nama kelas. Tiga OnIdiom ekstensi markup mengatur Colorproperti , WidthRequest, dan HeightRequest dari BoxView ke nilai yang berbeda pada idiom ponsel, tablet, dan desktop. Ekstensi markup juga menyediakan nilai default untuk properti ini pada idiom yang tidak ditentukan, sambil menghilangkan Default= bagian ekspresi.