Lapisan visual

Lapisan Visual menyediakan API performa tinggi dan 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 lancar dan bebas dari utas UI aplikasi.

Sorotan penting:

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

Aplikasi Windows UWP 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: Penggusuran konten yang digambar kustom yang ringan
2. Efek: Sistem efek UI real-time yang efeknya dapat dianimasikan, dirangkai, dan disesuaikan
3. Animasi: Animasi ekspresif, kerangka kerja-agnostik berjalan independen dari utas UI

Konten

Konten dihosting, diubah, dan tersedia untuk digunakan oleh sistem animasi dan efek menggunakan visual. Di dasar hierarki kelas adalah kelas Visual , proksi utas-agile yang ringan dalam proses aplikasi untuk status visual di kompposittor. Sub-kelas Visual mencakup 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 mendukung XAML FrameworkElements yang paling terlihat.

Untuk informasi selengkapnya, lihat Gambaran umum Visual Komposisi .

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 untuk mencapai animasi properti Efek yang halus dan dinamis, dirender independen dari utas UI. Efek di 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 meniup properti material dengan menanggapi lampu yang dapat dianimasikan. Visual juga dapat melemparkan bayangan. Pencahayaan dan bayangan dapat digabungkan 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 familier untuk mendorong perubahan properti dari waktu ke waktu, ini 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 Gambaran umum animasi komposisi .

Bekerja dengan aplikasi XAML UWP Anda

Anda dapat masuk ke Visual yang dibuat oleh kerangka kerja XAML, dan mendukung FrameworkElement yang terlihat, menggunakan kelas ElementCompositionPreview di Windows.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 XAML yang ada melalui ElementCompositionPreview, atau dengan menambahkannya ke ContainerVisual yang ada di suatu tempat di struktur pohon visual.

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

Bekerja dengan aplikasi desktop Anda

Anda dapat menggunakan lapisan Visual untuk meningkatkan tampilan, nuansa, dan fungsionalitas aplikasi desktop WPF, Formulir Windows, dan C++ Win32 Anda. 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.

Sumber Daya Tambahan:

• Dokumentasi referensi lengkap untuk API
• Sampel Antarmuka Pengguna dan Komposisi Tingkat Lanjut di GitHub Sampel Komposisi Windows
• Galeri Sampel Komposisi Windows.UI.
• umpan Twitter @windowsui
• Baca Artikel MSDN Kenny Kerr tentang API ini: Grafis dan Animasi - Komposisi Windows Ternyata 10