Pinceaux de composition

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 de couleurs simples et solides à des images ou des dessins à des chaînes d’effets complexes. Cette rubrique présente les concepts de la peinture avec CompositionBrush.

Notez que lorsque vous utilisez l’application UWP XAML, vous pouvez choisir de peindre un UIElement avec un pinceau XAML ou un objet 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, animation de la couleur d’un bouton, modification du remplissage d’un texte ou d’une forme avec une image. En revanche, si vous essayez de faire quelque chose qui n’est pas pris en charge par un pinceau XAML comme la peinture avec un masque animé ou une chaîne d’effet de neuf grilles animées, vous pouvez utiliser un CompositionBrush pour peindre un UIElement à l’aide de XamlCompositionBrushBase.

Lorsque vous utilisez la couche Visuel, un Objet 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
  • Peindre 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 compositionBrushes
• Utilisation d’un pinceau XAML ou d’un objet CompositionBrush
• Rubriques connexes

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

Une compositionBrush « peint » une zone avec sa sortie. 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 de 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 :

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 = 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

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 avec 2 arrêts à l’aide d’une couleur rouge et jaune.

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

Un CompositionRadialGradientBrush peint une zone avec un dégradé radial. Un dégradé radial fusionne deux couleurs ou plus avec le dégradé à partir du centre de l’ellipse et se terminant par le 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 = 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

Un compositionSurfaceBrush peint une zone avec des pixels rendus sur un ICompositionSurface. Par exemple, un objet CompositionSurfaceBrush peut être utilisé 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’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 = Window.Current.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 une peinture SpriteVisual 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, 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 une peinture SpriteVisual 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 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 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 = 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

Peindre avec un compositionBrush avec 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 masquée pour ressembler à un cercle à l’aide d’une image de cercle sous forme de masque.

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 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 par 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 une CompositionSurfaceBrush qui est étirée à l’aide d’une grille de neuf.

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 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ée est créée en plaçant un SpriteVisual rempli d’un EffectBrush au-dessus de l’image. EffectBrush utilise un CompositionBackdropBrush comme entrée à l’effet 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, l’utilisation de 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 présente les combinaisons prises en charge de CompositionBrushes. Notez que l’utilisation d’une combinaison non prise en charge lève une exception.

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

Rubriques connexes

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

Interopérabilité de pinceau XAML avec XamlCompositionBrushBase