Bagikan melalui

Bayangan di aplikasi Windows

Windows aplikasi menggunakan bayangan untuk mengekspresikan kedalaman dan menambahkan hierarki visual. Bayangan membantu menciptakan tampilan kedalaman, memandu fokus pengguna ke elemen terpenting di UI.

Shadow adalah salah satu cara pengguna memahami elevasi. Cahaya di atas objek yang terangkat menciptakan bayangan pada permukaan di bawahnya. Semakin tinggi objek, semakin besar dan lembut bayangan menjadi. Objek yang ditinggikan di UI Anda tidak perlu memiliki bayangan, tetapi bayangan membantu menciptakan tampilan ketinggian.

Dalam aplikasi Windows, bayangan harus digunakan dengan tujuan daripada cara estetika. Menggunakan terlalu banyak bayangan akan mengurangi atau menghilangkan kemampuan bayangan untuk memfokuskan pengguna.

Jika Anda menggunakan kontrol standar, bayangan sudah dimasukkan ke dalam UI Anda. Namun, Anda dapat menyertakan bayangan secara manual di UI Anda dengan menggunakan API ThemeShadow atau API DropShadow.

ThemeShadow

Jenis ThemeShadow dapat diterapkan ke elemen XAML apa pun untuk menggambar bayangan dengan tepat berdasarkan koordinat x, y, z.

  • Ini menerapkan bayangan ke elemen berdasarkan nilai kedalaman z, menimulasi kedalaman.
  • Ini menjaga bayangan tetap konsisten di semua aplikasi berkat tampilan bayangan bawaan.

Berikut adalah bagaimana ThemeShadow telah diimplementasikan pada MenuFlyout. MenuFlyout memiliki bayangan bawaan dengan kedalaman 32px yang diterapkan ke menu utama dan semua menu berlapis.

Cuplikan layar ThemeShadow diterapkan ke MenuFlyout dengan tiga menu terbuka berlapis.

Buka aplikasi Galeri WinUI dan lihat ThemeShadow beraksi

ThemeShadow dalam kontrol umum

Kontrol umum berikut akan secara otomatis menggunakan ThemeShadow untuk mentransmisikan bayangan dari kedalaman 32px kecuali ditentukan lain:

ThemeShadow dalam Popup

Sering kali UI aplikasi Anda menggunakan popup untuk skenario di mana Anda memerlukan perhatian pengguna dan tindakan cepat. Ini adalah contoh hebat ketika bayangan harus digunakan untuk membantu membuat hierarki di UI aplikasi Anda.

ThemeShadow secara otomatis melemparkan bayangan saat diterapkan ke elemen XAML apa pun dalam Popup. Ini akan melemparkan bayangan pada konten latar belakang aplikasi di belakangnya dan Popup terbuka lainnya di bawahnya.

Untuk menggunakan ThemeShadow dengan Popup, gunakan Shadow properti untuk menerapkan ThemeShadow ke elemen XAML. Kemudian, angkat elemen dari elemen lain di belakangnya, misalnya dengan menggunakan komponen z dari properti Translation . Untuk sebagian besar antarmuka pengguna Popup, elevasi default yang direkomendasikan relatif terhadap konten latar belakang aplikasi adalah 32 piksel yang efektif.

Contoh ini menunjukkan sebuah persegi panjang dalam Pop-up yang melemparkan bayangan ke latar belakang aplikasi dan Pop-up lain di belakangnya.

<Popup>
    <Rectangle x:Name="PopupRectangle" Fill="Lavender" Height="48" Width="96">
        <Rectangle.Shadow>
            <ThemeShadow />
        </Rectangle.Shadow>
    </Rectangle>
</Popup>

// Elevate the rectangle by 32px
PopupRectangle.Translation += new Vector3(0, 0, 32);

Popup persegi panjang tunggal dengan bayangan.

Menonaktifkan ThemeShadow default pada kontrol Flyout kustom

Kontrol berdasarkan Flyout, DatePickerFlyout, MenuFlyout , atau TimePickerFlyout secara otomatis menggunakan ThemeShadow untuk mentransmisikan bayangan.

Jika bayangan default tidak terlihat benar pada konten kontrol Anda, Anda dapat menonaktifkannya dengan mengatur properti IsDefaultShadowEnabled ke false pada FlyoutPresenter terkait:

<Flyout>
    <Flyout.FlyoutPresenterStyle>
        <Style TargetType="FlyoutPresenter">
            <Setter Property="IsDefaultShadowEnabled" Value="False" />
        </Style>
    </Flyout.FlyoutPresenterStyle>
</Flyout>

ThemeShadow di elemen lainnya

Nota

Dimulai dengan Windows 11, jika aplikasi menargetkan Windows SDK versi 22000 atau yang lebih baru, koleksi Receivers diabaikan. Namun tidak akan ada kesalahan dan bayangan terus berfungsi.

Secara umum kami mendorong Anda untuk berpikir dengan cermat tentang penggunaan bayangan Anda dan membatasi penggunaannya pada kasus di mana ia memperkenalkan hierarki visual yang bermakna. Namun, kami menyediakan cara untuk melemparkan bayangan dari elemen UI apa pun jika Anda memiliki skenario lanjutan yang mengharuskannya.

Untuk melemparkan bayangan dari elemen XAML yang tidak ada dalam Popup, Anda harus secara eksplisit menentukan elemen lain yang dapat menerima bayangan dalam ThemeShadow.Receivers koleksi. Penerima tidak dapat menjadi leluhur dari caster di pohon visual.

Contoh ini menunjukkan dua persegi panjang yang memproyeksikan bayangan ke kisi di belakang mereka.

<Grid>
    <Grid.Resources>
        <ThemeShadow x:Name="SharedShadow" />
    </Grid.Resources>

    <Grid x:Name="BackgroundGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" />

    <Rectangle x:Name="Rectangle1" Height="100" Width="100" Fill="Turquoise" Shadow="{StaticResource SharedShadow}" />

    <Rectangle x:Name="Rectangle2" Height="100" Width="100" Fill="Turquoise" Shadow="{StaticResource SharedShadow}" />
</Grid>

/// Add BackgroundGrid as a shadow receiver and elevate the casting buttons above it
SharedShadow.Receivers.Add(BackgroundGrid);

Rectangle1.Translation += new Vector3(0, 0, 16);
Rectangle2.Translation += new Vector3(120, 0, 32);

Dua persegi panjang pirus di samping satu sama lain, keduanya dengan bayangan.

Bayangan jatuh

DropShadow tidak menyediakan nilai bayangan bawaan dan Anda perlu menentukannya sendiri. Misalnya implementasi, lihat kelas DropShadow .

Petunjuk / Saran

Dimulai dengan Windows 11, jika aplikasi menargetkan Windows SDK versi 22000 atau yang lebih baru, ThemeShadow akan bereaksi seperti bayangan jatuh. Jika Anda menggunakan DropShadow, Anda mungkin mempertimbangkan untuk menggunakan ThemeShadow sebagai gantinya.

Bayangan mana yang harus saya gunakan?

Harta benda ThemeShadow DropShadow
Min SDK SDK 18362 SDK 14393
Adaptabilitas Yes Tidak.
Kustomisasi Tidak. Yes
Sumber cahaya Tidak ada Tidak ada
Didukung di lingkungan 3D Ya (Saat berfungsi di lingkungan 3D, bayangan ditimulasi.) Tidak.
  • Perlu diingat bahwa tujuan bayangan adalah untuk memberikan hierarki yang bermakna, bukan sebagai perawatan visual sederhana.
  • Umumnya, sebaiknya gunakan ThemeShadow, yang menyediakan nilai bayangan yang konsisten.
  • Untuk kekhawatiran tentang performa, batasi jumlah bayangan, gunakan perawatan visual lainnya, atau gunakan DropShadow.
  • Jika Anda memiliki skenario yang lebih canggih untuk mencapai hierarki visual, pertimbangkan untuk menggunakan perawatan visual lainnya (misalnya, warna). Jika bayangan diperlukan, gunakan DropShadow.
  • Last updated on