Omówienie warstwy wizualnej

Warstwa wizualna zapewnia interfejs API w trybie zachowania wysokiej wydajności dla grafiki, efektów i animacji oraz stanowi podstawę dla wszystkich interfejsów użytkownika na urządzeniach z systemem Windows. Interfejs użytkownika definiuje się w sposób deklaratywny, a warstwa wizualna opiera się na przyspieszaniu sprzętowym grafiki w celu zapewnienia, że zawartość, efekty i animacje są renderowane w płynny, wolny od usterek sposób niezależnie od wątku interfejsu użytkownika aplikacji.

Typy w Microsoft.UI.Composition tworzą implementację Windows App SDK/WinUI 3 warstwy wizualnej.

Istotne wyróżnienia:

• Znane interfejsy API winRT
• Zaprojektowano pod kątem bardziej dynamicznego interfejsu użytkownika i interakcji
• Pojęcia dopasowane do narzędzi projektowych
• Skalowalność liniowa bez nagłych momentów spadku wydajności

Aplikacje WinUI i Windows App SDK już korzystają z warstwy wizualnej za pośrednictwem jednej ze struktur interfejsu użytkownika. Możesz również korzystać z warstwy wizualnej bezpośrednio w przypadku renderowania niestandardowego, efektów i animacji z bardzo niewielkim nakładem pracy.

Co znajduje się w warstwie wizualizacji?

Podstawowe funkcje warstwy wizualnej to:

1. Zawartość: uproszczone komponowanie niestandardowej zawartości rysowanej
2. Efekty: System efektów interfejsu użytkownika w czasie rzeczywistym, którego efekty mogą być animowane, łańcuchowe i dostosowane
3. Animacje: wyraziste, niezwiązane z żadnym frameworkiem animacje działające niezależnie od wątku interfejsu użytkownika

Content

Zawartość jest hostowana, przekształcana i udostępniana do użytku przez system animacji i efektów przy użyciu wizualizacji. Podstawą hierarchii klas jest klasa Visual , lekki serwer proxy zwinny wątkowo w procesie aplikacji dla stanu wizualizacji w komponatorze. Klasy podrzędne wizualizacji obejmują ContainerVisual , aby umożliwić dzieciom tworzenie drzew wizualizacji i SpriteVisual , które zawierają zawartość i mogą być malowane kolorami stałymi, niestandardowymi rysowanymi treściami lub efektami wizualnymi. Razem te typy wizualne tworzą strukturę drzewa wizualnego dla interfejsu użytkownika 2D oraz najbardziej widoczne elementy XAML Framework.

Aby uzyskać więcej informacji, zobacz Omówienie wizualizacji kompozycji .

Efekty

System efektów w warstwie wizualnej umożliwia zastosowanie łańcucha efektów filtrowania i przezroczystości do wizualizacji lub drzewa wizualizacji. Jest to system efektów interfejsu użytkownika, nie mylić z efektami obrazu i multimediów. Efekty działają w połączeniu z systemem animacji, dzięki czemu użytkownicy mogą osiągać płynne i dynamiczne animacje właściwości efektów, renderowane niezależnie od wątku interfejsu użytkownika. Efekty w warstwie wizualnej zapewniają kreatywne bloki konstrukcyjne, które można łączyć i animować w celu konstruowania dostosowanych i interaktywnych środowisk.

Oprócz animowalnych łańcuchów efektów, warstwa wizualna obsługuje również model oświetlenia, który pozwala wizualizacjom naśladować właściwości materiału poprzez reakcję na animowalne światła. Wizualizacje mogą również rzucać cienie. Oświetlenie i cienie można połączyć, aby stworzyć postrzeganie głębi i realizmu.

Aby uzyskać więcej informacji, zobacz Omówienie efektów kompozycji .

Animacje

System animacji w warstwie wizualnej umożliwia przenoszenie elementów wizualnych, animowanie efektów oraz sterowanie transformacjami, wycinkami i innymi właściwościami. Jest to system niezależny od używanego frameworku, który został zaprojektowany od podstaw z myślą o wydajności. Działa niezależnie od wątku interfejsu użytkownika, aby zapewnić bezproblemowość i skalowalność. Chociaż umożliwia używanie znanych animacji ramki kluczy do wprowadzania zmian właściwości w czasie, umożliwia również skonfigurowanie relacji matematycznych między różnymi właściwościami, w tym wprowadzanie danych przez użytkownika, dzięki czemu można bezpośrednio tworzyć bezproblemowe środowiska choreograficzne.

Aby uzyskać więcej informacji, zobacz przegląd animacji kompozycji.

Praca z WinUI XAML

Możesz uzyskać dostęp do Visual utworzonego przez framework XAML i wspierającego widoczny element FrameworkElement, używając klasy ElementCompositionPreview w Microsoft.UI.Xaml.Hosting. Pamiętaj, że wizualizacje utworzone dla Ciebie przez strukturę mają pewne ograniczenia dostosowywania. Dzieje się tak, ponieważ platforma zarządza przesunięciami, transformacjami i okresami istnienia. Można jednak utworzyć własne wizualizacje i dołączyć je do istniejącego elementu WinUI za pomocą elementu ElementCompositionPreview lub dodając je do istniejącego elementu ContainerVisual w strukturze drzewa wizualnego.

Aby uzyskać więcej informacji, zobacz Omówienie korzystania z warstwy wizualnej z językiem XAML .

Praca z aplikacją na komputer stacjonarny

Za pomocą warstwy wizualnej można zwiększyć wygląd, działanie i funkcjonalność aplikacji klasycznych Win32 utworzonych za pomocą zestawu SDK aplikacji systemu Windows, a także aplikacji klasycznych WPF, Windows Forms i C++ Win32. Możesz migrować wyspy zawartości, aby używać warstwy wizualnej i zachować pozostałą część interfejsu użytkownika w istniejącej strukturze. Oznacza to, że można wprowadzać znaczące aktualizacje i ulepszenia interfejsu użytkownika aplikacji bez konieczności wprowadzania rozbudowanych zmian w istniejącej bazie kodu.

Aby uzyskać więcej informacji, zobacz Modernizuj aplikację na pulpicie przy użyciu warstwy wizualnej.

Różnice w porównaniu z platformą UWP

Przestrzeń nazw Microsoft.UI.Composition zapewnia dostęp do funkcji, które są niemal identyczne z warstwą wizualną platformy UWP (Windows.UI.Composition), w najczęściej używanych scenariuszach. Istnieją jednak wyjątki i różnice.

Pobieranie wystąpienia kompositora

W aplikacjach stacjonarnych (aplikacja WinUI jest aplikacją stacjonarną), Window.Current to null. Nie można więc pobrać instancji Compositor z Window.Current.Compositor. W aplikacjach WinUI zalecamy wywołanie funkcji ElementCompositionPreview.GetElementVisual(UIElement), aby uzyskać element Visual kompozycji, i uzyskać Compositor z właściwości Compositor wizualizacji. W przypadkach, gdy nie masz dostępu do UIElement (na przykład jeśli utworzysz CompositionBrush w bibliotece klas), możesz wywołać CompositionTarget.GetCompositorForCurrentThread.

Zawartość zewnętrzna

Kompositor Microsoft.UI.Composition działa w całości wewnątrz aplikacji w ramach Windows App SDK i ma dostęp tylko do pikseli, które sam narysował. Oznacza to, że jakakolwiek zawartość zewnętrzna (zawartość, która nie została narysowana przez kompositor) jest nieznana komponatorowi, co powoduje pewne ograniczenia.

Przykładem zawartości zewnętrznej jest Element MediaPlayer (Microsoft.UI.Xaml.Controls). Stos multimediów systemu Windows zapewnia XAML nieprzezroczysty uchwyt łańcucha wymiany multimediów. Język XAML przekazuje uchwyt kompositorowi, który z kolei przekazuje go do systemu Windows (za pośrednictwem Windows.UI.Composition) do wyświetlenia. Ponieważ compositor nie widzi żadnego piksela w łańcuchu wymiany mediów, nie może komponować tego jako części ogólnego renderowania okna. Zamiast tego przekazuje łańcuch wymiany mediów do systemu Windows, aby renderować go pod renderowaniem kompozytora, z wyciętym otworem w renderowaniu kompozytora, aby łańcuch wymiany mediów poniżej był widoczny.

W Windows App SDK/WinUI wszystkie następujące interfejsy API generują zawartość zewnętrzną:

• MediaPlayerElement
• SwapChainPanel
• WebView2
• MicaBackdrop i DesktopAcrylicBackdrop, a także bazowe MicaController i DesktopAcrylicController, których używają.

Model obsługi zawartości zewnętrznej tworzy następujące ograniczenia:

• Nie można umieścić elementu komponatora za elementem zewnętrznym. Na przykład nie można nadać widokowi WebView2 przezroczystego tła, aby wyświetlić za nim przyciski lub obrazy XAML. Jedyne rzeczy, które mogą znajdować się za zawartością zewnętrzną, to inna zawartość zewnętrzna i tło okna. Z tego powodu odradzamy/wyłączamy przezroczystość zawartości zewnętrznej.
• Nie można mieć próbki zawartości komponatora z zawartości zewnętrznej. Na przykład AcrylicBrush nie może próbkować i rozmyć żadnych pikseli z MediaPlayerElement. AkrylBrush będzie próbować z obrazu kompozytora, który jest przezroczysty czarny dla zewnętrznych obszarów zawartości. Podobnie AcrylicBrush przed MicaBackdrop lub DesktopAcrylicBackdrop nie może zobaczyć żadnych kolorów, które te tła będą rysować; a zamiast tego pędzel rozmyje przezroczystą czerń.
• Inny scenariusz jest znany jako odwracanie docelowe, który jest używany w kontrolkach pola tekstowego do odwracania pikseli przed karetą wstawiania tekstu. To przekształcenie podobnie pobiera próbki z powierzchni kompozytora. Będzie to miało wpływ, jeśli pole tekstowe nie ma nieprzezroczystego tła rysowanego przez kompozytora.
• Ponieważ SwapChainPanel WinUI tworzy zawartość zewnętrzną, nie obsługuje przezroczystości. Nie obsługuje stosowania AcrylicBrush i innych efektów, które używają CompositionBackdropBrush przed nim.

Próbki

Projekt Przykłady zestawu SDK aplikacji systemu Windows zawiera kompleksowy zestaw przykładów kompozycji, które pokazują, jak używać interfejsów API Microsoft.UI.Composition do tworzenia rozbudowanych środowisk wizualnych. Te przykłady obejmują szeroką gamę scenariuszy — od podstawowego układu i transformacji po zaawansowane efekty, oświetlenie, cienie oraz obsługę danych wejściowych z użyciem InteractionTracker, takich jak przeciągnij, aby odświeżyć i przewijanie paralaksy. Niezależnie od tego, czy rozpoczynasz pracę z warstwą wizualizacji, czy szukasz wzorców, które mają być stosowane we własnej aplikacji, te przykłady stanowią praktyczne informacje, aby zobaczyć, jak bloki konstrukcyjne łączą się.

Zapoznaj się z przykładami w witrynie GitHub: WindowsAppSDK-Samples / SceneGraph.

Tematy pokrewne

• Dokumentacja interfejsu API Microsoft.UI.Composition
• Używanie warstwy wizualnej w aplikacjach komputerowych