Effets de composition

Les API Microsoft.UI.Composition permettent d’appliquer des effets en temps réel aux images et à l’interface utilisateur avec des propriétés d’effet animatables. Dans cette vue d’ensemble, nous allons découvrir les fonctionnalités qui vous permettent d’appliquer des effets à un visuel de composition dans les applications WinUI et Windows App SDK.

Pour prendre en charge la création d’effets cohérents dans les applications WinUI et windows App SDK, les effets de composition tirent parti de l’interface IGraphicsEffect de Win2D pour vous permettre de décrire les effets à l’aide de l’espace de noms Microsoft.Graphics.Canvas.Effects .

Les effets de pinceau sont utilisés pour peindre des zones d’une application en appliquant des effets à un ensemble d’images existantes. Les API d’effet de composition du Kit de développement logiciel (SDK) d’application Windows se concentrent sur SpriteVisuals. Un SpriteVisual vous offre une flexibilité lors de la combinaison de la couleur, de l’image et de la création d’effets. Le visuel définit les limites du rectangle, et le pinceau définit les pixels utilisés pour le peindre.

Les pinceaux d’effet sont utilisés sur les visuels de l’arborescence de composition dont le contenu provient de la sortie d’un graphique d’effets. Les effets peuvent faire référence à des surfaces/textures existantes, mais pas au résultat d'autres arbres de composition.

Les effets peuvent également être appliqués aux uiElements XAML à l’aide d’un pinceau d’effet avec XamlCompositionBrushBase.

Fonctionnalités d’effet

Bibliothèque d’effets

Actuellement, la composition prend en charge les effets suivants :

Résultat	Description
Transformation affine 2D	Applique une matrice de transformation affine 2D à une image.
Composite arithmétique	Combine deux images à l’aide d’une équation flexible.
Effet de fusion	Crée un effet de fusion qui combine deux images. La composition fournit 21 des 26 modes de fusion pris en charge dans Win2D.
Source de couleur	Génère une image contenant une couleur unie.
Matériau composite	Combine deux images. La composition fournit les 13 modes composites disponibles, tous pris en charge dans Win2D.
Contraste	Augmente ou diminue le contraste d’une image.
Exposition	Augmente ou diminue l’exposition d’une image.
Grayscale (Nuances de gris)	Convertit une image en gris monochromatique.
Transfert gamma	Modifie les couleurs d’une image en appliquant une fonction de transfert gamma par canal.
Rotation de teinte	Modifie la couleur d’une image en faisant pivoter ses valeurs de teinte.
Inverser	Inverse les couleurs d’une image.
Saturer	Modifie la saturation d’une image.
Sépia	Convertit une image en tonalités sépia.
Température et teinte	Ajuste la température et/ou la teinte d’une image.

Consultez l'espace de noms Microsoft.Graphics.Canvas.Effects de Win2D pour plus d’informations détaillées. Les effets non pris en charge dans la composition sont notés comme [NoComposition].

Effets de chaînage

Les effets peuvent être chaînés, ce qui permet à une application d’utiliser simultanément plusieurs effets sur une image. Les graphiques d’effet peuvent prendre en charge plusieurs effets qui peuvent faire référence à l’un et à l’autre. Lorsque vous décrivez votre effet, ajoutez simplement un effet comme entrée à votre effet.

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
}

L’exemple ci-dessus décrit un effet composite arithmétique qui a deux entrées. La deuxième entrée a un effet de saturation avec une propriété de saturation de 0,5.

Prise en charge des animations

Les propriétés d’effet prennent en charge l’animation, pendant la compilation des effets, vous pouvez spécifier des propriétés d’effet animées et qui peuvent être « intégrées » en tant que constantes. Les propriétés animatables sont spécifiées par le biais de chaînes de la forme « effect name.property name ». Ces propriétés peuvent être animées indépendamment sur plusieurs instanciations de l’effet.

Propriétés des effets constants et animés

Pendant la compilation des effets, vous pouvez spécifier des propriétés d’effet en tant que propriétés dynamiques ou en tant que propriétés « intégrées » en tant que constantes. Les propriétés dynamiques sont spécifiées par le biais de chaînes de la forme «< nom> d’effet ».<nom> de propriété ». Les propriétés dynamiques peuvent être définies sur une valeur spécifique ou animées à l’aide du système d’animation de composition.

Lors de la compilation de la description de l’effet ci-dessus, vous avez la flexibilité d'intégrer la saturation pour qu'elle soit égale à 0,5, ou bien de la rendre dynamique en la définissant dynamiquement ou en l'animant.

Compilation d’un effet avec saturation intégrée.

var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);

Compilation d’un effet avec saturation dynamique :

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

La propriété de saturation de l’effet ci-dessus peut ensuite être définie sur une valeur statique ou animée à l’aide d’animations Expression ou ScalarKeyFrame.

Vous pouvez créer un ScalarKeyFrame qui sera utilisé pour animer la propriété Saturation d’un effet comme suit :

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;

Démarrez l’animation sur la propriété de saturation de l’effet comme suit :

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

Instances d’effet multiples avec des propriétés indépendantes

En spécifiant qu’un paramètre doit être dynamique pendant la compilation des effets, le paramètre peut ensuite être modifié sur une base d’instance par effet. Cela permet à deux visuels d’utiliser le même effet, mais d’être restitués avec des propriétés d’effet différentes.

Prise en main des effets de composition

Ce didacticiel de démarrage rapide vous montre comment utiliser certaines des fonctionnalités de base des effets.

Installation de Visual Studio

Si vous n’avez pas de version prise en charge de Visual Studio installée, accédez à la page Téléchargements de Visual Studio ici.

Création d’un projet

Accédez à Fichier>Nouveau>Projet.
Sélectionnez le modèle Application vide, Empaquetée (WinUI 3 dans Desktop) ou choisissez Application vide, Non empaquetée (WinUI 3 dans Desktop) si cela correspond mieux à votre modèle d’application.
Entrez un nom de projet de votre choix.
Cliquez sur Créer.

Installation de Win2D

Win2D est publié en tant que package NuGet.org et doit être installé avant de pouvoir utiliser ces effets dans un projet WinUI.

Lancez le Gestionnaire de package NuGet en accédant à Tools>NuGet Package Manager>Manage NuGet Packages for Solution.
Recherchez Win2D.WinUI et installez ce package pour votre projet.
Acceptez le contrat de licence.
Cliquez sur Fermer.

Dans les prochaines étapes, nous allons utiliser les API de composition pour appliquer un effet de saturation à cette image de chat qui supprimera toute saturation. Dans ce modèle, l’effet est créé, puis appliqué à une image.

Source image

Définition de vos principes de base de la composition

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

Création d’un pinceau CompositionSurface

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

Création, compilation et application d’effets

Créez l’effet graphique.

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

Compilez l’effet et créez le pinceau d’effet.

var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);

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

Créez un SpriteVisual dans l’arborescence de composition et appliquez l’effet.

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

Exécutez votre application. Vos résultats doivent être un chat désaturé :

Image désaturée

Plus d’informations

Commentaires

Cette page a-t-elle été utile ?

Last updated on 2026-03-17