Pinceaux de composition

Tout ce qui est visible sur votre écran dans une application WinUI est visible, car il a été peint par un pinceau. Les pinceaux vous permettent de peindre des objets d’interface utilisateur avec du contenu allant de couleurs solides simples aux images, dessins et chaînes d’effets complexes. Cette rubrique présente les concepts de la peinture avec CompositionBrush.

Lorsque vous utilisez une application WinUI XAML, vous pouvez choisir de peindre un UIElement avec un XAML brush ou un CompositionBrush. En règle générale, il est plus facile de choisir un pinceau XAML si votre scénario est déjà pris en charge par un. Par exemple, animation de la couleur d’un bouton ou modification du remplissage du texte ou d’une forme avec une image. Si vous avez besoin de quelque chose qui n’est pas pris en charge par un pinceau XAML, tel qu’un masque animé, un étirement animé en neuf grilles ou une chaîne d’effets, vous pouvez utiliser un CompositionBrush pour peindre un UIElement via XamlCompositionBrushBase.

Lorsque vous utilisez la couche de visualisation, un CompositionBrush doit être utilisé pour peindre la zone d’un SpriteVisual.

• Conditions préalables
• Peindre avec CompositionBrush
  • Peindre avec une couleur unie
  • Peindre avec un dégradé linéaire
  • Peindre avec un dégradé radial
  • Peindre avec une image
  • Peindre avec un dessin personnalisé
  • Peindre avec une vidéo
  • Peindre avec un effet de filtre
  • Peignez avec un CompositionBrush avec un masque d’opacité
  • Peindre avec un CompositionBrush à l’aide de NineGrid stretch
  • Peindre à l’aide de pixels d’arrière-plan
• Combinaison de pinceaux de composition
• Utilisation d'un pinceau XAML ou d'un pinceau de composition
• Rubriques connexes

Prerequisites

Cette vue d’ensemble suppose que vous êtes familiarisé avec la structure d’une application composition de base, comme décrit dans la vue d’ensemble de la couche Visuelle.

Peindre avec un CompositionBrush

Une CompositionBrush « peint » une zone avec son résultat. Différents pinceaux ont différents types de sortie. Certains pinceaux peintnt une zone avec une couleur unie, d’autres avec un dégradé, une image, un dessin personnalisé ou un effet. Il existe également des pinceaux spécialisés qui modifient le comportement d’autres pinceaux. Par exemple, le masque d’opacité peut être utilisé pour contrôler la zone peinte par un CompositionBrush, ou une grille 3x3 peut être utilisée pour contrôler l’étirement appliqué à un CompositionBrush lors de la peinture d’une zone. CompositionBrush peut être de l’un des types suivants :

Peindre avec une couleur unie

Un CompositionColorBrush peint une zone avec une couleur unie. Il existe différentes façons de spécifier la couleur d’un SolidColorBrush. Par exemple, vous pouvez spécifier ses canaux alpha, rouge, bleu et vert (ARGB) ou utiliser l’une des couleurs prédéfinies fournies par la classe Colors .

L’illustration et le code suivants montrent une petite arborescence visuelle pour créer un rectangle qui est tracé avec un pinceau de couleur noir et peint avec un pinceau de couleur unie qui a la valeur de couleur de 0x9ACD32.

Compositor _compositor;
ContainerVisual _container;
SpriteVisual _colorVisual1, _colorVisual2;
CompositionColorBrush _blackBrush, _greenBrush;

_compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;
_container = _compositor.CreateContainerVisual();

_blackBrush = _compositor.CreateColorBrush(Colors.Black);
_colorVisual1 = _compositor.CreateSpriteVisual();
_colorVisual1.Brush = _blackBrush;
_colorVisual1.Size = new Vector2(156, 156);
_colorVisual1.Offset = new Vector3(0, 0, 0);
_container.Children.InsertAtBottom(_colorVisual1);

_greenBrush = _compositor.CreateColorBrush(Color.FromArgb(0xff, 0x9A, 0xCD, 0x32));
_colorVisual2 = _compositor.CreateSpriteVisual();
_colorVisual2.Brush = _greenBrush;
_colorVisual2.Size = new Vector2(150, 150);
_colorVisual2.Offset = new Vector3(3, 3, 0);
_container.Children.InsertAtBottom(_colorVisual2);

Peindre avec un dégradé linéaire

Un CompositionLinearGradientBrush peint une zone avec un dégradé linéaire. Un dégradé linéaire fusionne deux couleurs ou plus sur une ligne, l’axe du dégradé. Vous utilisez des objets GradientStop pour spécifier les couleurs dans le dégradé et leurs positions.

L’illustration et le code suivants montrent un SpriteVisual peint avec un LinearGradientBrush comportant deux points d’arrêt utilisant les couleurs rouge et jaune.

Compositor _compositor;
SpriteVisual _gradientVisual;
CompositionLinearGradientBrush _redyellowBrush;

_compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;

_redyellowBrush = _compositor.CreateLinearGradientBrush();
_redyellowBrush.ColorStops.Add(_compositor.CreateColorGradientStop(0, Colors.Red));
_redyellowBrush.ColorStops.Add(_compositor.CreateColorGradientStop(1, Colors.Yellow));
_gradientVisual = _compositor.CreateSpriteVisual();
_gradientVisual.Brush = _redyellowBrush;
_gradientVisual.Size = new Vector2(156, 156);

Peindre avec un dégradé radial

Un CompositionRadialGradientBrush peint une zone avec un dégradé radial. Un dégradé radial fusionne deux couleurs ou plus, le dégradé débutant au centre de l'ellipse et se terminant au rayon de l’ellipse. Les objets GradientStop sont utilisés pour définir les couleurs et leur emplacement dans le dégradé.

L’illustration et le code suivants montrent un SpriteVisual peint avec un RadialGradientBrush avec 2 gradientStops.

Compositor _compositor;
SpriteVisual _gradientVisual;
CompositionRadialGradientBrush RGBrush;

_compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;

RGBrush = _compositor.CreateRadialGradientBrush();
RGBrush.ColorStops.Add(_compositor.CreateColorGradientStop(0, Colors.Aquamarine));
RGBrush.ColorStops.Add(_compositor.CreateColorGradientStop(1, Colors.DeepPink));
_gradientVisual = _compositor.CreateSpriteVisual();
_gradientVisual.Brush = RGBrush;
_gradientVisual.Size = new Vector2(200, 200);

Peindre avec une image

Un CompositionSurfaceBrush peint une zone avec des pixels rendus sur un ICompositionSurface. Par exemple, un CompositionSurfaceBrush peut être utilisé pour peindre une zone avec une image qui est rendue sur un ICompositionSurface à l’aide de l’API LoadedImageSurface.

L’illustration et le code suivants montrent un SpriteVisual peint avec une bitmap d’un licorice rendu sur une ICompositionSurface à l’aide de LoadedImageSurface. Les propriétés de CompositionSurfaceBrush peuvent être utilisées pour étirer et aligner la bitmap dans les limites du visuel.

Compositor _compositor;
SpriteVisual _imageVisual;
CompositionSurfaceBrush _imageBrush;

_compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;

_imageBrush = _compositor.CreateSurfaceBrush();

// The loadedSurface has a size of 0x0 till the image has been downloaded, decoded and loaded to the surface. We can assign the surface to the CompositionSurfaceBrush and it will show up once the image is loaded to the surface.
LoadedImageSurface _loadedSurface = LoadedImageSurface.StartLoadFromUri(new Uri("ms-appx:///Assets/licorice.jpg"));
_imageBrush.Surface = _loadedSurface;

_imageVisual = _compositor.CreateSpriteVisual();
_imageVisual.Brush = _imageBrush;
_imageVisual.Size = new Vector2(156, 156);

Peindre avec un dessin personnalisé

Un CompositionSurfaceBrush peut également être utilisé pour peindre une zone avec des pixels d’un ICompositionSurface rendu à l’aide de Win2D (ou D2D).

Le code suivant montre un SpriteVisual peint avec un texte en cours d'exécution, rendu sur un ICompositionSurface à l'aide de Win2D. Pour utiliser Win2D avec WinUI, installez le package NuGet Microsoft.Graphics.Win2D dans votre projet.

Compositor _compositor;
CanvasDevice _device;
CompositionGraphicsDevice _compositionGraphicsDevice;
SpriteVisual _drawingVisual;
CompositionSurfaceBrush _drawingBrush;

_compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;
_device = CanvasDevice.GetSharedDevice();
_compositionGraphicsDevice = CanvasComposition.CreateCompositionGraphicsDevice(_compositor, _device);

_drawingBrush = _compositor.CreateSurfaceBrush();
CompositionDrawingSurface _drawingSurface = _compositionGraphicsDevice.CreateDrawingSurface(
    new Size(256, 256),
    DirectXPixelFormat.B8G8R8A8UIntNormalized,
    DirectXAlphaMode.Premultiplied);

using (var ds = CanvasComposition.CreateDrawingSession(_drawingSurface))
{
    ds.Clear(Colors.Transparent);
    var rect = new Rect(new Point(2, 2), (_drawingSurface.Size.ToVector2() - new Vector2(4, 4)).ToSize());
    ds.FillRoundedRectangle(rect, 15, 15, Colors.LightBlue);
    ds.DrawRoundedRectangle(rect, 15, 15, Colors.Gray, 2);
    ds.DrawText("This is a composition drawing surface", rect, Colors.Black, new CanvasTextFormat()
    {
        FontFamily = "Comic Sans MS",
        FontSize = 32,
        WordWrapping = CanvasWordWrapping.WholeWord,
        VerticalAlignment = CanvasVerticalAlignment.Center,
        HorizontalAlignment = CanvasHorizontalAlignment.Center
    });
}

_drawingBrush.Surface = _drawingSurface;

_drawingVisual = _compositor.CreateSpriteVisual();
_drawingVisual.Brush = _drawingBrush;
_drawingVisual.Size = new Vector2(156, 156);

De même, la CompositionSurfaceBrush peut également être utilisée pour peindre un SpriteVisual avec un SwapChain à l’aide de l’interopérabilité Win2D. Cet exemple fournit un exemple d’utilisation de Win2D pour peindre un SpriteVisual avec une chaîne d’échange.

Peindre avec une vidéo

Un CompositionSurfaceBrush peut également être utilisé pour peindre une zone avec des pixels d’une ICompositionSurface rendue à l’aide d’une vidéo chargée via la classe MediaPlayer .

Le code suivant montre un SpriteVisual visualisé avec une vidéo chargée sur un ICompositionSurface.

Compositor _compositor;
SpriteVisual _videoVisual;
CompositionSurfaceBrush _videoBrush;

_compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;

// MediaPlayer setup with a source URI.
_mediaPlayer = new MediaPlayer();

// Get a source from a URI. This could also come from a file or a stream.
var source = MediaSource.CreateFromUri(new Uri("https://go.microsoft.com/fwlink/?LinkID=809007&clcid=0x409"));
var item = new MediaPlaybackItem(source);
_mediaPlayer.Source = item;
_mediaPlayer.IsLoopingEnabled = true;

// Get the surface from MediaPlayer and put it on a brush.
_videoSurface = _mediaPlayer.GetSurface(_compositor);
_videoBrush = _compositor.CreateSurfaceBrush(_videoSurface.CompositionSurface);

_videoVisual = _compositor.CreateSpriteVisual();
_videoVisual.Brush = _videoBrush;
_videoVisual.Size = new Vector2(156, 156);

Peindre avec un effet de filtre

Un CompositionEffectBrush peint une zone avec le résultat d’un CompositionEffect. Les effets de la couche visuelle peuvent être considérés comme des effets de filtre animatables appliqués à une collection de contenu source, comme les couleurs, les dégradés, les images, les vidéos, les swapchains, les régions de votre interface utilisateur ou les arborescences de visuels. Le contenu source est généralement spécifié à l’aide d’un autre CompositionBrush.

L’illustration et le code suivants montrent un SpriteVisual peint avec une image d’un chat qui a un effet de filtre de désaturation appliqué.

Compositor _compositor;
SpriteVisual _effectVisual;
CompositionEffectBrush _effectBrush;

_compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;

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

var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);
_effectBrush = effectFactory.CreateBrush();

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

_effectBrush.SetSourceParameter("mySource", surfaceBrush);

_effectVisual = _compositor.CreateSpriteVisual();
_effectVisual.Brush = _effectBrush;
_effectVisual.Size = new Vector2(156, 156);

Pour plus d’informations sur la création d’un effet à l’aide de CompositionBrushes, consultez Effets dans la couche visuelle

Peindre avec un CompositionBrush avec un masque d’opacité appliqué

Une compositionMaskBrush peint une zone avec un CompositionBrush avec un masque d’opacité appliqué à celui-ci. La source du masque d’opacité peut être n’importe quel CompositionBrush de type CompositionColorBrush, CompositionLinearGradientBrush, CompositionSurfaceBrush, CompositionEffectBrush ou CompositionNineGridBrush. Le masque d’opacité doit être spécifié en tant que CompositionSurfaceBrush.

L’illustration et le code suivants montrent un SpriteVisual peint avec un Objet CompositionMaskBrush. La source du masque est une CompositionLinearGradientBrush, et il est masqué pour ressembler à un cercle en utilisant une image de cercle comme masque.

Compositor _compositor;
SpriteVisual _maskVisual;
CompositionMaskBrush _maskBrush;

_compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;

_maskBrush = _compositor.CreateMaskBrush();

CompositionLinearGradientBrush _sourceGradient = _compositor.CreateLinearGradientBrush();
_sourceGradient.ColorStops.Add(_compositor.CreateColorGradientStop(0,Colors.Red));
_sourceGradient.ColorStops.Add(_compositor.CreateColorGradientStop(1,Colors.Yellow));
_maskBrush.Source = _sourceGradient;

LoadedImageSurface loadedSurface = LoadedImageSurface.StartLoadFromUri(new Uri("ms-appx:///Assets/circle.png"), new Size(156.0, 156.0));
_maskBrush.Mask = _compositor.CreateSurfaceBrush(loadedSurface);

_maskVisual = _compositor.CreateSpriteVisual();
_maskVisual.Brush = _maskBrush;
_maskVisual.Size = new Vector2(156, 156);

Peindre avec un CompositionBrush à l’aide de NineGrid stretch

Un CompositionNineGridBrush peint une zone avec un CompositionBrush étiré à l’aide de la métaphore de neuf grilles. La métaphore à neuf grilles vous permet d’étirer les bords et les coins d’un CompositionBrush différemment de son centre. La source de l’étirement de neuf grilles peut être n’importe quel CompositionBrush de type CompositionColorBrush, CompositionSurfaceBrush ou CompositionEffectBrush.

Le code suivant montre un SpriteVisual peint avec un CompositionNineGridBrush. La source du masque est un CompositionSurfaceBrush qui est étiré à l’aide d’une grille à neuf zones.

Compositor _compositor;
SpriteVisual _nineGridVisual;
CompositionNineGridBrush _nineGridBrush;

_compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;

_nineGridBrush = _compositor.CreateNineGridBrush();

// nineGridImage.png is 50x50 pixels; nine-grid insets, as measured relative to the actual size of the image, are: left = 1, top = 5, right = 10, bottom = 20 (in pixels)
LoadedImageSurface _imageSurface = LoadedImageSurface.StartLoadFromUri(new Uri("ms-appx:///Assets/nineGridImage.png"));
CompositionSurfaceBrush sourceBrush = _compositor.CreateSurfaceBrush(_imageSurface);
_nineGridBrush.Source = sourceBrush;

// Set nine-grid insets.
_nineGridBrush.SetInsets(1, 5, 10, 20);

// Set the appropriate stretch on the SurfaceBrush for the center of the nine-grid.
sourceBrush.Stretch = CompositionStretch.Fill;

_nineGridVisual = _compositor.CreateSpriteVisual();
_nineGridVisual.Brush = _nineGridBrush;
_nineGridVisual.Size = new Vector2(100, 75);

Peindre à l’aide de pixels d’arrière-plan

Un CompositionBackdropBrush peint une zone avec le contenu derrière la zone. Un CompositionBackdropBrush n’est jamais utilisé par lui-même, mais est utilisé en tant qu’entrée à un autre CompositionBrush comme un EffectBrush. Par exemple, en utilisant un CompositionBackdropBrush comme entrée à un effet Flou, vous pouvez obtenir un effet de verre gelé.

Le code suivant montre une petite arborescence visuelle pour créer une image à l’aide de CompositionSurfaceBrush et d’une superposition de verre givrée au-dessus de l’image. La superposition de verre givré est créée en plaçant un SpriteVisual rempli d’un EffectBrush au-dessus de l’image. EffectBrush utilise une CompositionBackdropBrush comme entrée pour l'effet de flou.

Compositor _compositor;
ContainerVisual _containerVisual;
SpriteVisual _imageVisual;
SpriteVisual _backdropVisual;

_compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;

// Create a container visual to host the visual tree.
_containerVisual = _compositor.CreateContainerVisual();

// Create _imageVisual and add it to the bottom of the container visual.
CompositionSurfaceBrush _licoriceBrush = _compositor.CreateSurfaceBrush();
LoadedImageSurface loadedSurface = LoadedImageSurface.StartLoadFromUri(new Uri("ms-appx:///Assets/licorice.jpg"));
_licoriceBrush.Surface = loadedSurface;

_imageVisual = _compositor.CreateSpriteVisual();
_imageVisual.Brush = _licoriceBrush;
_imageVisual.Size = new Vector2(156, 156);
_imageVisual.Offset = new Vector3(0, 0, 0);
_containerVisual.Children.InsertAtBottom(_imageVisual);

// Create a SpriteVisual and add it to the top of the container visual.
// Paint the visual with an EffectBrush that applies blur to the content underneath it.
GaussianBlurEffect blurEffect = new GaussianBlurEffect()
{
    Name = "Blur",
    BlurAmount = 1.0f,
    BorderMode = EffectBorderMode.Hard,
    Source = new CompositionEffectSourceParameter("source")
};

CompositionEffectFactory blurEffectFactory = _compositor.CreateEffectFactory(blurEffect);
CompositionEffectBrush _backdropBrush = blurEffectFactory.CreateBrush();

// Create a BackdropBrush and bind it to the EffectSourceParameter source.
_backdropBrush.SetSourceParameter("source", _compositor.CreateBackdropBrush());

_backdropVisual = _compositor.CreateSpriteVisual();
_backdropVisual.Brush = _backdropBrush;
_backdropVisual.Size = new Vector2(78, 78);
_backdropVisual.Offset = new Vector3(39, 39, 0);
_containerVisual.Children.InsertAtTop(_backdropVisual);

Combinaison de compositionBrushes

Un certain nombre de CompositionBrushes utilisent d’autres CompositionBrushes comme entrées. Par exemple, la méthode SetSourceParameter peut être utilisée pour définir un autre CompositionBrush comme entrée d'un CompositionEffectBrush. Le tableau ci-dessous présente les combinaisons prises en charge de brosses de composition. Notez que l’utilisation d’une combinaison non prise en charge lève une exception.

Utilisation d’un pinceau XAML vs. un objet CompositionBrush

Le tableau suivant fournit une liste de scénarios et indique si l’utilisation du pinceau XAML ou Composition est prescrite lors de la peinture d’un UIElement ou d’un SpriteVisual dans votre application.

Rubriques connexes

Interopérabilité native de composition avec DirectX et Direct2D avec BeginDraw et EndDraw

Interopérabilité des brosses XAML avec XamlCompositionBrushBase