Bagikan melalui

Menggunakan lapisan Visual di aplikasi desktop

  • Artikel

Anda sekarang dapat menggunakan WINDOWS Runtime API di aplikasi desktop non-UWP untuk meningkatkan tampilan, nuansa, dan fungsionalitas aplikasi WPF, Formulir Windows, dan C++ Win32 Anda, dan memanfaatkan fitur UI Windows terbaru yang hanya tersedia melalui UWP.

Untuk banyak skenario, Anda dapat menggunakan pulau XAML untuk menambahkan kontrol XAML modern ke aplikasi Anda. Namun, ketika Anda perlu membuat pengalaman kustom yang melampaui kontrol bawaan, Anda dapat mengakses API lapisan Visual.

Lapisan Visual menyediakan API performa tinggi, mode yang dipertahankan untuk grafis, efek, dan animasi. Ini adalah fondasi untuk UI di seluruh perangkat Windows. Kontrol UWP XAML dibangun pada lapisan Visual, dan memungkinkan banyak aspek Sistem Fluent Design, seperti Cahaya, Kedalaman, Gerakan, Bahan, dan Skala.

Video pendek memperlihatkan antarmuka pengguna yang dibuat dengan lapisan visual.

Antarmuka pengguna dibuat dengan lapisan visual

Membuat antarmuka pengguna yang menarik secara visual di aplikasi Windows apa pun

Lapisan Visual memungkinkan Anda membuat pengalaman menarik dengan menggunakan penulisan konten (visual) yang digambar kustom dan menerapkan animasi, efek, dan manipulasi yang kuat pada objek tersebut dalam aplikasi Anda. Lapisan Visual tidak menggantikan kerangka kerja UI yang ada; sebaliknya, ini adalah suplemen berharga untuk kerangka kerja tersebut.

Anda dapat menggunakan lapisan Visual untuk memberi aplikasi Anda tampilan dan nuansa yang unik, dan menetapkan identitas yang membedakannya dari aplikasi lain. Ini juga memungkinkan prinsip-prinsip Desain Fasih, yang dirancang untuk membuat aplikasi Anda lebih mudah digunakan, menggambar lebih banyak keterlibatan dari pengguna. Misalnya, Anda dapat menggunakannya untuk membuat istik visual dan transisi layar animasi yang memperlihatkan hubungan di antara item di layar.

Fitur lapisan visual

Kuas

Kuas komposisi memungkinkan Anda melukis objek UI dengan warna solid, gradien, gambar, video, efek kompleks, dan banyak lagi.

Telur yang dibuat dengan Pembuat Materi

Telur yang dibuat dengan aplikasi demo Pembuat Materi.

Efek

Efek komposisi termasuk cahaya, bayangan, dan daftar efek filter. Mereka dapat dianimasikan, disesuaikan, dan ditautkan, lalu diterapkan langsung ke visual. SceneLightingEffect dapat dikombinasikan dengan pencahayaan komposisi untuk menciptakan atmosfer, kedalaman, dan bahan.

Lampu dan material

Lampu dan materi yang ditunjukkan di galeri sampel Komposisi UI Windows.

Animasi

Animasi komposisi berjalan langsung dalam proses komppositori, independen dari utas UI. Ini memastikan kelancaran dan skala, sehingga Anda dapat menjalankan sejumlah besar animasi eksplisit bersamaan. Selain animasi KeyFrame yang familier untuk mendorong perubahan properti dari waktu ke waktu, Anda dapat menggunakan ekspresi untuk menyiapkan hubungan matematika antara properti yang berbeda, termasuk input pengguna. Animasi berbasis input memungkinkan Anda membuat UI yang secara dinamis dan lancar merespons input pengguna, yang dapat mengakibatkan keterlibatan pengguna yang lebih tinggi.

Video singkat antarmuka pengguna lain yang dibuat dengan lapisan visual.

Gerakan ditunjukkan di galeri sampel Komposisi UI Windows.

Pertahankan basis kode yang ada dan adopsi secara bertahap

Kode dalam aplikasi yang ada mewakili investasi signifikan yang tidak ingin Anda hilangkan. Anda dapat memigrasikan pulau konten untuk menggunakan lapisan Visual dan menyimpan UI lainnya dalam kerangka kerja yang ada. Ini berarti Anda dapat membuat pembaruan dan penyempurnaan yang signifikan pada UI aplikasi Anda tanpa perlu membuat perubahan ekstensif pada basis kode yang ada.

Sampel dan tutorial

Pelajari cara menggunakan lapisan Visual di aplikasi Anda dengan bereksperimen dengan sampel kami. Sampel dan tutorial ini membantu Anda mulai menggunakan lapisan Visual dan menunjukkan kepada Anda cara kerja fitur.

Win32

Formulir Windows

WPF

Batasan

Meskipun banyak fitur Visual Layer berfungsi sama ketika dihosting di aplikasi desktop seperti yang mereka lakukan di aplikasi UWP, beberapa fitur memang memiliki batasan. Berikut adalah beberapa batasan yang perlu diperhatikan:

  • Rantai efek mengandalkan Win2D untuk deskripsi efek. Paket Win2D NuGet tidak didukung dalam aplikasi desktop, jadi Anda perlu mengkompilasi ulang dari kode sumber.
  • Untuk melakukan pengujian hit, Anda perlu melakukan penghitungan terikat dengan berjalan di pohon visual sendiri. Ini sama dengan Lapisan Visual di UWP, kecuali dalam hal ini tidak ada elemen XAML yang dapat Anda ikat dengan mudah untuk pengujian hit.
  • Lapisan Visual tidak memiliki primitif untuk penyajian teks.
  • Ketika dua teknologi UI yang berbeda digunakan bersama-sama, seperti WPF dan Visual Layer, mereka masing-masing bertanggung jawab untuk menggambar piksel mereka sendiri di layar, dan mereka tidak dapat berbagi piksel. Akibatnya, konten Lapisan Visual selalu dirender di atas konten UI lainnya. (Ini dikenal sebagai masalah ruang udara.) Anda mungkin perlu melakukan pengodean dan pengujian tambahan untuk memastikan konten lapisan Visual Anda mengubah ukuran dengan antarmuka pengguna host dan tidak menempati konten lain.
  • Konten yang dihosting di aplikasi desktop tidak secara otomatis mengubah ukuran atau menskalakan untuk DPI. Langkah tambahan mungkin diperlukan untuk memastikan konten Anda menangani perubahan DPI. (Lihat tutorial khusus platform untuk info selengkapnya.)

Sumber Tambahan

Referensi API