Akrilik dalam aplikasi

Anda dapat menerapkan akrilik dalam aplikasi ke permukaan aplikasi Anda menggunakan sumber daya XAML AcrylicBrush atau tema yang telah AcrylicBrush ditentukan sebelumnya.

Nota

Di WinUI 3, AcrylicBrush menyediakan efek akrilik hanya di dalam aplikasi — ini menerapkan efek blur dan tint pada konten XAML di dalam jendela aplikasi, bukan pada desktop atau konten yang berada di belakang jendela. Properti UWP BackgroundSource (yang mengaktifkan HostBackdrop mode untuk akrilik tingkat jendela) tidak tersedia di WinUI 3. Untuk akrilik tingkat jendela yang menampilkan desktop melalui jendela aplikasi Anda, atur Window.SystemBackdrop ke DesktopAcrylicBackdrop. Untuk menerapkan materi backdrop sistem (Mica atau Acrylic dari komposit OS) ke elemen UI tertentu daripada seluruh jendela, gunakan SystemBackdropElement.

Buka aplikasi Galeri WinUI dan lihat Akrilik beraksi

WinUI mencakup kumpulan sumber daya tema kuas yang menghormati tema aplikasi dan beralih ke warna solid jika diperlukan. Untuk melukis surface tertentu, terapkan salah satu sumber daya tema ke latar belakang elemen sama seperti Anda akan menerapkan sumber daya kuas lainnya.

<Grid Background="{ThemeResource AcrylicInAppFillColorDefaultBrush}">

Nota

Anda dapat melihat sumber daya ini di file sumber daya tema AcrylicBrush, di repositori GitHub microsoft-ui-xaml.

Kuas akrilik kustom

Anda dapat memilih untuk menambahkan warna ke akrilik aplikasi Anda untuk menampilkan branding atau memberikan keseimbangan visual dengan elemen lain di halaman. Untuk menampilkan warna bukan skala abu-abu, Anda perlu menentukan kuas akrilik Anda sendiri menggunakan properti berikut.

  • TintColor: lapisan warna.
  • TintOpacity: keburaman lapisan warna.
  • TintLuminosityOpacity: mengontrol jumlah saturasi yang diizinkan menembus permukaan akrilik dari latar belakang.
  • FallbackColor: warna solid yang menggantikan akrilik ketika efek tidak dapat dirender — misalnya, dalam mode Penghemat Baterai, ketika pengguna menonaktifkan efek Transparansi dalam Pengaturan > Warna Personalisasi > , atau pada perangkat keras kelas bawah.

Swatch akrilik dengan tema terang

Swatch akrilik tema gelap

Opasitas luminositas dibandingkan dengan opasitas rona

Untuk menambahkan kuas akrilik, tentukan tiga sumber daya untuk tema gelap, terang, dan kontras tinggi. Dalam mode kontras tinggi, kami sarankan Anda menggunakan SolidColorBrush yang memiliki x:Key sama seperti x:Key pada AcrylicBrush gelap/terang.

Nota

Jika Anda tidak menentukan TintLuminosityOpacity nilai, sistem akan secara otomatis menyesuaikan nilainya berdasarkan TintColor dan TintOpacity Anda.

<ResourceDictionary.ThemeDictionaries>
    <ResourceDictionary x:Key="Default">
        <AcrylicBrush x:Key="MyAcrylicBrush"
            TintColor="#FFFF0000"
            TintOpacity="0.8"
            TintLuminosityOpacity="0.5"
            FallbackColor="#FF7F0000"/>
    </ResourceDictionary>

    <ResourceDictionary x:Key="HighContrast">
        <SolidColorBrush x:Key="MyAcrylicBrush"
            Color="{ThemeResource SystemColorWindowColor}"/>
    </ResourceDictionary>

    <ResourceDictionary x:Key="Light">
        <AcrylicBrush x:Key="MyAcrylicBrush"
            TintColor="#FFFF0000"
            TintOpacity="0.8"
            TintLuminosityOpacity="0.5"
            FallbackColor="#FFFF7F7F"/>
    </ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

Sampel berikut menunjukkan cara mendeklarasikan AcrylicBrush dalam kode.

AcrylicBrush myBrush = new AcrylicBrush();
myBrush.TintColor = Color.FromArgb(255, 202, 24, 37);
myBrush.FallbackColor = Color.FromArgb(255, 202, 24, 37);
myBrush.TintOpacity = 0.6;

grid.Background = myBrush;
  • Terakhir diperbarui pada