Bahan Mica

Mica adalah bahan buram dan dinamis yang menggabungkan tema dan wallpaper desktop untuk melukis latar belakang jendela yang bertahan lama seperti aplikasi dan pengaturan. Anda dapat menerapkan Mica ke backdrop aplikasi Anda untuk menyenangkan pengguna dan membuat hierarki visual, membantu produktivitas, dengan meningkatkan clarity tentang jendela mana yang sedang fokus. Mica dirancang khusus untuk performa aplikasi karena hanya sampel wallpaper desktop sekali untuk membuat visualisasinya.

Mica dalam tema terang

Mica dalam tema gelap

Mica Alt adalah varian Mica, dengan tinting yang lebih kuat dari warna latar belakang desktop pengguna. Anda dapat menerapkan Mica Alt ke backdrop aplikasi untuk menyediakan hierarki visual yang lebih dalam daripada Mica, terutama saat membuat aplikasi dengan bilah judul bertab. Mica Alt tersedia untuk aplikasi yang menggunakan Windows App SDK 1.1 atau yang lebih baru, saat berjalan pada Windows 11 versi 22000 atau yang lebih baru.

Gambar-gambar ini menunjukkan perbedaan antara Mica dan Mica Alt di bilah judul dengan tab. Gambar pertama menggunakan Mica dan gambar kedua menggunakan Mica Alt.

Kapan menggunakan Mica atau Mica Alt

Mica dan Mica Alt adalah bahan yang muncul di latar belakang aplikasi Anda — di belakang semua konten lainnya. Setiap elemen bersifat buram dan mencakup tema pengguna serta wallpaper desktop untuk menciptakan tampilan yang sangat dipersonalisasi. Saat pengguna memindahkan jendela di seluruh layar, materi Mica secara dinamis beradaptasi untuk membuat visualisasi yang kaya menggunakan wallpaper di bawah aplikasi. Selain itu, materi membantu pengguna fokus pada tugas saat ini dengan kembali ke warna netral ketika aplikasi tidak aktif.

Kami menyarankan agar Anda menerapkan Mica atau Mica Alt sebagai lapisan dasar aplikasi Anda, dan memprioritaskan visibilitas di area bilah judul. Untuk panduan lapisan yang lebih spesifik, lihat Lapisan dan Elevasi dan bagian Lapisan aplikasi dengan Mica di artikel ini.

Kegunaan dan kemampuan beradaptasi

Bahan Mica secara otomatis menyesuaikan penampilan mereka untuk berbagai perangkat dan konteks. Mereka dirancang untuk performa karena mereka menangkap wallpaper latar belakang hanya sekali untuk membuat visualisasi mereka.

Dalam mode Kontras Tinggi, pengguna terus melihat warna latar belakang yang akrab dari pilihan mereka sebagai pengganti Mica atau Mica Alt. Selain itu, bahan Mica akan muncul sebagai warna fallback solid (SolidBackgroundFillColorBase untuk Mica, SolidBackgroundFillColorBaseAlt untuk Mica Alt) ketika:

• Pengguna menonaktifkan transparansi di Pengaturan > Warna Personalisasi > .
• Mode Penghemat Baterai diaktifkan.
• Aplikasi ini berjalan pada perangkat keras kelas bawah.
• Jendela aplikasi di desktop menjadi nonaktif.
• Versi Windows-nya di bawah 22000.

Lapisan aplikasi dengan Mica

Lapisan konten pola desain standar

Lapisan konten pola desain kartu

Mica sangat ideal sebagai lapisan fondasi dalam hierarki aplikasi Anda karena statusnya yang tidak aktif dan aktif serta personalisasi yang halus. Untuk mengikuti sistem dua lapisan Lapisan dan Elevasi, kami mendorong Anda untuk menerapkan Mica sebagai lapisan dasar aplikasi Anda dan menambahkan lapisan konten tambahan yang berada di atas lapisan dasar. Lapisan konten harus mengambil bahan di belakangnya, Mica, menggunakan LayerFillColorDefaultBrush, warna solid dengan keburaman rendah, sebagai latar belakangnya. Pola lapisan konten yang kami rekomendasikan adalah:

• Pola standar: Latar belakang yang berdampingan untuk area besar yang membutuhkan diferensiasi hierarkis yang berbeda dari lapisan dasar. LayerFillColorDefaultBrush harus diterapkan ke latar belakang kontainer permukaan aplikasi WinUI 3 Anda (misalnya Kisi, StackPanel, Bingkai, dll.).
• Pola kartu: Kartu tersegmentasi untuk aplikasi yang dirancang dengan beberapa komponen antarmuka pengguna yang berseksi dan terputus-putus. Untuk definisi antarmuka pengguna kartu menggunakan LayerFillColorDefaultBrush, lihat Panduan lapisan dan Elevasi .

Untuk memberi jendela aplikasi Anda tampilan yang mulus, Mica harus terlihat di bilah judul jika Anda memilih untuk menerapkan materi ke aplikasi Anda. Anda dapat menampilkan Mica di bilah judul dengan memperluas aplikasi ke area non-klien dan membuat bilah judul kustom transparan. Untuk informasi selengkapnya, lihat Bilah judul.

Contoh berikut menampilkan implementasi umum strategi lapisan dengan NavigationView di mana Mica terlihat di area bilah judul.

• Pola standar di Left NavigationView.
• Pola standar di Tampilan Navigasi Atas.
• Pola kartu pada Left NavigationView.

Pola standar di Left NavigationView

Secara default, NavigationView dalam mode Kiri menyertakan lapisan konten di area kontennya. Contoh ini memperluas Mica ke area bilah judul dan membuat bilah judul kustom.

Pola standar di Tampilan Navigasi Atas

Secara default, NavigationView dalam mode Atas menyertakan lapisan konten di area kontennya. Contoh ini memperluas Mica ke area bilah judul dan membuat bilah judul kustom.

Pola kartu di Tampilan Navigasi Kiri

Untuk mengikuti pola kartu menggunakan NavigationView, Anda harus menghapus lapisan konten default dengan mengganti sumber daya tema latar belakang dan batas. Kemudian, Anda dapat membuat kartu di area konten kontrol. Contoh ini membuat beberapa kartu, memperluas Mica ke area bilah judul, dan membuat bilah judul kustom. Untuk informasi selengkapnya tentang antarmuka kartu, lihat Panduan elevasi dan lapisan.

Lapisan aplikasi dengan Mica Alt

Mica Alt adalah alternatif untuk Mica sebagai lapisan dasar dalam hierarki aplikasi Anda dengan fitur yang sama seperti status tidak aktif dan aktif dan personalisasi halus. Kami mendorong Anda untuk menerapkan Mica Alt sebagai lapisan dasar aplikasi Anda saat Anda membutuhkan kontras antara elemen bilah judul dan area perintah aplikasi Anda (misalnya navigasi, menu).

Skenario umum untuk menggunakan Mica Alt adalah ketika Anda membuat aplikasi dengan bilah judul bertab. Untuk mengikuti panduan Lapisan dan Elevasi , kami mendorong Anda untuk menerapkan Mica Alt sebagai lapisan dasar aplikasi Anda, tambahkan lapisan perintah yang berada di atas lapisan dasar, dan akhirnya menambahkan lapisan konten tambahan yang berada di atas lapisan perintah. Lapisan komando harus mengambil bahan di belakangnya, Mica Alt, menggunakan LayerOnMicaBaseAltFillColorDefaultBrush, warna solid dengan keburaman rendah, sebagai latar belakangnya. Lapisan konten harus mengambil lapisan di bawahnya, menggunakan LayerFillColorDefaultBrush, warna solid opasitas rendah lainnya. Sistem lapisan adalah sebagai berikut:

• Mica Alt: Lapisan dasar.
• Lapisan perintah: Memerlukan diferensiasi hierarkis yang berbeda dari lapisan dasar. LayerOnMicaBaseAltFillColorDefaultBrush harus diterapkan ke area perintah permukaan aplikasi WinUI Anda (misalnya MenuBar, struktur navigasi, dll.)
• Lapisan konten: Latar belakang berkesinambungan untuk area besar yang membutuhkan hierarki berbeda dari lapisan perintah. LayerFillColorDefaultBrush harus diterapkan ke latar belakang kontainer permukaan aplikasi WinUI Anda (misalnya Kisi, StackPanel, Bingkai, dll.).

Untuk memberi jendela aplikasi Anda tampilan yang mulus, Mica Alt harus terlihat di bilah judul jika Anda memilih untuk menerapkan materi ke aplikasi Anda. Anda dapat menampilkan Mica Alt di bilah judul dengan memperluas aplikasi Anda ke area non-klien dan membuat bilah judul kustom transparan.

Rekomendasi

• Atur latar belakang menjadi transparan untuk semua lapisan yang memungkinkan Anda melihat Mica sehingga Mica dapat terlihat dengan jelas.
• Jangan terapkan materi backdrop lebih dari sekali dalam aplikasi.
• Jangan terapkan materi backdrop ke elemen UI. Material backdrop tidak akan tampak pada elemen itu sendiri. Ini hanya akan muncul jika semua lapisan antara elemen UI dan jendela diatur ke transparan.

Contoh

Buka aplikasi Galeri WinUI 3 dan lihat Mica beraksi

Aplikasi Galeri WinUI 3 mencakup contoh interaktif kontrol dan fitur WinUI. Dapatkan aplikasi dari Microsoft Store atau telusuri kode sumber pada GitHub.

Cara menggunakan Mica

Untuk menggunakan Mica di aplikasi WinUI, lihat Menerapkan materi Mica atau Acrylic di aplikasi desktop untuk Windows 11.

Untuk menggunakan Mica di aplikasi Win32, lihat Apply Mica di aplikasi desktop Win32 untuk Windows 11.

Artikel terkait

• Bahan
• Pelapisan dan Ketinggian
• Gunakan bahan Mica atau Acrylic di aplikasi desktop untuk Windows 11
• Gunakan Mica pada aplikasi desktop Win32 untuk Windows 11
• Tampilan Navigasi