Delen via

De visuallaag gebruiken in bureaublad-apps

U kunt nu Windows Runtime-API's gebruiken in niet-UWP-bureaubladtoepassingen 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 visuele laag biedt een API met hoge prestaties, een retained-mode 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.

Een 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 visuele laag gebruiken om uw toepassing een uniek uiterlijk te geven en een identiteit te creëren die 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 dat is gemaakt met de Material Creator-demo-app.

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 materialen gedemonstreerd in de Windows UI Composition voorbeeldgalerij.

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 de bekende KeyFrame-animaties voor het veranderen van eigenschappen in de loop van de tijd, kunt u expressies gebruiken om wiskundige relaties tussen verschillende eigenschappen op te zetten, 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 voorbeeldgalerie Windows UI Composition.

Houd uw bestaande codebasis en gebruik incrementeel

De code in uw bestaande toepassingen vertegenwoordigt een aanzienlijke investering die u niet wilt verliezen. U kunt eilanden van inhoud migreren om gebruik te maken van de visuele laag en de rest van de gebruikersinterface in de bestaande gebruikersomgeving 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 (Windows Presentation Foundation)

Beperkingen

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 broncode.
  • Voor het uitvoeren van hit-testing moet je grensberekeningen maken door zelf door de visuele boom te lopen. 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 visuele laag heeft geen primaire functie voor het weergeven 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 luchtruim probleem.) Mogelijk moet u extra coderen en testen om ervoor te zorgen dat de grootte van de inhoud van de visuele laag wordt aangepast aan de hostgebruikersinterface en geen andere inhoud blokkeert.
  • 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 informatiebronnen

API-referentie

  • Last updated on