Bahan akrilik

Akrilik adalah jenis Brush yang menciptakan tekstur tembus. Anda dapat menerapkan akrilik ke permukaan aplikasi untuk menambahkan kedalaman dan membantu membangun hierarki visual.

API Penting: Kelas AcrylicBrush, Properti latar belakang

Akrilik dalam tema cahaya

Akrilik dalam tema gelap

Akrilik dan Sistem Fluent Design

Sistem Fluent Design membantu Anda membuat UI modern dan tebal yang menggabungkan cahaya, kedalaman, gerakan, bahan, dan skala. Akrilik adalah komponen Sistem Fluent Design yang menambahkan tekstur fisik (materi) dan kedalaman ke aplikasi Anda. Untuk mempelajari lebih lanjut, lihat gambaran umum Desain Fasih.

Contoh

Galeri WinUI 2
Jika Anda telah menginstal aplikasi WinUI 2 Gallery, klik di sini untuk membuka aplikasi dan melihat akrilik beraksi.

Mendapatkan aplikasi Galeri WinUI 2 (Microsoft Store)
Dapatkan kode sumber (GitHub)

Jenis campuran akrilik

Karakteristik Akrilik yang paling terlihat adalah transparansinya. Ada dua jenis campuran akrilik yang mengubah apa yang terlihat melalui bahan:

• Akrilik latar belakang mengungkapkan wallpaper desktop dan jendela lain yang berada di belakang aplikasi yang saat ini aktif, menambahkan kedalaman antara jendela aplikasi sambil merayakan preferensi personalisasi pengguna.
• Akrilik dalam aplikasi menambah rasa kedalaman dalam bingkai aplikasi, memberikan fokus dan hierarki.

Hindari melapisi beberapa permukaan akrilik: beberapa lapisan akrilik latar belakang dapat membuat ilusi optik yang mengganggu.

Kapan menggunakan akrilik

• Gunakan akrilik dalam aplikasi untuk mendukung UI, seperti pada permukaan yang mungkin tumpang tindih konten saat digulir atau berinteraksi.
• Gunakan akrilik latar belakang untuk elemen UI sementara, seperti menu konteks, flyout, dan UI yang dapat dimatikan cahaya.
  Menggunakan Akrilik dalam skenario sementara membantu mempertahankan hubungan visual dengan konten yang memicu UI sementara.

Jika Anda menggunakan akrilik dalam aplikasi pada permukaan navigasi, pertimbangkan untuk memperluas konten di bawah panel akrilik untuk meningkatkan alur di aplikasi Anda. Menggunakan NavigationView akan melakukan ini untuk Anda secara otomatis. Namun, untuk menghindari menciptakan efek striping, cobalah untuk tidak menempatkan beberapa bagian akrilik edge-to-edge - ini dapat menciptakan jahitan yang tidak diinginkan antara dua permukaan kabur. Akrilik adalah alat untuk membawa harmoni visual ke desain Anda, tetapi ketika digunakan dengan tidak benar dapat mengakibatkan kebisingan visual.

Pertimbangkan pola penggunaan berikut untuk memutuskan cara terbaik untuk menggabungkan akrilik ke dalam aplikasi Anda:

Panel Vertikal

Untuk panel vertikal atau permukaan yang membantu memisahkan konten aplikasi Anda, kami sarankan Anda menggunakan latar belakang buram alih-alih akrilik. Jika panel vertikal Anda terbuka di atas konten, seperti di mode Ringkas atau Minimal NavigationView, kami sarankan Anda menggunakan akrilik dalam aplikasi untuk membantu mempertahankan konteks halaman saat pengguna membuka panel ini.

Permukaan sementara

Untuk aplikasi dengan menu konteks, flyout, popup non-modal, atau panel pengabaian ringan, disarankan untuk menggunakan akrilik latar belakang, terutama jika permukaan ini menarik di luar bingkai jendela aplikasi utama.

Banyak kontrol XAML menggambar akrilik secara default. MenuFlyout, AutoSuggestBox, ComboBox, dan kontrol serupa dengan popup yang mematikan cahaya semuanya menggunakan akrilik saat terbuka.

Catatan

Rendering permukaan akrilik intensif GPU, yang dapat meningkatkan konsumsi daya perangkat dan mempersingkat masa pakai baterai. Efek akrilik secara otomatis dinonaktifkan saat perangkat memasuki mode Penghemat Baterai. Pengguna dapat menonaktifkan efek akrilik untuk semua aplikasi dengan menonaktifkan efek Transparansi di Pengaturan > Warna Personalisasi > .

Kegunaan dan kemampuan beradaptasi

Akrilik secara otomatis menyesuaikan penampilannya untuk berbagai perangkat dan konteks.

Dalam mode Kontras Tinggi, pengguna terus melihat warna latar belakang yang akrab dari pilihan mereka sebagai pengganti akrilik. Selain itu, akrilik latar belakang dan akrilik dalam aplikasi muncul sebagai warna solid:

• Saat pengguna menonaktifkan efek Transparansi di Pengaturan > Warna Personalisasi > .
• Ketika mode Penghemat Baterai diaktifkan.
• Saat aplikasi berjalan pada perangkat keras kelas bawah.

Selain itu, hanya akrilik latar belakang yang akan menggantikan transparansi dan teksturnya dengan warna solid:

• Saat jendela aplikasi di desktop dinonaktifkan.
• Saat aplikasi berjalan di Xbox, HoloLens, atau dalam mode tablet.

Pertimbangan legibilitas

Penting untuk memastikan bahwa teks apa pun yang disajikan aplikasi Anda kepada pengguna memenuhi rasio kontras (lihat Persyaratan teks yang dapat diakses). Kami telah mengoptimalkan sumber daya akrilik sehingga teks memenuhi rasio kontras di atas akrilik. Kami tidak menyarankan menempatkan teks berwarna aksen pada permukaan akrilik Anda karena kombinasi ini kemungkinan tidak melewati persyaratan rasio kontras minimum pada ukuran font 14px default. Cobalah untuk menghindari menempatkan hyperlink di atas elemen akrilik. Selain itu, jika Anda memilih untuk menyesuaikan warna akrilik atau tingkat keburaman, ingatlah dampaknya pada legibilitas.

Sumber daya tema akrilik

Anda dapat dengan mudah menerapkan akrilik ke permukaan aplikasi Anda menggunakan sumber daya tema XAML AcrylicBrush atau AcrylicBrush yang telah ditentukan sebelumnya. Pertama, Anda harus memutuskan apakah akan menggunakan akrilik dalam aplikasi atau latar belakang. Pastikan untuk meninjau pola aplikasi umum yang dijelaskan sebelumnya dalam artikel ini untuk rekomendasi.

Kami telah membuat kumpulan sumber daya tema kuas untuk jenis akrilik latar belakang dan dalam aplikasi yang menghormati tema aplikasi dan kembali ke warna solid sesuai kebutuhan. Untuk WinUI 2, sumber daya tema ini terletak di file themeresources AcrylicBrush, dalam repositori GitHub microsoft-ui-xaml. Sumber daya yang menyertakan Latar Belakang dalam namanya mewakili akrilik latar belakang, sementara InApp mengacu pada akrilik dalam aplikasi.

Untuk melukis permukaan tertentu, terapkan salah satu sumber daya tema WinUI 2 ke latar belakang elemen sama seperti Anda akan menerapkan sumber daya kuas lainnya.

<Grid Background="{ThemeResource AcrylicBackgroundFillColorDefaultBrush}">

Kuas akrilik kustom

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

• TintColor: lapisan overlay warna/warna.
• TintOpacity: opasitas lapisan warna.
• TintLuminosityOpacity: mengontrol jumlah saturasi yang diizinkan melalui permukaan akrilik dari latar belakang.
• BackgroundSource: bendera untuk menentukan apakah Anda ingin latar belakang atau akrilik dalam aplikasi.
• FallbackColor: warna solid yang menggantikan akrilik dalam Penghemat Baterai. Untuk akrilik latar belakang, warna fallback juga menggantikan akrilik saat aplikasi Anda tidak berada di jendela desktop aktif atau saat aplikasi berjalan di ponsel dan Xbox.

Untuk menambahkan kuas akrilik, tentukan tiga sumber daya untuk tema kontras gelap, terang, dan tinggi. Perhatikan bahwa sebaliknya, sebaiknya gunakan SolidColorBrush dengan x:Key yang sama dengan AcrylicBrush gelap/terang.

Catatan

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

<ResourceDictionary.ThemeDictionaries>
    <ResourceDictionary x:Key="Default">
        <AcrylicBrush x:Key="MyAcrylicBrush"
            BackgroundSource="HostBackdrop"
            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"
            BackgroundSource="HostBackdrop"
            TintColor="#FFFF0000"
            TintOpacity="0.8"
            TintLuminosityOpacity="0.5"
            FallbackColor="#FFFF7F7F"/>
    </ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

Contoh berikut menunjukkan cara mendeklarasikan AcrylicBrush dalam kode. Jika aplikasi Anda mendukung beberapa target OS, pastikan untuk memeriksa apakah API ini tersedia di komputer pengguna.

if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.UI.Xaml.Media.AcrylicBrush"))
{
    Windows.UI.Xaml.Media.AcrylicBrush myBrush = new Windows.UI.Xaml.Media.AcrylicBrush();
    myBrush.BackgroundSource = Windows.UI.Xaml.Media.AcrylicBackgroundSource.HostBackdrop;
    myBrush.TintColor = Color.FromArgb(255, 202, 24, 37);
    myBrush.FallbackColor = Color.FromArgb(255, 202, 24, 37);
    myBrush.TintOpacity = 0.6;

    grid.Fill = myBrush;
}
else
{
    SolidColorBrush myBrush = new SolidColorBrush(Color.FromArgb(255, 202, 24, 37));

    grid.Fill = myBrush;
}

Perluas akrilik ke bilah judul

Untuk memberi jendela aplikasi Anda tampilan yang mulus, Anda dapat menggunakan akrilik di area bilah judul. Contoh ini memperluas akrilik ke bilah judul dengan mengatur properti ButtonBackgroundColor dan ButtonInactiveBackgroundColor objek ApplicationViewTitleBar ke Colors.Transparent.

private void ExtendAcrylicIntoTitleBar()
{
    CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;
    ApplicationViewTitleBar titleBar = ApplicationView.GetForCurrentView().TitleBar;
    titleBar.ButtonBackgroundColor = Colors.Transparent;
    titleBar.ButtonInactiveBackgroundColor = Colors.Transparent;
}

Kode ini dapat ditempatkan di metode OnLaunched aplikasi Anda (App.xaml.cs), setelah panggilan ke Window.Activate, seperti yang ditunjukkan di sini, atau di halaman pertama aplikasi Anda.

// Call your extend acrylic code in the OnLaunched event, after
// calling Window.Current.Activate.
protected override void OnLaunched(LaunchActivatedEventArgs e)
{
    Frame rootFrame = Window.Current.Content as Frame;

    // Do not repeat app initialization when the Window already has content,
    // just ensure that the window is active
    if (rootFrame == null)
    {
        // Create a Frame to act as the navigation context and navigate to the first page
        rootFrame = new Frame();

        rootFrame.NavigationFailed += OnNavigationFailed;

        if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
        {
            //TODO: Load state from previously suspended application
        }

        // Place the frame in the current Window
        Window.Current.Content = rootFrame;
    }

    if (e.PrelaunchActivated == false)
    {
        if (rootFrame.Content == null)
        {
            // When the navigation stack isn't restored navigate to the first page,
            // configuring the new page by passing required information as a navigation
            // parameter
            rootFrame.Navigate(typeof(MainPage), e.Arguments);
        }
        // Ensure the current window is active
        Window.Current.Activate();

        // Extend acrylic
        ExtendAcrylicIntoTitleBar();
    }
}

Selain itu, Anda harus menggambar judul aplikasi, yang biasanya muncul secara otomatis di bilah judul, dengan TextBlock menggunakan CaptionTextBlockStyle. Untuk informasi selengkapnya, lihat Kustomisasi bilah judul.

Lakukan dan jangan lakukan

• Gunakan akrilik pada permukaan sementara.
• Perluas akrilik ke setidaknya satu tepi aplikasi Anda untuk memberikan pengalaman yang mulus dengan memadukan secara halus dengan lingkungan aplikasi.
• Jangan letakkan akrilik desktop pada permukaan latar belakang aplikasi Anda yang besar.
• Jangan letakkan beberapa panel akrilik di samping satu sama lain karena ini menghasilkan jahitan yang terlihat yang tidak diinginkan.
• Jangan menempatkan teks berwarna aksen di atas permukaan akrilik.

Cara kami merancang akrilik

Kami menyempurnakan komponen kunci akrilik untuk tiba pada tampilan dan properti uniknya. Kami mulai dengan transparansi, kabur, dan kebisingan untuk menambahkan kedalaman dan dimensi visual ke permukaan datar. Kami menambahkan lapisan mode campuran pengecualian untuk memastikan kontras dan legibilitas UI yang ditempatkan pada latar belakang akrilik. Akhirnya, kami menambahkan warna warna untuk peluang personalisasi. Dalam konser, lapisan-lapisan ini menambah bahan segar yang dapat digunakan.

Resep akrilik: latar belakang, kabur, campuran pengecualian, overlay warna/warna, kebisingan

Dapatkan kode sampel

• Sampel Galeri WinUI 2 - Lihat semua kontrol XAML dalam format interaktif.

Artikel terkait

Gambaran umum Desain Fasih