Bagikan melalui

Tingkatkan UI dengan lapisan Visual (SDK Aplikasi Windows/WinUI 3)

  • Artikel

Lapisan Visual di SDK Aplikasi Windows/WinUI 3 menyediakan API performa tinggi, mode yang dipertahankan untuk grafis, efek, animasi, dan input. Ini adalah fondasi untuk semua UI di seluruh perangkat Windows.

Jenis dalam Microsoft.UI.Composition membentuk implementasi SDK Aplikasi Windows/WinUI 3 dari lapisan Visual. Ini sangat mirip dengan lapisan Visual UWP, yang diimplementasikan di namespace Windows.UI.Composition . Perbedaan antara keduanya dan fungsionalitas yang hilang dari lapisan Visual SDK Aplikasi Windows/WinUI 3 dirinci di bawah ini.

Perbedaan dari UWP

Perbedaan paling jelas antara Microsoft.UI.Composition dan lapisan Visual UWP adalah namespace. Microsoft.UI.Composition menyediakan akses ke fungsionalitas yang hampir identik dengan lapisan Visual UWP, dalam skenario yang paling umum digunakan. Tetapi ada pengecualian, dan perbedaan.

SDK Aplikasi Windows/WinUI 3 menggunakan Microsoft.UI.Composition untuk menggambarkan pohon visual individual. Visual tersebut kemudian dikomposisikan untuk membuat penyajian lengkap jendela. Ini sangat mirip dengan cara kerja Windows.UI.Composition (untuk aplikasi UWP). Tetapi salah satu perbedaan besar adalah bahwa komposit Microsoft.UI.Composition berjalan sepenuhnya dalam aplikasi SDK Aplikasi Windows; dan hanya memiliki akses ke piksel yang dibuatnya. 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 untuk XAML handel rantai pertukaran media buram. XAML memberikan handel tersebut kepada komposit, yang pada gilirannya menyerahkannya ke Windows (melalui Windows.UI.Composition) untuk ditampilkan. Lebih khusus lagi, karena komposit tidak dapat melihat piksel apa pun dalam rantai pertukaran media, kompositnya tidak dapat menyatukannya sebagai bagian dari penyajian keseluruhan untuk jendela. Sebaliknya, ini memberikan rantai pertukaran media ke Windows untuk merendernya di bawah penyajian komposit, dengan lubang yang dipotong dari rendering komposit untuk memungkinkan rantai pertukaran media di bawahnya terlihat. Berikut adalah visualisasi penyiapan ini.

Diagram penyajian konten eksternal

Secara umum, pendekatan ini memungkinkan konten eksternal (seperti rantai pertukaran) menjadi bagian dari penyajian keseluruhan untuk jendela; dan masih memungkinkan konten lain yang digambar oleh komposit untuk tumpang tindih di atas konten eksternal—misalnya, rendering MediaTransportControls XAML di atas media. Tetapi tidak mengizinkan interaksi efek yang lebih canggih dengan konten eksternal ini. Itu berlaku untuk semua pendekatan yang dapat digunakan seseorang untuk menyambungkan rantai pertukaran ke dalam tampilan: baik melalui XAML (misalnya, melalui SwapChainPanel), atau melalui Komposisi (misalnya, menggunakan ICompositorInterop::CreateCompositionSurfaceForSwapChain).

Di SDK Aplikasi Windows/WinUI 3, API berikut semua membuat konten eksternal.

Model, yang dijelaskan di atas, menangani konten eksternal membuat batasan ini:

  • Tidak dimungkinkan untuk memiliki konten komposit di balik konten eksternal (yaitu, di belakang/di bawah lapisan eksternal dalam diagram di atas). Jadi, misalnya, tidak mungkin untuk memberikan Latar belakang transparan WebView2 agar dapat 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. Sehingga hitam transparan akan menjadi apa acrylicBrush kabur. 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 invert tujuan, yang digunakan untuk tanda sisipan kontrol kotak teks untuk mengembalikan piksel tempat tanda sisipan teks berada di depan. Itu membalikkan sampel yang sama dari permukaan komposit, dan akan terpengaruh jika kotak teks tidak memiliki latar belakang buram yang digambar oleh komposit.
  • Karena WinUI 3 SwapChainPanel membuat konten eksternal, itu tidak mendukung transparansi. Juga tidak mendukung penerapan AcrylicBrush dan efek lain yang menggunakan KomposisiBackdropBrush di depannya. AcrylicBrush dan efek berbasis KomposisiBackdropBrush lainnya ini tidak dapat mengambil sampel dari SwapChainPanel.
  • Di aplikasi desktop (aplikasi WinUI 3 adalah aplikasi desktop), Window.Current adalah null. Jadi Anda tidak dapat mengambil instans Compositor dari Window.Current.Compositor. Di aplikasi XAML (WinUI 3 dan UWP), kami sarankan Anda memanggil ElementCompositionPreview.GetElementVisual(UIElement) untuk mendapatkan Visual Komposisi, 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.

Untuk detail selengkapnya tentang lapisan Visual, lihat Gambaran umum lapisan visual dalam dokumentasi UWP. Dalam kebanyakan kasus, dokumentasi dan sampel juga berlaku untuk Microsoft.UI.Composition.

Prasyarat untuk menggunakan Microsoft.UI.Composition

Untuk menggunakan API Komposisi Microsoft.UI.di SDK Aplikasi Windows/WinUI 3:

  1. Unduh dan instal rilis terbaru SDK Aplikasi Windows. Untuk informasi selengkapnya, lihat Mulai mengembangkan aplikasi Windows.
  2. Buat proyek baru seperti yang dijelaskan di Mulai mengembangkan aplikasi Windows, atau ikuti instruksi untuk menggunakan SDK Aplikasi Windows dalam proyek yang sudah ada.

Untuk mempelajari selengkapnya tentang ketersediaan Microsoft.UI.Composition di SDK Aplikasi Windows/WinUI 3, lihat saluran rilis.

Kami telah memperbarui Galeri Sampel Komposisi Windows untuk sekarang mengambil dependensi pada API Komposisi SDK Aplikasi Windows. Kunjungi WindowsCompositionSamples untuk melihat API Microsoft.UI.Composition yang sedang beraksi.

gif aplikasi