Materi di aplikasi Windows

Bahan adalah efek visual yang diterapkan pada permukaan UI untuk menciptakan kedalaman, hierarki, dan minat visual. WinUI 3 menyediakan empat mekanisme untuk menerapkan bahan, masing-masing cocok untuk skenario yang berbeda.

Important

AcrylicBrush hanya akrilik dalam aplikasi — ini mengaburkan konten XAML di dalam jendela aplikasi. Ini tidak menampilkan desktop atau jendela lain di belakang aplikasi. Untuk efek tembus pandang desktop, gunakan Window.SystemBackdrop atau SystemBackdropElement.

Bahan mana yang harus saya gunakan?

Scenario Material API
Jendela aplikasi dengan latar belakang Mica (berwarna wallpaper) Mica Window.SystemBackdrop = new MicaBackdrop()
Jendela aplikasi dengan latar belakang kaca buram tembus pandang Akrilik Desktop Window.SystemBackdrop = new DesktopAcrylicBackdrop()
Menu flyout, popup, atau konteks dengan latar belakang Akrilik Latar belakang sistem pada permukaan Atur SystemBackdrop pada FlyoutBase, Popup, dll.
Bilah samping, panel, atau elemen dengan Mica atau Acrylic (bukan seluruh jendela) SystemBackdropElement <SystemBackdropElement> kontrol
Panel navigasi atau panel konten dengan efek kabur dalam aplikasi Akrilik dalam aplikasi {ThemeResource AcrylicInAppFillColorDefaultBrush}

Tidak ada materi (default)

Ketika tidak ada material yang diterapkan, latar belakang jendela berupa warna polos yang diambil dari tema terang atau gelap yang aktif — tanpa efek buram atau tembus cahaya.

Cuplikan layar jendela aplikasi WinUI 3 tanpa materi yang diterapkan, memperlihatkan latar belakang putih datar.

Material mengandalkan efek compositor yang memerlukan dukungan perangkat keras dan preferensi pengguna. WinUI 3 akan beralih secara mulus ke warna polos saat material tidak dapat dirender:

  • Desktop Jauh atau mesin virtual — kompositor tidak dapat memadukan dengan konten desktop melalui RDP, sehingga SystemBackdrop material akan beralih secara otomatis.
  • Perangkat keras grafis yang tidak memadai — Mica dan Desktop Acrylic memerlukan DirectX 11 dan memori GPU yang memadai. Perangkat yang tidak memenuhi ambang batas akan menggunakan warna tema polos.
  • Efek transparansi dinonaktifkan — jika pengguna menonaktifkan efek Transparansi dalam Pengaturan > Warna Personalisasi>, semua SystemBackdrop bahan dan AcrylicBrush kembali ke alternatif warna solid mereka.
  • Penghemat Baterai aktif — Windows menonaktifkan akrilik (DesktopAcrylicBackdrop dan AcrylicBrush) saat Penghemat Baterai aktif. Mica tidak terpengaruh.
  • Mode kontras tinggi - semua bahan ditekan; sistem menerapkan warna tema kontras tinggi sebagai gantinya.

Aplikasi Anda tidak perlu mendeteksi kondisi ini — API menangani fallback secara otomatis. Pastikan FallbackColor atau latar belakang tema apa pun yang Anda konfigurasi tetap terlihat baik sebagai warna solid polos.

Mica

Mica memadukan warna wallpaper desktop pengguna ke dalam latar belakang lembut yang dipersonalisasi. Ini dirancang untuk latar belakang jendela aplikasi utama, terutama pada bilah judul dan bagian panel navigasi.

  • API: Window.SystemBackdrop = new MicaBackdrop()
  • Varian: MicaKind.Base (default) atau MicaKind.BaseAlt (lebih ringan, untuk permukaan sekunder)
  • versi Windows: hanya Windows 11. Beralih ke warna tema solid di Windows 10.

Cuplikan layar aplikasi WinUI 3 dengan MicaBackdrop diterapkan, memperlihatkan latar belakang biru-abu-abu halus yang dicat oleh wallpaper desktop pengguna.

Akrilik Desktop

Desktop Acrylic menampilkan tampilan desktop dan konten di belakang jendela aplikasi secara langsung dengan efek buram, sehingga menciptakan tampilan seperti kaca buram.

  • API: Window.SystemBackdrop = new DesktopAcrylicBackdrop()
  • Varian: DesktopAcrylicKind.Base (lebih buram) atau DesktopAcrylicKind.Thin (lebih transparan)
  • versi Windows: Windows 10 (build 17763) dan yang lebih baru.

Cuplikan layar aplikasi WinUI 3 dengan DesktopAcrylicBackdrop diterapkan, memperlihatkan kabur kaca beku konten desktop di belakang jendela.

Akrilik juga dapat diterapkan pada permukaan transien — atur SystemBackdrop pada FlyoutBase, Popup, MenuFlyoutPresenter, atau CommandBarFlyoutCommandBar. Lihat Latar belakang sistem untuk daftar lengkapnya.

SystemBackdropElement

SystemBackdropElement menerapkan material Mica atau Desktop Acrylic dari kompositor OS pada elemen XAML tertentu — bukan pada seluruh jendela. Gunakan ini ketika bilah samping, panel, atau card memerlukan latar belakang Mica atau Acrylic sendiri secara terpisah dari bagian jendela lainnya.

Akrilik Dalam Aplikasi (AcrylicBrush)

AcrylicBrush mengaburkan konten XAML di dalam jendela aplikasi. Ini tidak menampilkan desktop atau jendela lain dari balik permukaan tersebut. Gunakan ini untuk panel navigasi, bilah samping, atau panel konten jika Anda ingin efek tembus pandang di dalam aplikasi.

  • API: Terapkan {ThemeResource AcrylicInAppFillColorDefaultBrush} ke elemen Background, atau tentukan kustom AcrylicBrush dengan TintColor, TintOpacity, dan TintLuminosityOpacity.
  • Properti UWP BackgroundSource = HostBackdrop tidak tersedia di WinUI 3.
  • Untuk detail selengkapnya dan contoh kode, lihat In-app acrylic.

Cuplikan layar aplikasi WinUI 3 dengan AcrylicBrush diterapkan, memperlihatkan panel tembus yang mengaburkan konten XAML di dalam jendela aplikasi.

  • Last updated on