Samenstellingseffecten

Met de API's microsoft.UI.Composition kunnen realtime-effecten worden toegepast op afbeeldingen en gebruikersinterface met eigenschappen van animatie-effecten. In dit overzicht doorlopen we de functionaliteit waarmee u effecten kunt toepassen op een samenstellingsvisual in WinUI- en Windows App SDK-apps.

Ter ondersteuning van consistent ontwerpen van effecten in WinUI- en Windows App SDK-apps maken samenstellingseffecten gebruik van de IGraphicsEffect-interface van Win2D, zodat u effecten kunt beschrijven met behulp van de naamruimte Microsoft.Graphics.Canvas.Effects .

Penseeleffecten worden gebruikt om gebieden van een toepassing te schilderen door effecten toe te passen op een set bestaande afbeeldingen. Api's voor samenstellingseffect van Windows App SDK zijn gericht op SpriteVisuals. Een SpriteVisual biedt u flexibiliteit bij het combineren van kleur, afbeelding en effect. Het visueel element bepaalt de grenzen van de rechthoek en het penseel bepaalt de pixels die gebruikt worden om de rechthoek te schilderen.

Effectborstels worden gebruikt op beelden in de samenstellingsboom waarvan de inhoud afkomstig is van de uitvoer van een effectenschema. Effecten kunnen verwijzen naar bestaande oppervlakken/patronen, maar niet naar de uitvoer van andere samenstellingsstructuren.

Effecten kunnen ook worden toegepast op XAML UIElements met behulp van een effectborstel met XamlCompositionBrushBase.

Effectfuncties

Effectbibliotheek

Momenteel ondersteunt samenstelling de volgende effecten:

Gevolg	Beschrijving
2D-affinetransformatie	Hiermee past u een 2D-affinustransformatiematrix toe op een afbeelding.
Rekenkundige samengestelde	Combineert twee afbeeldingen met behulp van een flexibele vergelijking.
Mengmodus	Hiermee maakt u een blend-effect waarin twee afbeeldingen worden gecombineerd. Samenstelling biedt 21 van de 26 blendmodi die worden ondersteund in Win2D.
Kleurbron	Hiermee wordt een afbeelding met een effen kleur gegenereerd.
Composiet	Combineert twee afbeeldingen. Samenstelling biedt alle 13 samengestelde modi die worden ondersteund in Win2D.
Tegenstelling	Hiermee wordt het contrast van een afbeelding vergroot of verkleind.
Blootstelling	Verhoogt of verlaagt de blootstelling van een afbeelding.
Grijswaarden	Converteert een afbeelding naar monochromatisch grijs.
Gamma-overdracht	Hiermee wijzigt u de kleuren van een afbeelding door een gammaoverdrachtsfunctie per kanaal toe te passen.
Hue draaien	Hiermee wijzigt u de kleur van een afbeelding door de tintwaarden te draaien.
Omkeren	Hiermee worden de kleuren van een afbeelding omgekeerd.
Verzadigen	Hiermee wijzigt u de verzadiging van een afbeelding.
Sepia	Converteert een afbeelding naar sepia-tonen.
Temperatuur en tint	Hiermee past u de temperatuur en/of tint van een afbeelding aan.

Zie De naamruimte Microsoft.Graphics.Canvas.Effects van Win2D voor meer informatie. Effecten die niet worden ondersteund binnen de compositie worden genoteerd als [NoComposition].

Keteneffecten

Effecten kunnen worden gekoppeld, zodat een toepassing tegelijkertijd meerdere effecten op een afbeelding kan gebruiken. Effectgrafieken kunnen meerdere effecten ondersteunen die naar een of andere effecten kunnen verwijzen. Wanneer u uw effect beschrijft, voegt u gewoon een effect toe als invoer aan uw effect.

IGraphicsEffect graphicsEffect =
new Microsoft.Graphics.Canvas.Effects.ArithmeticCompositeEffect
{
  Source1 = new CompositionEffectSourceParameter("source1"),
  Source2 = new SaturationEffect
  {
    Saturation = 0,
    Source = new CompositionEffectSourceParameter("source2")
  },
  MultiplyAmount = 0,
  Source1Amount = 0.5f,
  Source2Amount = 0.5f,
  Offset = 0
}

In het bovenstaande voorbeeld wordt een rekenkundig samengesteld effect beschreven met twee invoerwaarden. De tweede invoer heeft een verzadigingseffect met een verzadigingswaarde van 0,5.

Ondersteuning voor animaties

Effecteigenschappen ondersteunen animatie, tijdens het compileren van effecten kunt u effecteigenschappen opgeven die kunnen worden geanimeerd en die als constanten kunnen worden 'ingebakken'. De animateerbare eigenschappen worden opgegeven via tekenreeksen in de vorm van 'effect name.property name'. Deze eigenschappen kunnen onafhankelijk van elkaar worden geanimeerd over meerdere instantiëringen van het effect.

Eigenschappen van constant versus geanimeerd effect

Tijdens het compileren van effecten kunt u effecteigenschappen opgeven als dynamisch of als eigenschappen die als constanten worden 'ingebakken'. De dynamische eigenschappen worden opgegeven via tekenreeksen van de formulier '<effectnaam>'.<eigenschapsnaam>". De dynamische eigenschappen kunnen worden ingesteld op een specifieke waarde of kunnen worden geanimeerd met behulp van het samenstellingsanimatiesysteem.

Bij het opstellen van de bovenstaande effectbeschrijving hebt u de flexibiliteit om een vaste verzadiging van 0,5 te integreren, of het dynamisch te maken door het dynamisch in te stellen of te animeren.

Een effect compileren met geïntegreerde verzadiging:

var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);

Met dynamische verzadiging een effect compileren:

var effectFactory = _compositor.CreateEffectFactory(graphicsEffect, new[]{"SaturationEffect.Saturation"});
_catEffect = effectFactory.CreateBrush();
_catEffect.SetSourceParameter("mySource", surfaceBrush);
_catEffect.Properties.InsertScalar("saturationEffect.Saturation", 0f);

De verzadigingseigenschap van het bovenstaande effect kan vervolgens worden ingesteld op een statische waarde of animatie met behulp van Expressie- of ScalarKeyFrame-animaties.

U kunt een ScalarKeyFrame maken dat wordt gebruikt om de verzadigingseigenschap van een effect als volgt te animeren:

ScalarKeyFrameAnimation effectAnimation = _compositor.CreateScalarKeyFrameAnimation();
            effectAnimation.InsertKeyFrame(0f, 0f);
            effectAnimation.InsertKeyFrame(0.50f, 1f);
            effectAnimation.InsertKeyFrame(1.0f, 0f);
            effectAnimation.Duration = TimeSpan.FromMilliseconds(2500);
            effectAnimation.IterationBehavior = AnimationIterationBehavior.Forever;

Begin de animatie op de Verzadiging-eigenschap van het effect als volgt:

catEffect.Properties.StartAnimation("saturationEffect.Saturation", effectAnimation);

Meerdere effectinstanties met onafhankelijke eigenschappen

Door op te geven dat een parameter dynamisch moet zijn tijdens het compileren van effecten, kan de parameter vervolgens worden gewijzigd per effectexemplaren. Hierdoor kunnen twee visuals hetzelfde effect gebruiken, maar worden weergegeven met verschillende effecteigenschappen.

Aan de slag met samenstellingseffecten

Deze snelle startgids laat zien hoe u enkele van de basismogelijkheden van effecten kunt gebruiken.

Visual Studio installeren

Als u geen ondersteunde versie van Visual Studio hebt geïnstalleerd, gaat u hier naar de pagina Downloads van Visual Studio.

Een nieuw project maken

Ga naar Bestand>Nieuw>Project.
Selecteer de sjabloon Blank App, Packaged (WinUI 3 in Desktop) of kies Blank App, Unpackaged (WinUI 3 in Desktop) als dat beter overeenkomt met uw app-model.
Voer een projectnaam in van uw keuze.
Klik op Create.

Win2D installeren

Win2D wordt uitgebracht als een NuGet.org pakket en moet worden geïnstalleerd voordat u deze effecten in een WinUI-project kunt gebruiken.

Start de NuGet Package Manager door naar Tools>NuGet Package Manager> for Solution te gaan.
Zoek naar Win2D.WinUI en installeer dat pakket voor uw project.
Accepteer de gebruiksrechtovereenkomst.
Klik op sluiten.

In de volgende stappen gebruiken we samenstellings-API's om een verzadigingseffect toe te passen op deze cat-afbeelding, waardoor alle verzadiging wordt verwijderd. In dit model wordt het effect gemaakt en vervolgens toegepast op een afbeelding.

Bronafbeelding

Instellen van basisprincipes van compositie

_compositor = ElementCompositionPreview.GetElementVisual(MyHost).Compositor;
_root = _compositor.CreateContainerVisual();
ElementCompositionPreview.SetElementChildVisual(MyHost, _root);

Een CompositionSurface-borstel creëren

CompositionSurfaceBrush surfaceBrush = _compositor.CreateSurfaceBrush();
LoadedImageSurface imageSurface = LoadedImageSurface.StartLoadFromUri(new Uri("ms-appx:///Assets/cat.png"));
surfaceBrush.Surface = imageSurface;

Effecten maken, compileren en toepassen

Maak het grafische effect.

var graphicsEffect = new SaturationEffect
{
    Saturation = 0.0f,
    Source = new CompositionEffectSourceParameter("mySource")
};

Compileer het effect en maak het effectpenseel.

var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);

var catEffect = effectFactory.CreateBrush();
catEffect.SetSourceParameter("mySource", surfaceBrush);

Creëer een SpriteVisual in de compositiestructuur en pas het effect toe.

var catVisual = _compositor.CreateSpriteVisual();
catVisual.Brush = catEffect;
catVisual.Size = new Vector2(219, 300);
_root.Children.InsertAtBottom(catVisual);

Voer uw app uit. Uw resultaten moeten een gedesatureerde kat zijn:

Afbeelding met verzadiging

Meer informatie

Feedback

Is deze pagina nuttig?

Last updated on 2026-03-17