Kompositionspinsel

Alles, was auf dem Bildschirm in einer WinUI-App sichtbar ist, ist sichtbar, da es von einem Pinsel gezeichnet wurde. Mit Pinsel können Sie Benutzeroberflächenobjekte mit Inhalten zeichnen, die von einfachen Volltonfarben bis hin zu Bildern, Zeichnungen und komplexen Effektketten reichen. In diesem Thema werden die Konzepte der Malerei mit CompositionBrush vorgestellt.

Wenn Sie mit einer WinUI-XAML-App arbeiten, können Sie ein UIElement mit einem XAML-Pinsel oder einem CompositionBrush zeichnen. Normalerweise ist es einfacher, einen XAML-Pinsel auszuwählen, wenn Ihr Szenario bereits von einem unterstützt wird. Beispiel: Animieren der Farbe einer Schaltfläche oder Ändern der Textfüllung oder einer Form mit einem Bild. Wenn Sie etwas benötigen, das von einem XAML-Pinsel nicht unterstützt wird, z. B. einer animierten Maske, einer animierten Neun-Raster-Stretchung oder einer Effektkette, können Sie einen CompositionBrush verwenden, um ein UIElement über XamlCompositionBrushBase zu zeichnen.

Beim Arbeiten mit der visuellen Ebene muss ein CompositionBrush verwendet werden, um den Bereich eines SpriteVisual zu zeichnen.

• Voraussetzungen
• Mit CompositionBrush malen
  • Malen mit einer Volltonfarbe
  • Zeichnen mit einem linearen Farbverlauf
  • Zeichnen mit radialem Farbverlauf
  • Zeichnen mit einem Bild
  • Malen mit einer benutzerdefinierten Vorlage
  • Zeichnen mit einem Video
  • Zeichnen mit einem Filtereffekt
  • Zeichnen mit einem CompositionBrush mit einer Deckkraftmaske
  • Mit einem CompositionBrush und der NineGrid-Streckung malen
  • Zeichnen mit Hintergrundpixeln
• Kombinieren von CompositionBrushes
• Verwenden eines XAML-Pinsels im Vergleich zu CompositionBrush
• Verwandte Themen

Voraussetzungen

In dieser Übersicht wird davon ausgegangen, dass Sie mit der Struktur einer einfachen Kompositionsanwendung vertraut sind, wie in der Übersicht über die visuelle Ebene beschrieben.

Malen Sie mit einem CompositionBrush

Ein CompositionBrush malt einen Bereich mit seiner Ausgabe. Verschiedene Pinsel haben unterschiedliche Ergebnistypen. Einige Pinsel zeichnen einen Bereich mit einer Volltonfarbe, andere mit einem Farbverlauf, einem Bild, einer benutzerdefinierten Zeichnung oder einem Effekt. Es gibt auch spezielle Pinsel, die das Verhalten anderer Pinsel ändern. Beispielsweise kann die Deckkraftmaske verwendet werden, um zu steuern, welcher Bereich von einem CompositionBrush bemalt wird, oder ein Neungitter kann verwendet werden, um die Dehnung beim Malen eines Bereichs mit einem CompositionBrush zu steuern. CompositionBrush kann von einem der folgenden Typen sein:

Zeichnen mit einer Volltonfarbe

Ein CompositionColorBrush malt einen Bereich mit einer Volltonfarbe. Es gibt eine Vielzahl von Möglichkeiten zum Angeben der Farbe eines SolidColorBrush. Sie können beispielsweise die Alpha-, Rot-, Blau- und Grünkanäle (ARGB) angeben oder eine der vordefinierten Farben verwenden , die von der Colors-Klasse bereitgestellt werden.

Die folgende Abbildung und der Code zeigen eine kleine visuelle Struktur, um ein Rechteck zu erstellen, das mit einem schwarzen Pinsel umrandet wird und mit einem Volltonfarbpinsel ausgemalt wird, der den Farbwert 0x9ACD32 aufweist.

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);

Zeichnen mit einem linearen Farbverlauf

Ein CompositionLinearGradientBrush zeichnet einen Bereich mit einem linearen Farbverlauf. Ein linearer Farbverlauf mischt zwei oder mehr Farben entlang einer Linie, der Gradientenachse. Sie verwenden GradientStop-Objekte, um die Farben im Farbverlauf und deren Positionen anzugeben.

Die folgende Abbildung und der folgende Code zeigen ein SpriteVisual, das mit einem LinearGradientBrush mit 2 Farbstopps in Rot und Gelb gezeichnet wurde.

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);

Zeichnen mit radialem Farbverlauf

Ein CompositionRadialGradientBrush malt einen Bereich mit einem radialen Verlauf. Ein radialer Farbverlauf mischt zwei oder mehr Farben, beginnend von der Mitte der Ellipse und endend am Radius der Ellipse. GradientStop-Objekte werden verwendet, um die Farben und deren Position im Farbverlauf zu definieren.

Die folgende Abbildung und der Code zeigt ein SpriteVisual, das mit einem RadialGradientBrush mit 2 GradientStops gezeichnet wurde.

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);

Zeichnen mit einem Bild

Ein CompositionSurfaceBrush malt einen Bereich mit auf einer ICompositionSurface gerenderten Pixeln. Beispielsweise kann ein CompositionSurfaceBrush verwendet werden, um einen Bereich mit einem Bild zu zeichnen, das mit der LoadedImageSurface-API auf einem ICompositionSurface gerendert wird.

Die folgende Abbildung und der Code zeigt ein SpriteVisual, das mit einer Bitmap von Lakritz bemalt ist, die auf einer ICompositionSurface mittels LoadedImageSurface gerendert wird. Die Eigenschaften von CompositionSurfaceBrush können verwendet werden, um die Bitmap innerhalb der visuellen Begrenzungen zu strecken und auszurichten.

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);

Zeichnen mit einer benutzerdefinierten Zeichnung

Ein CompositionSurfaceBrush kann auch verwendet werden, um einen Bereich mit den Pixeln einer ICompositionSurface zu bemalen, die mithilfe von Win2D (oder D2D) gerendert wird.

Der folgende Code zeigt ein SpriteVisual, das mit einem Textlauf gestaltet ist, der mithilfe von Win2D auf einer ICompositionSurface gerendert wird. Um Win2D mit WinUI zu verwenden, installieren Sie das Microsoft.Graphics.Win2D NuGet-Paket in Ihrem Projekt.

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);

Ebenso kann der CompositionSurfaceBrush auch verwendet werden, um einen SpriteVisual mit einer SwapChain mithilfe der Win2D-Interoperabilität zu zeichnen. Dieses Beispiel zeigt, wie Win2D verwendet wird, um ein SpriteVisual-Element mit einer Swapchain zu zeichnen.

Zeichnen mit einem Video

Ein CompositionSurfaceBrush kann auch verwendet werden, um einen Bereich mit Pixeln aus einer ICompositionSurface zu zeichnen, die mit einem Video gerendert wird, das über die MediaPlayer-Klasse geladen wurde.

Der folgende Code zeigt ein SpriteVisual, das mit einem Video gemalt wurde, das auf eine ICompositionSurface geladen wurde.

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);

Zeichnen mit einem Filtereffekt

Ein CompositionEffectBrush malt einen Bereich mit der Ausgabe eines CompositionEffect. Effekte in der Visuellen Schicht können als animierbare Filtereffekte betrachtet werden, die auf eine Sammlung von Quellinhalten angewendet werden, z. B. Farben, Farbverläufe, Bilder, Videos, Swapchains, Bereiche Ihrer Benutzeroberfläche oder Visualstrukturen. Der Quellinhalt wird in der Regel mit einem anderen CompositionBrush angegeben.

Die folgende Abbildung und der folgende Code zeigen ein SpriteVisual, das mit einem Bild einer Katze gezeichnet wurde, auf das der Entsättigungsfiltereffekt angewendet wurde.

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);

Weitere Informationen zum Erstellen eines Effekts mithilfe von CompositionBrushes finden Sie unter Effects in Visual Layer

Mit einem CompositionBrush malen, auf den eine Deckkraftmaske angewendet wurde

Ein CompositionMaskBrush malt einen Bereich mit einem CompositionBrush, auf den eine Deckkraftmaske angewendet wurde. Die Quelle der Deckkraftmaske kann ein beliebiger CompositionBrush vom Typ CompositionColorBrush, CompositionLinearGradientBrush, CompositionSurfaceBrush, CompositionEffectBrush oder CompositionNineGridBrush sein. Die Deckkraftmaske muss als CompositionSurfaceBrush angegeben werden.

Die folgende Abbildung und der Code zeigt ein SpriteVisual, das mit einem CompositionMaskBrush gezeichnet wurde. Die Quelle der Maske ist ein CompositionLinearGradientBrush, der mit einem Bild eines Kreises als Maske versehen wird, um wie ein Kreis auszusehen.

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);

Mit einem CompositionBrush unter Verwendung von NineGrid-Stretch malen.

Ein CompositionNineGridBrush malt einen Bereich mit einem CompositionBrush, der mithilfe der Neun-Raster-Metapher gestreckt wird. Mit der Neun-Raster-Metapher können Sie Ränder und Ecken eines CompositionBrush anders als seine Mitte strecken. Die Quelle der Neun-Raster-Streckung kann ein CompositionBrush vom Typ CompositionColorBrush, CompositionSurfaceBrush oder CompositionEffectBrush sein.

Der folgende Code zeigt ein SpriteVisual, das mit einem CompositionNineGridBrush gezeichnet wurde. Die Quelle der Maske ist ein CompositionSurfaceBrush, der mithilfe eines 9-Gitters gestreckt wird.

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);

Zeichnen mit Hintergrundpixeln

Ein CompositionBackdropBrush bemalt den Bereich mit dem Inhalt, der sich hinter diesem befindet. Ein CompositionBackdropBrush wird nie alleine verwendet, sondern stattdessen als Eingabe für einen anderen CompositionBrush wie ein EffectBrush verwendet. Wenn Sie beispielsweise einen CompositionBackdropBrush als Eingabe für einen Weichzeichnereffekt verwenden, können Sie einen Frostglaseffekt erzielen.

Der folgende Code zeigt einen kleinen visuellen Baum zum Erstellen eines Bilds mithilfe von CompositionSurfaceBrush und einer Milchglasüberlagerung oberhalb des Bildes. Die Frostglasüberlagerung wird erstellt, indem ein SpriteVisual, das mit einem EffectBrush gefüllt ist, über dem Bild platziert wird. Der EffectBrush nutzt einen CompositionBackdropBrush als Eingabe für den Unschärfeeffekt.

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);

Kombinieren von CompositionBrushes

Eine Reihe von CompositionBrushes verwenden andere CompositionBrushes als Eingaben. Beispielsweise kann die SetSourceParameter-Methode verwendet werden, um einen anderen CompositionBrush als Eingabe für einen CompositionEffectBrush festzulegen. In der folgenden Tabelle werden die unterstützten Kombinationen von CompositionBrushes beschrieben. Beachten Sie, dass die Verwendung einer nicht unterstützten Kombination eine Ausnahme auslöst.

Verwenden eines XAML-Pinsels im Vergleich zu CompositionBrush

Die folgende Tabelle enthält eine Liste der Szenarien und ob die Verwendung des XAML- oder Kompositionspinsels beim Zeichnen eines UIElements oder eines SpriteVisual in Ihrer Anwendung vorgeschrieben ist.

Verwandte Themen

Systemeigene DirectX- und Direct2D-Interoperabilität mit BeginDraw und EndDraw

XAML-Brush-Interoperabilität mit XamlCompositionBrushBase