Share via

Kedalaman dan bayangan Z

  • Artikel

A gif showing four gray rectangles that are stacked diagonally, one on top of the other. The gif is animated so that shadows appear and disappear.

Membuat hierarki visual elemen di UI Anda membuat UI mudah dipindai dan menyampaikan apa yang penting untuk difokuskan. Elevasi, tindakan membawa elemen tertentu dari UI Anda ke depan, sering digunakan untuk mencapai hierarki seperti itu dalam perangkat lunak. Artikel ini membahas cara membuat elevasi di aplikasi Windows dengan menggunakan kedalaman dan bayangan z.

Kedalaman Z adalah istilah yang digunakan di antara pembuat aplikasi 3D untuk menunjukkan jarak antara dua permukaan di sepanjang sumbu z. Ini menggambarkan seberapa dekat objek dengan penampil. Anggap saja sebagai konsep yang mirip dengan koordinat x/y, tetapi ke arah z.

Aplikasi Windows menggunakan bayangan untuk mengekspresikan kedalaman dan menambahkan hierarki visual. Untuk mencapai hal ini, sumbu z menyediakan jalur pengkodan yang mudah. Namun, bayangan ditimulasi; mereka tidak ditampilkan dalam arti 3D yang sebenarnya. Hal ini agar kami dapat mencapai perasaan mendalam tanpa mengorbankan performa UI aplikasi Anda.

Mengapa menggunakan kedalaman z?

Di dunia fisik, kita cenderung fokus pada objek yang lebih dekat dengan kita. Kita juga dapat menerapkan naluri spasial ini ke UI digital. Misalnya, jika Anda mendekatkan elemen dengan pengguna, maka pengguna akan secara instinctif berfokus pada elemen . Dengan memindahkan elemen UI lebih dekat pada sumbu z, Anda dapat membuat hierarki visual antar objek, membantu pengguna menyelesaikan tugas secara alami dan efisien di aplikasi Anda.

Apa itu bayangan?

Shadow adalah salah satu cara pengguna memperkirakan elevasi. Cahaya di atas objek yang ditingkatkan menciptakan bayangan pada permukaan di bawah ini. Semakin tinggi objek, semakin besar dan lembut bayangan menjadi. Objek yang ditingkatkan di UI Anda tidak perlu memiliki bayangan, tetapi membantu menciptakan tampilan elevasi.

Di 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 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 seluruh dan di seluruh aplikasi berkat estetika 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.

A screen shot of ThemeShadow applied to a MenuFlyout with three open, nested menus.

ThemeShadow dalam kontrol umum

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

Catatan

ThemeShadow diperkenalkan di Windows 10 versi 1903 (SDK 18362). Ini diperbarui di Windows 11 untuk menggunakan bayangan sembilangrid alih-alih bayangan yang diproyeksikan untuk performa yang lebih baik.

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, tingkatkan elemen dari elemen lain di belakangnya, misalnya dengan menggunakan komponen z 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 Persegi panjang dalam Popup yang mentransmisikan bayangan ke konten latar belakang aplikasi dan Popup lainnya 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);

A single rectangular popup with a shadow.

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 lain

Catatan

Dimulai dengan Windows 11, jika aplikasi menargetkan Windows SDK versi 22000 atau yang lebih baru, Receivers koleksi 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 melemparkan bayangan ke Kisi di belakangnya:

<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);

Two turquoise rectangles next to each other, both with shadows.

Jatuhkan bayangan

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

Tip

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?

Properti ThemeShadow DropShadow
Min SDK SDK 18362 SDK 14393
Adaptasi Ya Tidak
Kustomisasi Tidak Ya
Sumber cahaya Tidak Tidak
Didukung di lingkungan 3D Ya (Saat berfungsi di lingkungan 3D, bayangan ditimulasi.) No
  • 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.