Sdílet prostřednictvím

Přehled vizuální vrstvy

Vrstva vizuálu poskytuje vysoce výkonné rozhraní API v režimu zachování grafiky, efektů a animací a je základem pro všechna uživatelská rozhraní na zařízeních s Windows. Uživatelské rozhraní definujete deklarativním způsobem a vrstva vizuálu spoléhá na hardwarovou akceleraci grafického hardwaru, aby se zajistilo, že se váš obsah, efekty a animace vykreslují bezproblémově bez ohledu na vlákno uživatelského rozhraní aplikace.

Typy v Microsoft.UI.Composition tvoří implementaci Windows App SDK/WinUI 3 vrstvy Visual.

Důležité zvýraznění:

  • Známá rozhraní API WinRT
  • Navrženo pro dynamičtější uživatelské rozhraní a interakce
  • Koncepty v souladu s nástroji pro návrh
  • Lineární škálovatelnost bez náhlých výkonových zlomů

Vaše aplikace WinUI a Windows App SDK už používají vrstvu vizuálu prostřednictvím jedné z architektur uživatelského rozhraní. Vizuální vrstvu můžete také využít přímo pro vlastní vykreslování, efekty a animace s velmi malým úsilím.

Vrstvení architektury uživatelského rozhraní: Vrstva rozhraní (Microsoft.UI.Xaml) je postavená na vizuální vrstvě (Microsoft.UI.Composition), která je postavená na grafické vrstvě (DirectX).

Co je ve vrstvě vizuálu?

Mezi primární funkce vrstvy vizuálu patří:

  1. Obsah: Zjednodušené kompozitování vlastního nakresleného obsahu
  2. Efekty: Systém efektů uživatelského rozhraní v reálném čase, u kterého mohou být efekty animované, zřetězené a přizpůsobené
  3. Animace: Výrazné, nezávislé na frameworku animace běžící nezávisle na vlákně uživatelského rozhraní

Content

Obsah je hostovaný, transformovaný a zpřístupněný pro použití systémem animací a efektů pomocí vizuálů. Základem hierarchie tříd je třída Visual, jednoduchá vlákna-agilní proxy v rámci procesu aplikace pro vizuální stav v kompozitoru. Mezi podtřídy vizuálu patří ContainerVisual, která umožňuje dětským prvkům vytvářet stromy vizuálů, a SpriteVisual, která obsahuje obsah a lze ji malovat jednolitými barvami, vlastním nakresleným obsahem nebo vizuálními efekty. Tyto typy vizuálů společně tvoří vizuální stromovou strukturu pro 2D uživatelské rozhraní a zahrnují nejviditelnější XAML FrameworkElements.

Další informace najdete v přehledu Composition Visual.

Účinky

Systém Efekty ve vizuální vrstvě umožňuje použít řetěz filtrů a efektů průhlednosti na vizuál nebo strom vizuálů. Jedná se o systém efektů uživatelského rozhraní, který se nezaměňuje s obrazovými a multimediálními efekty. Efekty fungují ve spojení s animačním systémem, což uživatelům umožňuje dosáhnout hladkých a dynamických animací vlastností efektu vykreslených nezávisle na vlákně uživatelského rozhraní. Efekty ve vizuální vrstvě poskytují kreativní stavební bloky, které lze kombinovat a animovat a vytvářet přizpůsobené a interaktivní prostředí.

Kromě animovatelných efektových řetězců tato vizuální vrstva také podporuje model osvětlení, který umožňuje vizualizacím napodobovat vlastnosti materiálů tím, že reagují na animovatelná světla. Vizualizace mohou také vrhat stíny. Osvětlení a stíny lze kombinovat, aby se vytvořilo vnímání hloubky a realismu.

Další informace najdete v přehledu Efekty složení .

Animace

Animační systém ve vizuální vrstvě umožňuje přesouvat vizuály, animovat efekty a řídit transformace, klipy a další vlastnosti. Jedná se o systém nezávislý na architekturách, který byl navržen od základů s ohledem na výkon. Spouští se nezávisle na vlákně uživatelského rozhraní, aby se zajistila plynulost a škálovatelnost. I když umožňuje používat známé animace KeyFrame k řízení změn vlastností v průběhu času, umožňuje také nastavit matematické vztahy mezi různými vlastnostmi, včetně uživatelského vstupu, a umožňuje vám přímo vytvářet bezproblémové taneční prostředí.

Další informace najdete v přehledu animací kompozice.

Práce s WinUI XAML

K vizuálu vytvořenému architekturou XAML, který podporuje viditelný FrameworkElement, se můžete dostat pomocí třídy ElementCompositionPreview v Microsoft.UI.Xaml.Hosting. Všimněte si, že vizuály vytvořené architekturou mají určitá omezení přizpůsobení. Je to proto, že rámec spravuje posuny, transformace a životnosti. Můžete ale vytvořit vlastní vizuály a připojit je k existujícímu elementu WinUI prostřednictvím ElementCompositionPreview nebo je přidat do existujícího KontejnerVisual někde ve struktuře vizuální stromové struktury.

Další informace naleznete v tématu Použití vizuální vrstvy s přehledem XAML .

Práce s desktopovou aplikací

Pomocí vrstvy Vizuál můžete vylepšit vzhled, chování a funkce desktopových aplikací Win32 vytvořených pomocí sady Windows App SDK a také desktopových aplikací WPF, Windows Forms a C++ Win32. Můžete migrovat ostrovy obsahu, abyste mohli používat vrstvu vizuálu a zachovat zbytek uživatelského rozhraní ve stávajícím rozhraní. To znamená, že můžete provádět významné aktualizace a vylepšení uživatelského rozhraní aplikace, aniž byste museli provádět rozsáhlé změny existujícího základu kódu.

Další informace najdete v tématu Modernizace desktopové aplikace pomocí vizuální vrstvy.

Rozdíly od UPW

Obor názvů Microsoft.UI.Composition poskytuje přístup k funkcím, které jsou téměř identické s vizuální vrstvou UPW (Windows.UI.Composition) v nejčastěji používaných scénářích. Existují ale výjimky a rozdíly.

Získání instance Compositoru

V desktopových aplikacích (aplikace WinUI je desktopová aplikace), Window.Current je null. Proto nemůžete načíst instanci Compositoru z Window.Current.Compositor. V aplikacích WinUI doporučujeme volat ElementCompositionPreview.GetElementVisual(UIElement) pro získání složky Composition Visual a načtení Compositor z Compositor vlastnosti vizuálu. V případech, kdy nemáte přístup k UIElement (například pokud vytvoříte CompositionBrush v knihovně tříd), můžete zavolat CompositionTarget.GetCompositorForCurrentThread.

Externí obsah

Compositor Microsoft.UI.Composition běží zcela v aplikaci Windows App SDK a má přístup pouze k pixelům, které nakreslil. To znamená, že jakýkoli externí obsah (obsah, který nebyl nakreslen kompozitorem) není pro kompozitor neznámý, což vytváří určitá omezení.

Příkladem externího obsahu je MediaPlayerElement (Microsoft.UI.Xaml.Controls). Zásobník médií systému Windows poskytuje XAML neprůhledné řetězové propojení médií. XAML předává tento popisovač kompozitoru, který ho pak předává Windows (přes Windows.UI.Composition) k zobrazení. Vzhledem k tomu, že kompozitor nevidí žádné pixely v řetězci mediálních swapů, nemůže to složit v rámci celkového vykreslování okna. Místo toho předává řetězec prohození médií systému Windows, aby ho vykreslil pod vykreslováním kompozitoru, s otvorem vyříznutým z vykreslování kompozitoru, aby bylo možné zobrazit řetězec prohození médií pod ním.

Diagram vykreslování externího obsahu

V sadě Windows App SDK/WinUI všechna následující rozhraní API vytvářejí externí obsah:

Model zpracování externího obsahu vytváří tato omezení:

  • Není možné mít obsah kompozitoru za externím obsahem. Například webView2 nemůže dát průhledné pozadí, aby bylo možné zobrazit tlačítka XAML nebo obrázky za ním. Jediné věci, které můžou být za externím obsahem, jsou další externí obsah a pozadí okna. Z tohoto důvodu nedoporučujeme nebo zakazujeme transparentnost externího obsahu.
  • Není možné, aby obsah kompozitoru odebíral vzorky z externího obsahu. Například AcrylicBrush nemůže vzorkovat a rozostřit žádné pixely z MediaPlayerElement. AcrylicBrush bude odebírat vzorky z kompozitorova obrazu, který je průhledně černý pro externí obsahové oblasti. Podobně AcrylicBrush před MicaBackdrop nebo DesktopAcrylicBackdrop nevidí žádné barvy, které tato pozadí vykreslí; a místo toho štětec rozmaže průhlednou čerň.
  • Další scénář je znám jako destination invert, který se používá k tomu, aby kurzor ovládacích prvků textového pole invertoval pixely, před kterými se kurzor pro vkládání textu nachází. To invertuje podobně vzorky z povrchu kompozitora a to bude ovlivněno, pokud textové pole nemá neprůhledné pozadí vykreslené kompozitorem.
  • Protože WinUI SwapChainPanel vytváří externí obsah, nepodporuje transparentnost. Nepodporuje ani použití AkrylBrush a dalších efektů, které používají CompositionBackdropBrush před ním.

Ukázky

Projekt Ukázky sady Windows App SDK obsahuje komplexní sadu ukázek složení, které znázorňují, jak používat rozhraní API Microsoft.UI.Composition k vytváření bohatých vizuálních zážitků. Tyto ukázky pokrývají širokou škálu scénářů – od základního rozložení a transformace až po pokročilé efekty, osvětlení, stíny a zpracování vstupu založeného na InteractionTrackeru, jako je posouvání typu pull-to-refresh a parallax scroll. Bez ohledu na to, jestli začínáte s vizuální vrstvou nebo hledáte vzory, které se mají použít ve vaší vlastní aplikaci, jsou tyto ukázky praktickým odkazem na to, jak se vytvářejí stavební bloky.

Prozkoumejte ukázky na GitHubu: WindowsAppSDK-Samples / SceneGraph.

gif aplikace

  • Last updated on