Aracılığıyla paylaş

Görsel katmanına genel bakış

Görsel katmanı grafikler, efektler ve animasyonlar için yüksek performanslı, korumalı mod API'sini sağlar ve Windows cihazlarında tüm kullanıcı arabiriminin temelini oluşturur. Kullanıcı arabiriminizi bildirim temelli bir şekilde tanımlarsınız ve Görsel katmanı, içeriğinizin, efektlerinizin ve animasyonlarınızın uygulamanın kullanıcı arabirimi iş parçacığından bağımsız olarak sorunsuz, sorunsuz bir şekilde işlenmesini sağlamak için grafik donanım hızlandırmasına dayanır.

Microsoft.UI.Composition'daki türler, Görsel katmanının Windows Uygulama SDK'sı/WinUI 3 uygulamasını oluşturur.

Önemli önemli noktalar:

  • Tanıdık WinRT API'leri
  • Daha dinamik kullanıcı arabirimi ve etkileşimler için tasarlanmış
  • Tasarım araçlarıyla uyumlu kavramlar
  • Ani performans uçurumları olmadan doğrusal ölçeklenebilirlik

WinUI ve Windows Uygulama SDK'sı uygulamalarınız zaten UI çerçevelerinden biri aracılığıyla Görsel katmanını kullanıyor. Ayrıca çok az çabayla özel işleme, efektler ve animasyonlar için doğrudan Görsel katmanından da yararlanabilirsiniz.

UI çerçeve katmanı: Çerçeve katmanı (Microsoft.UI.Xaml), grafik katmanı (DirectX) üzerinde oluşturulan görsel katmanı (Microsoft.UI.Composition) üzerine kurulmuştur

Görsel katmanında neler var?

Görsel katmanının birincil işlevleri şunlardır:

  1. İçerik: Özel çizilmiş içeriğin basit bir bileşimi
  2. Efektler: Animasyonlu, zincirlenebilir ve özelleştirilebilir efektleri olan gerçek zamanlı bir UI efektleri sistemi
  3. Animasyonlar: Ui iş parçacığından bağımsız olarak çalışan açıklayıcı, çerçeveden bağımsız animasyonlar

Content

İçerik barındırılır, dönüştürülür ve görseller kullanılarak animasyon ve efektler sistemi tarafından kullanılabilir hale getirilir. Sınıf hiyerarşisinin tabanında, oluşturucudaki görsel durum için uygulama işleminde basit, iş parçacığı çevik bir ara sunucu olan Visual sınıfı bulunur. Visual'ın alt sınıfları, çocukların görsel ağaç oluşturmasına olanak sağlayan ContainerVisual ve içerik içeren ve düz renklerle, özel çizilmiş içerikle veya görsel efektlerle boyanabilen SpriteVisual'ı içerir. Bu Görsel türleri birlikte 2B kullanıcı arabirimi için görsel ağaç yapısını oluşturur ve en görünür XAML FrameworkElement'leri geri alır.

Daha fazla bilgi için Oluşturma Görseli genel bakışına bakın.

Etkiler

Görsel katmanındaki Efektler sistemi, bir Görsele veya Görsel ağacına filtre ve saydamlık efektleri zinciri uygulamanıza olanak tanır. Bu, görüntü ve medya efektleriyle karıştırılmaması gereken bir UI efektleri sistemidir. Efektler Animasyon sistemiyle birlikte çalışarak kullanıcıların ui iş parçacığından bağımsız olarak işlenen Efekt özelliklerinin düzgün ve dinamik animasyonlarını elde etmelerini sağlar. Görsel Katmandaki efektler, uyarlanmış ve etkileşimli deneyimler oluşturmak için birleştirilebilen ve animasyonu oluşturulabilen yaratıcı yapı taşları sağlar.

Görsel Katman, animatable efekt zincirlerine ek olarak, Görsellerin animatable ışıklara yanıt vererek malzeme özelliklerini taklit etmesine olanak tanıyan bir aydınlatma modelini de destekler. Görseller gölge de verebilir. Işık ve gölgeler birleştirilerek derinlik ve gerçekçilik algısı oluşturulabilir.

Daha fazla bilgi için Oluşturma Efektleri genel bakışına bakın.

Animasyonlar

Görsel katmanındaki animasyon sistemi, görselleri taşımanızı, efektlere animasyon eklemenizi ve dönüştürmeleri, klipleri ve diğer özellikleri yönlendirmenizi sağlar. Performans göz önünde bulundurularak sıfırdan tasarlanmış bir çerçeve agnostik sistemdir. Sorunsuz ve ölçeklenebilirlik sağlamak için kullanıcı arabirimi iş parçacığından bağımsız olarak çalışır. Özellik değişikliklerini zaman içinde yönlendirmek için tanıdık KeyFrame animasyonları kullanmanıza olanak tanırken, kullanıcı girişi de dahil olmak üzere farklı özellikler arasında matematiksel ilişkiler ayarlamanıza olanak tanır ve doğrudan sorunsuz koreografik deneyimler oluşturmanıza olanak tanır.

Daha fazla bilgi için Oluşturma animasyonlarına genel bakışa bakın.

WinUI XAML ile çalışma

Microsoft.UI.Xaml.Hosting içindeki ElementCompositionPreview sınıfını kullanarak XAML çerçevesi tarafından oluşturulan ve görünür bir FrameworkElement'i yedekleyerek bir Görsele ulaşabilirsiniz. Çerçeve tarafından sizin için oluşturulan Görsellerin özelleştirmeyle ilgili bazı sınırları olduğunu unutmayın. Bunun nedeni çerçevenin uzaklıkları, dönüşümleri ve yaşam ömürlerini yönetmesidir. Bununla birlikte, kendi Görsellerinizi oluşturabilir ve bunları ElementCompositionPreview aracılığıyla veya görsel ağaç yapısında bir yerde bulunan bir ContainerVisual'a ekleyerek mevcut bir WinUI öğesine ekleyebilirsiniz.

Daha fazla bilgi için bkz. XAML ile Görsel katmanını kullanmaya genel bakış.

Masaüstü uygulamanızla çalışma

Windows Uygulama SDK'sı ile oluşturulan Win32 masaüstü uygulamalarının yanı sıra WPF, Windows Forms ve C++ Win32 masaüstü uygulamalarının genel görünümünü ve işlevselliğini geliştirmek için Görsel katmanını kullanabilirsiniz. Görsel katmanı kullanarak içerik adalarını taşıyabilir ve kullanıcı arabiriminizin geri kalanını mevcut çerçevesinde tutabilirsiniz. Bu, mevcut kod tabanınızda kapsamlı değişiklikler yapmanıza gerek kalmadan uygulama kullanıcı arabiriminizde önemli güncelleştirmeler ve geliştirmeler yapabileceğiniz anlamına gelir.

Daha fazla bilgi için bkz . Görsel katmanını kullanarak masaüstü uygulamanızı modernleştirme.

UWP'den farklar

Microsoft.UI.Composition ad alanı, en yaygın kullanılan senaryolarda UWP Görsel katmanıyla (Windows.UI.Composition) neredeyse aynı olan işlevlere erişim sağlar. Ancak istisnalar ve farklılıklar vardır.

Compositor örneği alma

Masaüstü uygulamalarında (WinUI uygulaması bir masaüstü uygulamasıdır), Window.Current şeklindedir null. Bu yüzden ile Window.Current.Compositor örneğini alamazsınız. WinUI uygulamalarında, bir Kompozisyon Görseli elde etmek için ElementCompositionPreview.GetElementVisual(UIElement) çağrısı yapmanızı ve görselin Compositor özelliğinden Compositor öğesini almanızı öneririz. UIElement erişiminizin olmadığı durumlarda (örneğin, bir sınıf kitaplığında CompositionBrush oluşturmanız durumunda), CompositionTarget.GetCompositorForCurrentThread öğesini çağırabilirsiniz.

Dış içerik

Microsoft.UI.Composition compositor tamamen bir Windows Uygulama SDK'sı uygulaması içinde çalışır ve yalnızca çizdiği piksellere erişebilir. Bu, herhangi bir dış içeriğin (oluşturan tarafından çizilmiş olmayan içerik) compositor tarafından bilinmediği anlamına gelir ve bu da belirli sınırlamalar oluşturur.

Dış içeriğe örnek olarak (Microsoft.UI.Xaml.Controls) MediaPlayerElement örnektir. Windows medya yığını, XAML'ye bir opak medya takas zinciri tutamacı sağlar. XAML, bu tutamacı compositor'a verir, ve bu da Windows.UI.Composition aracılığıyla Windows'a aktarıp gösterir. Oluşturan, medya değiştirme zincirindeki piksellerden hiçbirini göremeyecek olduğundan, pencere için genel işlemenin bir parçası olarak bunu birleştiremez. Bunun yerine, medya takas zincirini, kompozitörün işlemesinde bir delik açarak alttaki medya takas zincirinin görünür olmasını sağlamak için kompozitörün işlemesinin altında işlemesi amacıyla Windows'a verir.

Dış içeriği işleme diyagramı

Windows Uygulama SDK'sı/WinUI'de aşağıdaki API'lerin tümü dış içerik oluşturur:

Dış içeriği işleme modeli şu sınırlamaları oluşturur:

  • Dış içeriğin arkasında compositor içeriği olması mümkün değildir. Örneğin, arkasında XAML düğmeleri veya görüntüleri görmek için WebView2'ye saydam bir arka plan vermek mümkün değildir. Dış içeriğin arkasında olabilecek tek şey diğer dış içerik ve pencere arka planıdır. Bu nedenle, dış içerik için saydamlığı teşvik etmiyoruz/engelleriz.
  • Dış içerikten compositor içerik örneğine sahip olmak mümkün değildir. Örneğin Akrilik Fırça , MediaPlayerElement'ten herhangi bir pikseli örnekleyemez ve bulanıklaştıramaz. Akrilik Fırça , dış içerik alanları için saydam siyah olan compositor görüntüsünden örnekleme yapacaktır. Benzer şekilde, MicaBackdrop veya DesktopAcrylicBackdrop'un önündeki Akrilik Fırça, bu arka planların çizeceği renkleri göremez; bunun yerine fırça saydam siyahı bulanıklaştıracaktır.
  • Başka bir senaryo, metin kutusu denetimlerinde metin imlecinin önündeki pikselleri ters çevirmek için kullanılan hedef ters çevirme olarak bilinir. Bu, benzer şekilde birleşim yüzeyinden örnekleme yapar ve metin kutusunda, compositor tarafından çizilen opak bir arka plan yoksa bundan etkilenecektir.
  • WinUI SwapChainPanel dış içerik oluşturduğundan saydamlığı desteklemez. Önünde CompositionBackdropBrush kullanan diğer efektler ve AcrylicBrush'ın uygulanmasını da desteklemez.

Örnekleri

Windows Uygulama SDK'sı Örnekleri projesi, zengin görsel deneyimler oluşturmak için Microsoft.UI.Composition API'lerinin nasıl kullanılacağını gösteren kapsamlı bir bileşim örnekleri kümesi içerir. Bu örnekler, temel düzen ve dönüşümlerden gelişmiş efektlere, aydınlatmaya, gölgelere ve çekme-yenileme ve parallax kaydırma gibi InteractionTracker tabanlı giriş işlemeye kadar çok çeşitli senaryoları kapsar. İster Görsel katmanını kullanmaya başlayın, ister kendi uygulamanızda uygulanacak desenleri arayın, bu örnekler yapı taşlarının nasıl bir araya geldiğini görmek için pratik bir başvuru sağlar.

GitHub'daki örnekleri keşfedin: WindowsAppSDK-Samples / SceneGraph.

uygulama gif

  • Last updated on