De visuallaag gebruiken in bureaublad-apps

U kunt nu Windows Runtime API's in niet-UWP-bureaubladtoepassingen gebruiken om het uiterlijk en de functionaliteit van uw WPF-, Windows Forms- en C++ Win32-toepassingen te verbeteren en te profiteren van de nieuwste Windows UI-functies die alleen beschikbaar zijn via UWP.

Voor veel scenario's kunt u XAML-eilanden gebruiken om moderne XAML-besturingselementen aan uw app toe te voegen. Wanneer u echter aangepaste ervaringen wilt maken die verder gaan dan de ingebouwde besturingselementen, hebt u toegang tot de API's van de visuallaag.

De visuallaag biedt een API met hoge prestaties, behoudmodus voor afbeeldingen, effecten en animaties. Het is de basis voor de gebruikersinterface op Windows apparaten. UWP XAML-besturingselementen zijn gebouwd op de visuallaag en maakt veel aspecten van het Fluent Design-systeem mogelijk, zoals Licht, Diepte, Beweging, Materiaal en Schaal.

Korte video met een gebruikersinterface die is gemaakt met de visuele laag.

Gebruikersinterface gemaakt met de visuele laag

Een visueel aantrekkelijke gebruikersinterface maken in elke Windows-app

Met de visuallaag kunt u aantrekkelijke ervaringen maken met behulp van lichtgewicht compositing van aangepaste getekende inhoud (visuals) en het toepassen van krachtige animaties, effecten en manipulaties op deze objecten in uw toepassing. De visuallaag vervangt geen bestaand UI-framework; In plaats daarvan is het een waardevolle aanvulling op die frameworks.

U kunt de Visual-laag gebruiken om uw toepassing een unieke look and feel te geven en een identiteit tot stand te brengen waarmee deze zich onderscheidt van andere toepassingen. Het maakt ook Fluent Design-principes mogelijk, die zijn ontworpen om uw toepassingen gebruiksvriendelijker te maken en meer betrokkenheid van gebruikers te trekken. U kunt deze bijvoorbeeld gebruiken om visuele aanwijzingen en schermovergangen met animatie te maken die relaties tussen items op het scherm weergeven.

Visuele laagfuncties

Borstels

Met samenstellingsborstels kunt u UI-objecten schilderen met effen kleuren, kleurovergangen, afbeeldingen, video's, complexe effecten en meer.

Een ei gemaakt met Materiaalmaker

Een ei gemaakt met de demo-app Materiaalmaker.

Effecten

Samenstellingseffecten zijn licht, schaduw en een lijst met filtereffecten. Ze kunnen worden geanimeerd, aangepast en gekoppeld en vervolgens rechtstreeks op visuals worden toegepast. De SceneLightingEffect kan worden gecombineerd met compositieverlichting om sfeer, diepte en materialen te creëren.

Lichten en materiaal

Lichten en materiaal getoond in de voorbeeldgalerie Windows UI Composition.

Animaties

Samenstellingsanimaties worden rechtstreeks uitgevoerd in het compositor-proces, onafhankelijk van de UI-thread. Dit zorgt voor vloeiendheid en schaal, zodat u grote aantallen gelijktijdige, expliciete animaties kunt uitvoeren. Naast bekende KeyFrame-animaties voor het uitvoeren van eigenschapsveranderingen in de loop van de tijd, kunt u expressies gebruiken om wiskundige relaties tussen verschillende eigenschappen in te stellen, inclusief gebruikersinvoer. Met invoergestuurde animaties kunt u een gebruikersinterface maken die dynamisch en vloeiend reageert op gebruikersinvoer, wat kan leiden tot een hogere gebruikersbetrokkenheid.

Korte video van een andere gebruikersinterface die is gemaakt met de visuele laag.

Motion gedemonstreerd in de Windows UI Composition voorbeeldgalerie.

Houd uw bestaande codebasis en gebruik incrementeel

De code in uw bestaande toepassingen vertegenwoordigt een aanzienlijke investering die u niet wilt verliezen. U kunt inhoudseilanden migreren om de visuele laag toe te passen en de rest van de 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.

Voorbeelden en zelfstudies

Leer hoe u de visuallaag in uw toepassingen gebruikt door te experimenteren met onze voorbeelden. Deze voorbeelden en zelfstudies helpen u aan de slag te gaan met de visuallaag en u te laten zien hoe functies werken.

Win32

Windows Forms

WPF

Limitations

Hoewel veel visual layer-functies hetzelfde werken wanneer ze worden gehost in een bureaubladtoepassing als in een UWP-app, hebben sommige functies beperkingen. Hier volgen enkele beperkingen om rekening mee te houden:

  • Effectketens zijn afhankelijk van Win2D voor de effectbeschrijvingen. Het Win2D NuGet-pakket wordt niet ondersteund in bureaubladtoepassingen, dus u moet het opnieuw compileren vanuit de sourcecode.
  • Voor hit testing moet u grenzen berekenen door zelf de visuele boom te doorlopen. Dit is hetzelfde als de visuallaag in UWP, behalve in dit geval is er geen XAML-element waaraan u eenvoudig kunt binden voor hittests.
  • De Visual Layer heeft geen primitief voor het renderen van tekst.
  • Wanneer twee verschillende UI-technologieën samen worden gebruikt, zoals WPF en de visuallaag, zijn ze verantwoordelijk voor het tekenen van hun eigen pixels op het scherm en kunnen ze geen pixels delen. Als gevolg hiervan wordt visual layer-inhoud altijd weergegeven boven op andere ui-inhoud. (Dit staat bekend als het luchtruimprobleem.) Mogelijk moet u extra coderen en testen om ervoor te zorgen dat de grootte van de inhoud van de Visual-laag wordt aangepast aan de host-UI en niet andere inhoud verduistert.
  • Inhoud die wordt gehost in een bureaubladtoepassing, wordt niet automatisch aangepast of geschaald voor DPI. Er zijn mogelijk extra stappen vereist om ervoor te zorgen dat uw inhoud DPI-wijzigingen verwerkt. (Zie de platformspecifieke zelfstudies voor meer informatie.)

Aanvullende bronnen

API-referentie

  • Last updated on