Delen via

Overzicht van visuele laag

De visuallaag biedt een krachtige, bewaarde-modus-API voor afbeeldingen, effecten en animaties en vormt de basis voor alle gebruikersinterfaces op Windows-apparaten. U definieert uw gebruikersinterface op een declaratieve manier en de visuallaag is afhankelijk van hardwareversnelling voor afbeeldingen om ervoor te zorgen dat uw inhoud, effecten en animaties op een vloeiende, probleemloze manier worden weergegeven, onafhankelijk van de UI-thread van de app.

De typen in Microsoft.UI.Composition vormen de Windows App SDK/WinUI 3-implementatie van de visuallaag.

Belangrijke hoogtepunten:

  • Bekende WinRT-API's
  • Ontworpen voor dynamischere gebruikersinterface en interacties
  • Concepten die zijn afgestemd op ontwerphulpprogramma's
  • Lineaire schaalbaarheid zonder plotselinge prestatiekliffen

Uw WinUI- en Windows App SDK-apps maken al gebruik van de visuallaag via een van de UI-frameworks. U kunt ook rechtstreeks profiteren van de visuallaag voor aangepaste rendering, effecten en animaties met weinig inspanning.

UI-frameworklagen: de frameworklaag (Microsoft.UI.Xaml) is gebouwd op de visuele laag (Microsoft.UI.Composition) die is gebouwd op de grafische laag (DirectX)

Wat bevindt zich in de visuallaag?

De primaire functies van de laag Visual zijn:

  1. Inhoud: Lichtgewicht samenstelling van zelf getekende inhoud
  2. Effecten: Realtime UI-effecten systeem waarvan de effecten kunnen worden geanimeerd, gekoppeld en aangepast
  3. Animaties: Expressieve, framework-agnostische animaties die onafhankelijk van de UI-thread worden uitgevoerd

Content

Inhoud wordt gehost, getransformeerd en beschikbaar gemaakt voor gebruik door het animatie- en effectensysteem met behulp van visuals. Aan de basis van de klassehiërarchie bevindt zich de Visual-klasse, een lichtgewicht, draadflexibele proxy binnen het applicatieproces voor de visuele toestand in de compositor. Subklassen van Visual bevatten ContainerVisual , zodat kinderen bomen van visuals en SpriteVisual kunnen maken die inhoud bevatten en kunnen worden geschilderd met effen kleuren, aangepaste getekende inhoud of visuele effecten. Samen vormen deze visualtypen de visuele structuur voor de 2D-gebruikersinterface en de meest zichtbare XAML FrameworkElements.

Zie het overzicht Samenstelling Visueel voor meer informatie.

Effecten

Met het effectensysteem in de Visuele laag kunt u een keten van filter- en doorzichtigheidseffecten toepassen op een Visual of een boom van Visuals. Dit is een systeem voor ui-effecten, niet te verwarren met afbeeldings- en media-effecten. Effecten werken in combinatie met het animatiesysteem, zodat gebruikers vloeiende en dynamische animaties van effecteigenschappen kunnen bereiken, die onafhankelijk van de UI-thread worden weergegeven. Effecten in de visuallaag bieden de creatieve bouwstenen die kunnen worden gecombineerd en geanimeerd om op maat gemaakte en interactieve ervaringen te maken.

Naast animatieketens ondersteunt de Visual Layer ook een verlichtingsmodel waarmee visuals materiaaleigenschappen kunnen nabootsen door te reageren op animatielampjes. Afbeeldingen kunnen ook schaduwen werpen. Verlichting en schaduwen kunnen worden gecombineerd om een beeld van diepte en realisme te creëren.

Zie het overzicht samenstellingseffecten voor meer informatie.

Animaties

In de Visuele laag kunt u met het animatiesysteem visuals, animatie-effecten, transformaties, clips en andere eigenschappen verplaatsen en animeren. Het is een frameworkagnostisch systeem dat vanaf de basis is ontworpen met de prestaties in het achterhoofd. Het wordt onafhankelijk van de UI-thread uitgevoerd om de soepelheid en schaalbaarheid te garanderen. Hoewel u hiermee vertrouwde KeyFrame-animaties kunt gebruiken om wijzigingen in eigenschappen in de loop van de tijd te stimuleren, kunt u ook wiskundige relaties tussen verschillende eigenschappen instellen, inclusief gebruikersinvoer, zodat u rechtstreeks naadloze gechoreografeerde ervaringen kunt maken.

Voor meer informatie, zie het overzicht van samenstellingsanimaties.

Werken met WinUI XAML

U kunt toegang krijgen tot een Visual gemaakt door het XAML-framework, en een zichtbaar FrameworkElement ondersteunen, met behulp van de ElementCompositionPreview klasse in Microsoft.UI.Xaml.Hosting. Houd er rekening mee dat visuals die door het framework voor u zijn gemaakt, worden geleverd met enkele beperkingen voor aanpassing. Dit komt doordat het framework offsets, transformaties en levensduur beheert. U kunt wel uw eigen visuals maken en deze koppelen aan een bestaand WinUI-element via ElementCompositionPreview, of door ze aan een bestaande ContainerVisual op een plek in de visuele boomstructuur toe te voegen.

Zie het overzicht Gebruik van de Visuele laag met XAML voor meer informatie.

Werken met uw bureaublad-app

U kunt de Visual-laag gebruiken om het uiterlijk en de functionaliteit van Win32-bureaublad-apps te verbeteren die zijn gebouwd met de Windows App SDK, evenals WPF-, Windows Forms- en C++ Win32-bureaublad-apps. U kunt eilanden met inhoud migreren om de visuallaag te gebruiken en de rest van uw gebruikersinterface in het bestaande framework te behouden. Dit betekent dat u belangrijke updates en verbeteringen in de gebruikersinterface van uw toepassing kunt aanbrengen zonder dat u uitgebreide wijzigingen hoeft aan te brengen in uw bestaande codebasis.

Zie Uw bureaublad-app moderniseren met behulp van de visuallaag voor meer informatie.

Verschillen met UWP

De naamruimte Microsoft.UI.Composition biedt toegang tot functionaliteit die bijna identiek is aan de UWP-visuallaag (Windows.UI.Composition), in de meestgebruikte scenario's. Maar er zijn uitzonderingen en verschillen.

Een compositor-exemplaar ophalen

In desktop-apps (een WinUI-app is een bureaublad-app), Window.Current is null. U kunt dus geen exemplaar van Compositor ophalen van Window.Current.Compositor. In WinUI-apps wordt u aangeraden ElementCompositionPreview.GetElementVisual(UIElement) aan te roepen om een samenstellingsvisual op te halen en de eigenschap Compositor van de visual op te halen. In gevallen waarin u geen toegang hebt tot een UIElement (bijvoorbeeld als u een CompositionBrush maakt in een klasbibliotheek), kunt u CompositionTarget.GetCompositorForCurrentThread aanroepen.

Externe inhoud

De compositor Microsoft.UI.Composition wordt volledig binnen een Windows App SDK-app uitgevoerd en heeft alleen toegang tot de pixels die het zelf heeft getekend. Dat betekent dat alle externe inhoud (inhoud die niet door de compositor is getekend) onbekend is bij de compositor, waardoor bepaalde beperkingen ontstaan.

Een voorbeeld van externe inhoud is het MediaPlayerElement (Microsoft.UI.Xaml.Controls). De Windows-mediastack biedt XAML een ondoorzichtige mediawisselketengreep. XAML geeft dat handvat aan de compositor, die het op zijn beurt afgeeft aan Windows (via Windows.UI.Composition) om weer te geven. Omdat de compositor geen pixels in de mediawisselketen kan zien, kan deze dat niet samenvoegen als onderdeel van de algehele rendering voor het venster. In plaats daarvan draagt het de media-uitwisselingsketen over aan Windows, zodat deze onder de rendering van de compositor wordt weergegeven, waarbij een gat in de rendering van de compositor is uitgesneden om de media-uitwisselingsketen zichtbaar te maken.

Diagram van het weergeven van externe inhoud

In de Windows App SDK/WinUI maken de volgende API's allemaal externe inhoud:

Het model voor het verwerken van externe inhoud creëert deze beperkingen:

  • Het is niet mogelijk om compositor-inhoud achter externe inhoud te hebben. Het is bijvoorbeeld niet mogelijk om een WebView2 een transparante achtergrond te geven om XAML-knoppen of afbeeldingen erachter te zien. De enige dingen die zich achter externe inhoud kunnen bevinden, zijn andere externe inhoud en de achtergrond van het venster. Daarom ontmoedigen/uitschakelen we transparantie voor externe inhoud.
  • Het is niet mogelijk om een compositor-inhoudsvoorbeeld te hebben van externe inhoud. AcrylBrush kan bijvoorbeeld geen pixels van een MediaPlayerElement bemonsteren en vervagen. AcrylBrush zal monsters nemen van de compositorafbeelding, die transparant zwart is voor externe inhoudsgebieden. Op dezelfde manier kan AcrylBrush voor een MicaBackdrop of DesktopAcrylicBackdrop geen kleuren zien die door deze achtergronden worden getekend; en in plaats daarvan zal de borstel het transparante zwart vervagen.
  • Een ander scenario staat bekend als doel-omkering, die wordt gebruikt voor de caret van tekstvakbesturingselementen om de pixels te omkeren waarvan de tekstinvoegingsopgave zich voordoet. Dat omkeren neemt op vergelijkbare wijze samples van het compositor-oppervlak en het wordt beïnvloed als het tekstvak geen ondoorzichtige achtergrond heeft die door de compositor is getekend.
  • Omdat winUI SwapChainPanel externe inhoud maakt, biedt deze geen ondersteuning voor transparantie. Het biedt ook geen ondersteuning voor het toepassen van AcrylBrush en andere effecten die een CompositionBackdropBrush ervoor gebruiken.

Voorbeelden

Het project Voorbeelden van Windows App SDK bevat een uitgebreide set samenstellingsvoorbeelden die laten zien hoe u de Microsoft.UI.Composition-API's kunt gebruiken om uitgebreide visuele ervaringen te bouwen. Deze voorbeelden hebben betrekking op een breed scala aan scenario's, van eenvoudige indeling en transformaties tot geavanceerde effecten, belichting, schaduwen en op InteractionTracker gebaseerde invoerafhandeling, zoals pull-to-refresh en parallax scrolling. Of u nu aan de slag gaat met de visuallaag of op zoek bent naar patronen die in uw eigen app moeten worden toegepast, deze voorbeelden zijn een praktische referentie om te zien hoe de bouwstenen samenkomen.

Bekijk de voorbeelden op GitHub: WindowsAppSDK-Samples/SceneGraph.

-app gif

  • Last updated on