Pinceaux de composition

  • Article

Tout ce qui est visible sur votre écran à partir d’une application UWP 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 des couleurs simples et unie aux images ou dessins en passant par la chaîne d’effets complexes. Cette rubrique présente les concepts de la peinture avec CompositionBrush.

Notez que lorsque vous utilisez une application UWP XAML, vous pouvez choisir de peindre un UIElement avec un pinceau XAML ou une compositionBrush. En règle générale, il est plus facile et conseillé de choisir un pinceau XAML si votre scénario est pris en charge par un pinceau XAML. Par exemple, l’animation de la couleur d’un bouton, la modification du remplissage d’un texte ou d’une forme avec une image. D’autre part, si vous essayez d’effectuer quelque chose qui n’est pas pris en charge par un pinceau XAML, comme la peinture avec un masque animé ou un étirement à neuf grilles animées ou une chaîne d’effets, vous pouvez utiliser un CompositionBrush pour peindre un UIElement à l’aide de XamlCompositionBrushBase.

Lors de l’utilisation du calque Visuel, une CompositionBrush doit être utilisée pour peindre la zone d’un SpriteVisual.

Prérequis

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 une CompositionBrush

Une CompositionBrush « peint » une zone avec sa sortie. Des pinceaux différents ont différents types de sortie. Certains pinceaux peignent 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 qui est peinte par un CompositionBrush, ou une grille à neuf 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 :

Classe Détails Introduit dans
CompositionColorBrush Peint une zone avec une couleur unie Windows 10, version 1511 (SDK 10586)
CompositionSurfaceBrush Peint une zone avec le contenu d’un ICompositionSurface Windows 10, version 1511 (SDK 10586)
CompositionEffectBrush Peint une zone avec le contenu d’un effet de composition Windows 10, version 1511 (SDK 10586)
CompositionMaskBrush Peint un visuel avec un CompositionBrush avec un masque d’opacité Windows 10, version 1607 (SDK 14393)
CompositionNineGridBrush Peint une zone avec une CompositionBrush à l’aide d’un étirement NineGrid Windows 10, version 1607 (SDK 14393)
CompositionLinearGradientBrush Peint une zone avec un dégradé linéaire Windows 10, version 1709 (SDK 16299)
CompositionRadialGradientBrush Peint une zone avec un dégradé radial Windows 10, version 1903 (Sdk Insider Preview)
CompositionBackdropBrush Peint une zone en échantillonnant des pixels d’arrière-plan de l’application ou des pixels directement derrière la fenêtre de l’application sur le bureau. Utilisé comme entrée dans un autre CompositionBrush comme compositionEffectBrush Windows 10, version 1607 (SDK 14393)

Peindre avec une couleur unie

CompositionColorBrush peint une zone avec une couleur unie. Il existe plusieurs 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 d’éléments visuels, et créent un rectangle tracé avec un pinceau de couleur noire et peint à l’aide d’un pinceau de couleur unie, dont la valeur de couleur est 0x9ACD32.

CompositionColorBrush

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

_compositor = Window.Current.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

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

L’illustration et le code suivants montrent un SpriteVisual peint avec un LinearGradientBrush avec 2 arrêts utilisant une couleur rouge et jaune.

CompositionLinearGradientBrush

Compositor _compositor;
SpriteVisual _gradientVisual;
CompositionLinearGradientBrush _redyellowBrush;

_compositor = Window.Current.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

CompositionRadialGradientBrush peint une zone avec un dégradé radial. Un dégradé radial mélange deux couleurs ou plus avec le dégradé commençant du 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.

CompositionRadialGradientBrush

Compositor _compositor;
SpriteVisual _gradientVisual;
CompositionRadialGradientBrush RGBrush;

_compositor = Window.Current.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

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

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

CompositionSurfaceBrush

Compositor _compositor;
SpriteVisual _imageVisual;
CompositionSurfaceBrush _imageBrush;

_compositor = Window.Current.Compositor;

_imageBrush = _compositor.CreateSurfaceBrush();

// The loadedSurface has a size of 0x0 till the image has been 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é

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 une exécution de texte rendue sur un ICompositionSurface à l’aide de Win2D. Notez que pour utiliser Win2D, vous devez inclure le package NuGet Win2D dans votre projet.

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

_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, CompositionSurfaceBrush peut également être utilisé 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

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

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

Compositor _compositor;
SpriteVisual _videoVisual;
CompositionSurfaceBrush _videoBrush;

// MediaPlayer set up with a create from URI

_mediaPlayer = new MediaPlayer();

// Get a source from a URI. This could also be from a file via a picker 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 Objet CompositionEffectBrush peint une zone avec la sortie d’une CompositionEffect. Les effets de la couche visuelle peuvent être considérés comme des effets de filtres pouvant être appliqués à une collection de contenu source, comme des couleurs, des dégradés, des images, des vidéos, des chaînes d’échange, des régions de votre interface utilisateur ou des 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 auquel un effet de filtre de désaturation est appliqué.

CompositionEffectBrush

Compositor _compositor;
SpriteVisual _effectVisual;
CompositionEffectBrush _effectBrush;

_compositor = Window.Current.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

Peinture avec compositionBrush avec masque d’opacité appliqué

Un CompositionMaskBrush peint une zone avec un CompositionBrush avec un masque d’opacité appliqué. 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 CompositionMaskBrush. La source du masque est une CompositionLinearGradientBrush qui est masquée pour ressembler à un cercle à l’aide d’une image de cercle comme masque.

CompositionMaskBrush

Compositor _compositor;
SpriteVisual _maskVisual;
CompositionMaskBrush _maskBrush;

_compositor = Window.Current.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 objet CompositionBrush à l’aide d’un étirement NineGrid

Un CompositionNineGridBrush peint une zone avec un CompositionBrush étiré à l’aide de la métaphore à 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 à neuf grilles peut être effectuée par n’importe quel objet CompositionBrush de type CompositionColorBrush, CompositionSurfaceBrush ou CompositionEffectBrush.

Le code suivant montre un SpriteVisual peint avec un Objet CompositionNineGridBrush. La source du masque est un CompositionSurfaceBrush qui est étiré à l’aide d’un Nine-Grid.

Compositor _compositor;
SpriteVisual _nineGridVisual;
CompositionNineGridBrush _nineGridBrush;

_compositor = Window.Current.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"));
_nineGridBrush.Source = _compositor.CreateSurfaceBrush(_imageSurface);

// set Nine-Grid Insets

_ninegridBrush.SetInsets(1, 5, 10, 20);

// set appropriate Stretch on SurfaceBrush for Center of 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 objet CompositionBackdropBrush peint une zone avec le contenu derrière la zone. Un CompositionBackdropBrush n’est jamais utilisé seul, mais il est utilisé comme entrée dans un autre CompositionBrush comme un EffectBrush. Par exemple, en utilisant une compositionBackdropBrush comme entrée d’un effet de flou, vous pouvez obtenir un effet de verre dépoli.

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

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

_compositor = Window.Current.Compositor;

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

// Create _imageVisual and add it to the bottom of the container visual.
// Paint the visual with an image.

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 containerVisual.
// Paint the visual with an EffectBrush that applies blur to the content
// underneath the Visual to create a frosted glass effect.

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 = _licoriceBrush;
_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 en tant qu’entrée d’un Objet CompositionEffectBrush. Le tableau ci-dessous décrit les combinaisons prises en charge de CompositionBrushes. Notez que l’utilisation d’une combinaison non prise en charge lève une exception.

Brush EffectBrush.SetSourceParameter() MaskBrush.Mask MaskBrush.Source NineGridBrush.Source
CompositionColorBrush YES YES YES YES
CompositionLinear
GradientBrush		 YES YES YES Non
CompositionSurfaceBrush YES YES YES YES
CompositionEffectBrush Non Non YES Non
CompositionMaskBrush Non Non Non Non
CompositionNineGridBrush YES YES YES Non
CompositionBackdropBrush YES Non Non Non

Utilisation d’un pinceau XAML et d’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 élément UIElement ou d’un SpriteVisual dans votre application.

Notes

Si un objet CompositionBrush est suggéré pour un élément UIElement XAML, il est supposé que compositionBrush est empaqueté à l’aide d’un élément XamlCompositionBrushBase.

Scénario XAML UIElement Composition SpriteVisual
Peindre une zone avec une couleur unie SolidColorBrush CompositionColorBrush
Peindre une zone avec une couleur animée SolidColorBrush CompositionColorBrush
Peindre une zone avec un dégradé statique LinearGradientBrush CompositionLinearGradientBrush
Peindre une zone avec des points de dégradé animés CompositionLinearGradientBrush CompositionLinearGradientBrush
Peindre une zone avec une image ImageBrush CompositionSurfaceBrush
Peindre une zone avec une page web WebViewBrush N/A
Peindre une zone avec une image à l’aide de NineGrid stretch Contrôle d’image CompositionNineGridBrush
Peindre une zone avec un étirement NineGrid animé CompositionNineGridBrush CompositionNineGridBrush
Peindre une zone avec une chaîne d’échange SwapChainPanel CompositionSurfaceBrush avec interopérabilité de la chaîne d’échange
Peindre une zone avec une vidéo MediaElement CompositionSurfaceBrush avec interopérabilité multimédia
Peindre une zone avec un dessin 2D personnalisé CanvasControl à partir de Win2D CompositionSurfaceBrush avec interopérabilité Win2D
Peindre une zone avec un masque non animé Utiliser des formes XAML pour définir un masque CompositionMaskBrush
Peindre une zone avec un masque animé CompositionMaskBrush CompositionMaskBrush
Peindre une zone avec un effet de filtre animé CompositionEffectBrush CompositionEffectBrush
Peindre une zone avec un effet appliqué aux pixels d’arrière-plan CompositionBackdropBrush CompositionBackdropBrush

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

Interopérabilité du pinceau XAML avec XamlCompositionBrushBase