Gambaran umum lapisan visual

Lapisan Visual menyediakan API performa tinggi, mode yang dipertahankan untuk grafis, efek, dan animasi, dan merupakan fondasi untuk semua UI di seluruh perangkat Windows. Anda menentukan UI Anda secara deklaratif, dan lapisan Visual bergantung pada akselerasi perangkat keras grafis untuk memastikan konten, efek, dan animasi Anda dirender dengan cara yang halus dan bebas dari gangguan, independen dari thread UI aplikasi.

Jenis dalam Microsoft.UI.Composition membentuk implementasi Windows App SDK/WinUI 3 dari lapisan Visual.

Sorotan penting:

• API WinRT yang terkenal
• Dirancang untuk antarmuka pengguna dan interaksi yang lebih dinamis
• Konsep yang selaras dengan alat desain
• Skalabilitas linier tanpa penurunan performa mendadak

Aplikasi WinUI dan Windows App SDK Anda sudah menggunakan lapisan Visual melalui salah satu kerangka kerja UI. Anda juga dapat memanfaatkan lapisan Visual secara langsung untuk penyajian kustom, efek, dan animasi dengan sedikit usaha.

Apa yang ada di lapisan Visual?

Fungsi utama lapisan Visual adalah:

1. Konten: Komposit ringan dari konten yang digambar secara kustom
2. Efek: Sistem efek UI real-time yang efeknya dapat dianimasikan, ditautkan, dan disesuaikan
3. Animasi: Animasi ekspresif, yang tidak tergantung pada kerangka kerja dan berjalan independen dari proses UI

Content

Konten dihosting, diubah, dan disediakan untuk digunakan oleh sistem animasi dan efek menggunakan visual. Di dasar hierarki kelas adalah kelas Visual, proksi thread-agile ringan dalam proses aplikasi untuk menampilkan status visual di compositor. Sub-kelas Visual termasuk ContainerVisual untuk memungkinkan anak-anak membuat pohon visual dan SpriteVisual yang berisi konten dan dapat dicat dengan warna solid, konten gambar kustom, atau efek visual. Bersama-sama, jenis Visual ini membentuk struktur pohon visual untuk UI 2D dan menjadi latar belakang bagi XAML FrameworkElements yang paling terlihat.

Untuk informasi selengkapnya, lihat Gambaran umum Komposisi Visual.

Efek

Sistem Efek di lapisan Visual memungkinkan Anda menerapkan rantai efek filter dan transparansi ke Visual atau pohon Visual. Ini adalah sistem efek UI, tidak dikacaukan dengan efek gambar dan media. Efek bekerja bersama dengan sistem Animasi, memungkinkan pengguna mencapai animasi properti Efek yang halus dan dinamis, yang dirender secara independen dari thread UI. Efek dalam Lapisan Visual menyediakan blok penyusun kreatif yang dapat digabungkan dan dianimasikan untuk membangun pengalaman yang disesuaikan dan interaktif.

Selain rantai efek yang dapat dianimasikan, Visual Layer juga mendukung model pencahayaan yang memungkinkan Visual untuk meniru properti material dengan merespons lampu yang dapat dianimasi. Visualisasi juga dapat melemparkan bayangan. Pencahayaan dan bayangan dapat dikombinasikan untuk menciptakan persepsi kedalaman dan realisme.

Untuk informasi selengkapnya, lihat gambaran umum Efek Komposisi .

Animasi

Sistem animasi di lapisan Visual memungkinkan Anda memindahkan visual, menganimasikan efek, dan mendorong transformasi, klip, dan properti lainnya. Ini adalah sistem agnostik kerangka kerja yang telah dirancang dari bawah ke atas dengan mengingat performa. Ini berjalan secara independen dari utas UI untuk memastikan kelancaran dan skalabilitas. Meskipun memungkinkan Anda menggunakan animasi KeyFrame yang akrab untuk mendorong perubahan properti dari waktu ke waktu, itu juga memungkinkan Anda mengatur hubungan matematika antara properti yang berbeda, termasuk input pengguna, memungkinkan Anda langsung membuat pengalaman koreografi yang mulus.

Untuk informasi selengkapnya, lihat ikhtisar animasi komposisi.

Bekerja dengan WinUI XAML

Anda dapat mengakses Visual yang dibuat oleh XAML framework, serta mendukung FrameworkElement yang tampak, dengan menggunakan kelas ElementCompositionPreview di Microsoft.UI.Xaml.Hosting. Perhatikan bahwa Visual yang dibuat untuk Anda oleh kerangka kerja dilengkapi dengan beberapa batasan kustomisasi. Ini karena kerangka kerja mengelola offset, transformasi, dan masa pakai. Namun, Anda dapat membuat Visual Anda sendiri dan melampirkannya ke elemen WinUI yang ada melalui ElementCompositionPreview, atau dengan menambahkannya ke ContainerVisual yang ada di suatu tempat dalam struktur pohon visual.

Untuk informasi selengkapnya, lihat Menggunakan lapisan Visual dengan gambaran umum XAML .

Bekerja dengan aplikasi desktop Anda

Anda dapat menggunakan lapisan Visual untuk meningkatkan tampilan, nuansa, dan fungsionalitas aplikasi desktop Win32 yang dibangun dengan Windows App SDK, serta aplikasi desktop WPF, Windows Forms, dan C++ Win32. Anda dapat memigrasikan pulau konten untuk menggunakan lapisan Visual dan menyimpan sisa UI Anda 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.

Untuk informasi selengkapnya, lihat Memodernisasi aplikasi desktop Anda menggunakan lapisan Visual.

Perbedaan dari UWP

Namespace Microsoft.UI.Composition menyediakan akses ke fungsionalitas yang hampir identik dengan lapisan Visual UWP (Windows.UI.Composition), dalam skenario yang paling umum digunakan. Tetapi ada pengecualian dan perbedaan.

Mendapatkan instans Compositor

Di aplikasi desktop (aplikasi WinUI adalah aplikasi desktop), Window.Current adalah null. Jadi Anda tidak bisa mendapatkan instans Compositor dari Window.Current.Compositor. Di aplikasi WinUI, kami sarankan Anda memanggil ElementCompositionPreview.GetElementVisual(UIElement) untuk mendapatkan Komposisi Visual, dan mengambil Compositor dari properti Compositor visual. Dalam kasus di mana Anda tidak memiliki akses ke UIElement (misalnya, jika Anda membuat CompositionBrush di pustaka kelas), Anda dapat memanggil CompositionTarget.GetCompositorForCurrentThread.

Konten eksternal

Kompositor Microsoft.UI.Composition berjalan sepenuhnya dalam aplikasi Windows App SDK dan hanya memiliki akses ke piksel yang digambarnya. Itu berarti bahwa konten eksternal apa pun (konten yang tidak digambar oleh komppositor) tidak diketahui oleh komposit, yang menciptakan batasan tertentu.

Contoh konten eksternal adalah MediaPlayerElement (Microsoft.UI.Xaml.Controls). Tumpukan media Windows menyediakan XAML dengan handel rantai pertukaran media yang tertutup. XAML memberikan handel tersebut kepada kompositor, yang pada gilirannya menyerahkannya ke Windows (melalui Windows.UI.Composition) untuk ditampilkan. Karena komposit tidak dapat melihat piksel apa pun dalam rantai pertukaran media, kompositnya tidak dapat menyusunnya sebagai bagian dari penyajian keseluruhan untuk jendela. Sebaliknya, ini memberikan rantai pertukaran media ke Windows untuk merendernya di bawah rendering kompositor, dengan lubang yang dihapus dari rendering kompositor untuk memungkinkan rantai pertukaran media di bawahnya terlihat.

Di Windows App SDK/WinUI, SEMUA API berikut membuat konten eksternal:

• MediaPlayerElement
• SwapChainPanel
• WebView2
• MicaBackdrop dan DesktopAcrylicBackdrop, serta MicaController dan DesktopAcrylicController yang mendasari mereka gunakan.

Model penanganan konten eksternal membuat batasan ini:

• Tidak dimungkinkan untuk memiliki konten komposit di balik konten eksternal. Misalnya, webView2 tidak dapat memberikan latar belakang transparan untuk melihat tombol atau gambar XAML di belakangnya. Satu-satunya hal yang dapat berada di belakang konten eksternal adalah konten eksternal lainnya dan latar belakang jendela. Karena itu, kami mencegah/menonaktifkan transparansi untuk konten eksternal.
• Tidak dimungkinkan untuk memiliki sampel konten komposit dari konten eksternal. Misalnya, AcrylicBrush tidak dapat mengambil sampel dan mengaburkan piksel apa pun dari MediaPlayerElement. AcrylicBrush akan mengambil sampel dari gambar komposit, yang berwarna hitam transparan untuk area konten eksternal. Demikian pula, AcrylicBrush di depan MicaBackdrop atau DesktopAcrylicBackdrop tidak dapat melihat warna apa pun yang akan digambar oleh latar belakang tersebut; dan sebaliknya, kuas akan mengaburkan hitam transparan.
• Skenario lain dikenal sebagai destination invert, yang digunakan untuk kursor kontrol kotak teks untuk membalik piksel di depan kursor teks itu. Pembalikan ini juga mengambil sampel dari permukaan kompositor, dan akan terpengaruh jika kotak teks tidak memiliki latar belakang opaque yang dibuat oleh kompositor.
• Karena WinUI SwapChainPanel membuat konten eksternal, WinUI SwapChainPanel tidak mendukung transparansi. Juga tidak mendukung penerapan AcrylicBrush dan efek lain yang menggunakan CompositionBackdropBrush di depannya.

Samples

Proyek Sampel SDK Aplikasi Windows mencakup serangkaian sampel komposisi komprehensif yang menunjukkan cara menggunakan API Microsoft.UI.Composition untuk membangun pengalaman visual yang kaya. Sampel ini mencakup berbagai skenario — dari tata letak dasar dan transformasi ke efek tingkat lanjut, pencahayaan, bayangan, dan penanganan input berbasis InteractionTracker seperti pull-to-refresh dan parallax scrolling. Baik Anda mulai menggunakan lapisan Visual atau mencari pola untuk diterapkan di aplikasi Anda sendiri, sampel ini adalah referensi praktis untuk melihat bagaimana blok penyusun berkumpul.

Jelajahi sampel di GitHub: WindowsAppSDK-Samples / SceneGraph.

Topik terkait

• Referensi MICROSOFT.UI.Composition API
• Menggunakan lapisan Visual di aplikasi desktop