Kompositionspinsel

Alles, was auf dem Bildschirm von einer UWP-Anwendung sichtbar ist, ist sichtbar, da es von einem Pinsel gezeichnet wurde. Mit Pinsel können Sie Ui-Objekte (User Interface) mit Inhalten zeichnen, die von einfachen, Volltonfarben bis hin zu Bildern oder Zeichnungen bis hin zu komplexen Effektenkette reichen. In diesem Thema werden die Konzepte der Malerei mit CompositionBrush vorgestellt.

Beachten Sie, dass Sie beim Arbeiten mit der UWP-App mit XAML-UWP-Apps ein UIElement mit einem XAML-Pinsel oder einem CompositionBrush zeichnen möchten. In der Regel ist es einfacher und ratsam, einen XAML-Pinsel auszuwählen, wenn Ihr Szenario von einem XAML-Pinsel unterstützt wird. Beispiel: Animieren der Farbe einer Schaltfläche, Ändern der Füllung eines Texts oder einer Form mit einem Bild. Wenn Sie dagegen versuchen, etwas zu tun, das von einem XAML-Pinsel wie dem Zeichnen mit einer animierten Maske oder einer animierten Neun-Raster-Stretchung oder einer Effektkette nicht unterstützt wird, können Sie ein CompositionBrush verwenden, um ein UIElement mithilfe von XamlCompositionBrushBase zu zeichnen.

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

• Voraussetzungen
• Paint with CompositionBrush
  • Zeichnen mit einer Volltonfarbe
  • Zeichnen mit einem linearen Farbverlauf
  • Zeichnen mit radialem Farbverlauf
  • Zeichnen mit einem Bild
  • Zeichnen mit einer benutzerdefinierten Zeichnung
  • Zeichnen mit einem Video
  • Zeichnen mit einem Filtereffekt
  • Zeichnen mit einem CompositionBrush mit einer Deckkraftmaske
  • Paint with a CompositionBrush using NineGrid stretch
  • 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.

Paint mit einem CompositionBrush

Ein CompositionBrush zeichnet einen Bereich mit seiner Ausgabe. Verschiedene Pinsel haben unterschiedliche Ausgabetypen. 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 gezeichnet wird, oder ein Neun-Raster kann verwendet werden, um die auf einen CompositionBrush angewendete Stretch beim Zeichnen eines Bereichs zu steuern. CompositionBrush kann von einem der folgenden Typen sein:

Zeichnen mit einer Volltonfarbe

Ein CompositionColorBrush zeichnet 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 gezeichnet wird und mit einem Pinsel mit Volltonfarbe gezeichnet wird, der den Farbwert von 0x9ACD32 aufweist.

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

Zeichnen mit einem linearen Farbverlauf

Ein CompositionLinearGradientBrush zeichnet einen Bereich mit einem linearen Farbverlauf. Ein linearer Farbverlauf blendet zwei oder mehr Farben über eine Linie hinweg, die Farbverlaufsachse. Sie verwenden GradientStop-Objekte, um die Farben im Farbverlauf und deren Positionen anzugeben.

Die folgende Abbildung und der folgende Code zeigt ein spriteVisual, das mit einem LinearGradientBrush mit 2 Stopps mit einer roten und gelben Farbe gezeichnet wurde.

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

Zeichnen mit radialem Farbverlauf

Ein CompositionRadialGradientBrush zeichnet einen Bereich mit einem radialen Farbverlauf. Ein radialer Farbverlauf blendet zwei oder mehr Farben mit dem Farbverlauf ab der Mitte der Auslassungspunkte ab und endet mit dem Radius der Auslassungspunkte. 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 = 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);

Zeichnen mit einem Bild

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

Die folgende Abbildung und der code zeigt ein spriteVisual, das mit einer Bitmap einer Lakritz gezeichnet wurde, die mit LoadedImageSurface auf einer ICompositionSurface gerendert wird. Die Eigenschaften von CompositionSurfaceBrush können verwendet werden, um die Bitmap innerhalb der Grenzen des visuellen Elements zu strecken und auszurichten.

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

Zeichnen mit einer benutzerdefinierten Zeichnung

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

Der folgende Code zeigt ein SpriteVisual, das mit einem Text gezeichnet wird, der mit Win2D auf einer ICompositionSurface gerendert wird. Beachten Sie, dass Sie das Win2D-NuGet-Paket in Ihr Projekt einschließen müssen, um Win2D zu verwenden.

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

Ebenso kann der CompositionSurfaceBrush auch verwendet werden, um einen SpriteVisual mit einer SwapChain mithilfe der Win2D-Interoperabilität zu zeichnen. Dieses Beispiel enthält ein Beispiel für die Verwendung von Win2D zum Zeichnen eines SpriteVisual-Elements mit einer Swapchain.

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 gezeichnet wurde, das auf eine ICompositionSurface geladen wurde.

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

Zeichnen mit einem Filtereffekt

Ein CompositionEffectBrush zeichnet einen Bereich mit ausgabe eines CompositionEffect. Effekte in der visuellen Ebene 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 Strukturen visueller Elemente. Der Quellinhalt wird in der Regel mit einem anderen CompositionBrush angegeben.

Die folgende Abbildung und der folgende Code zeigt ein spriteVisual, das mit einem Bild einer Katze gezeichnet wurde, auf die der Reifungsfiltereffekt angewendet wurde.

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

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

Paint with a CompositionBrush with opacity mask applied

Ein CompositionMaskBrush zeichnet einen Bereich mit einem CompositionBrush mit einer Deckkraftmaske, die darauf angewendet wird. 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 maskiert ist, um wie ein Kreis mit einem Bild des Kreises als Maske zu aussehen.

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

Paint with a CompositionBrush using NineGrid stretch

Ein CompositionNineGridBrush zeichnet 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 von jedem CompositionBrush vom Typ CompositionColorBrush, CompositionSurfaceBrush oder CompositionEffectBrush verwendet werden.

Der folgende Code zeigt ein spriteVisual, das mit einem CompositionNineGridBrush gezeichnet wurde. Die Quelle der Maske ist ein CompositionSurfaceBrush, der mit einem Neun-Raster gestreckt wird.

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

Zeichnen mit Hintergrundpixeln

Ein CompositionBackdropBrush zeichnet einen Bereich mit dem Inhalt hinter dem Bereich. 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 eine kleine visuelle Struktur zum Erstellen eines Bilds mithilfe von CompositionSurfaceBrush und einer Glasüberlagerung über dem Bild. Die Frostglasüberlagerung wird erstellt, indem ein SpriteVisual gefüllt mit einem EffectBrush über dem Bild platziert wird. Der EffectBrush verwendet einen CompositionBackdropBrush als Eingabe für den Weichzeichnereffekt.

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

Kombinieren von CompositionBrushes

Eine Reihe von CompositionBrushes verwenden andere CompositionBrushes als Eingaben. Beispielsweise kann die Verwendung der SetSourceParameter-Methode verwendet werden, um einen anderen CompositionBrush als Eingabe auf 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-Pinsel-Interoperabilität mit XamlCompositionBrushBase