Kompositionspenslar

Allt som visas på skärmen i en WinUI-app är synligt eftersom det har målats av en pensel. Med penslar kan du måla användargränssnittsobjekt (UI) med innehåll som sträcker sig från enkla solida färger till bilder, ritningar och komplexa effektkedjor. Det här avsnittet beskriver begreppen måleri med CompositionBrush.

När du arbetar med en WinUI XAML-app kan du välja att måla ett UIElement med en XAML-borste eller en CompositionBrush. Vanligtvis är det enklare att välja en XAML-pensel om ditt scenario redan stöds av en. Till exempel att animera färgen på en knapp eller ändra textfyllningen eller en form med en bild. Om du behöver något som inte stöds av en XAML-borste, till exempel en animerad mask, en animerad niorutig stretch eller en effektkedja, kan du använda en CompositionBrush för att måla ett UIElement via XamlCompositionBrushBase.

När du arbetar med det visuella lagret måste en CompositionBrush användas för att måla området i en SpriteVisual.

• Prerequisites
• Färg med CompositionBrush
  • Måla med en fast färg
  • Måla med linjär toning
  • Måla med radiell gradient
  • Måla med en bild
  • Måla med en anpassad ritning
  • Måla med en video
  • Måla med en filtereffekt
  • Måla med en CompositionBrush med en ogenomskinlig mask
  • Måla med en CompositionBrush med NineGrid stretch
  • Måla med bakgrundspixlar
• Kombinera CompositionBrushes
• Använda en XAML-pensel jämfört med CompositionBrush
• Relaterade ämnen

Förutsättningar

Den här översikten förutsätter att du är bekant med strukturen för ett grundläggande sammansättningsprogram, enligt beskrivningen i översikten över det visuella lagret.

Måla med en CompositionBrush

En CompositionBrush "färglägger" ett område med sitt resultat. Olika penslar har olika typer av utdata. Vissa penslar målar ett område med en fast färg, andra med toning, bild, anpassad ritning eller effekt. Det finns också specialiserade penslar som ändrar beteendet för andra penslar. Till exempel kan en opacitetsmask användas för att styra vilket område som målas med en CompositionBrush, eller ett nio-rutnät kan användas för att styra den stretch som appliceras på en CompositionBrush när ett område målas. CompositionBrush kan vara av någon av följande typer:

Class	Detaljer
CompositionColorBrush	Målar ett område med en fast färg
CompositionSurfaceBrush	Målar ett område med innehållet i en ICompositionSurface
CompositionEffectBrush	Målar ett område med innehållet från en kompositionseffekt
CompositionMaskBrush	Målar ett visuellt objekt med en CompositionBrush med en ogenomskinlig mask
CompositionNineGridBrush	Målar ett område med en CompositionBrush med en NineGrid stretch
CompositionLinearGradientBrush	Målar ett område med en linjär gradient
CompositionRadialGradientBrush	Målar ett område med radiell övertoning
CompositionBackdropBrush	Målar ett område genom att sampla bakgrundspixlar från programmet eller direkt bakom programmets fönster på skrivbordet. Används som indata till en annan CompositionBrush som en CompositionEffectBrush

Måla med en fast färg

En CompositionColorBrush målar ett område med en fast färg. Det finns en mängd olika sätt att ange färgen på en SolidColorBrush. Du kan till exempel ange dess kanaler för alfa, rött, blått och grönt (ARGB) eller använda någon av de fördefinierade färgerna som tillhandahålls av klassen Färger .

Följande bild och kod visar ett litet visuellt träd för att skapa en rektangel som är streckad med en svart färgborste och målad med en pensel med en fast färg som har färgvärdet 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);

Måla med linjär toning

En CompositionLinearGradientBrush målar ett område med en linjär toning. En linjär toning blandar två eller flera färger över en linje, toningsaxeln. Du använder GradientStop-objekt för att ange färgerna i toningen och deras positioner.

Följande bild och kod visar en SpriteVisual målad med en LinearGradientBrush med 2 stopp med en röd och gul färg.

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

Måla med radiell toning

En CompositionRadialGradientBrush målar ett område med en radiell gradient. En radiell toning blandar två eller flera färger, där toningen börjar från ellipsens mitt och slutar vid ellipsens radie. GradientStop-objekt används för att definiera färgerna och deras plats i toningen.

Följande illustration och kod visar en SpriteVisual målad med en RadialGradientBrush med 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);

Måla med en bild

En CompositionSurfaceBrush målar ett område med bildpunkter renderade på en ICompositionSurface. En CompositionSurfaceBrush kan till exempel användas för att måla ett område med en bild som återges på en ICompositionSurface med hjälp av API:et LoadedImageSurface .

Följande bild och kod visar en SpriteVisual målad med en bitmapp av en lakrits renderad på en ICompositionSurface med LoadedImageSurface. Egenskaperna för CompositionSurfaceBrush kan användas för att sträcka ut och justera bitmappen inom gränserna för det visuella objektet.

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

Måla med en anpassad ritning

En CompositionSurfaceBrush kan också användas för att måla ett område med pixlar från en ICompositionSurface renderad med Win2D (eller D2D).

Följande kod visar en SpriteVisual målad med en textkörning renderad på en ICompositionSurface med hjälp av Win2D. Om du vill använda Win2D med WinUI installerar du NuGet-paketet Microsoft.Graphics.Win2D i projektet.

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

På samma sätt kan CompositionSurfaceBrush också användas för att med hjälp av Win2D-interop måla en SpriteVisual med en SwapChain. Det här exemplet innehåller ett exempel på hur du använder Win2D för att måla en SpriteVisual med en swapchain.

Måla med en video

En CompositionSurfaceBrush kan också användas för att måla ett område med pixlar från en ICompositionSurface som har renderats med hjälp av en video inläst via MediaPlayer-klassen.

Följande kod visar en SpriteVisual målad med en video som läses in på en 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);

Måla med en filtereffekt

En CompositionEffectBrush målar ett område med utdata från en CompositionEffect. Effekter i det visuella lagret kan betraktas som animerbara filtereffekter tillämpade på en samling av källmaterial, såsom färger, toningar, bilder, videor, swapkedjor, regioner i ditt användargränssnitt eller träd av visuella element. Källinnehållet anges vanligtvis med hjälp av en annan CompositionBrush.

Följande bild och kod visar en SpriteVisual målad med en bild av en katt som har desaturationsfiltereffekten tillämpad.

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

Mer information om hur du skapar en effekt med CompositionBrushes finns i Effekter i visuellt lager

Måla med en CompositionBrush med en opacitetsmask applicerad

En CompositionMaskBrush målar ett område med en CompositionBrush med en ogenomskinlig mask applicerad på den. Källan till opacitetsmasken kan vara valfri CompositionBrush av typen CompositionColorBrush, CompositionLinearGradientBrush, CompositionSurfaceBrush, CompositionEffectBrush eller CompositionNineGridBrush. Opacitetsmasken måste anges som en CompositionSurfaceBrush.

Följande bild och kod visar en SpriteVisual målad med en CompositionMaskBrush. Maskens källa är en CompositionLinearGradientBrush, som maskeras så att den ser ut som en cirkel genom att använda en bild av en cirkel som mask.

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

Måla med en CompositionBrush med NineGrid stretch

En CompositionNineGridBrush målar ett område med en CompositionBrush som sträcks ut med hjälp av nine-grid metaforen. Med metaforen med nio rutnät kan du sträcka ut kanter och hörn på en CompositionBrush på ett annat sätt än dess centrum. Källan till nine-grid-stretch kan vara vilken som helst CompositionBrush av typen CompositionColorBrush, CompositionSurfaceBrush eller CompositionEffectBrush.

Följande kod visar en SpriteVisual målad med en CompositionNineGridBrush. Maskens källa är en CompositionSurfaceBrush som sträcks ut med hjälp av ett Nine-Grid.

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

Måla med bakgrundspixlar

En CompositionBackdropBrush målar ett område med innehållet bakom området. En CompositionBackdropBrush används aldrig på egen hand, utan används i stället som indata till en annan CompositionBrush som en EffectBrush. Genom att till exempel använda en CompositionBackdropBrush som inmatning till en oskärpaeffekt kan du uppnå en frostad glaseffekt.

Följande kod visar ett litet visuellt träd för att skapa en bild med hjälp av CompositionSurfaceBrush, och ett frostad glasöverlägg ovanför bilden. Det frostade glasöverlägget skapas genom att placera en SpriteVisual fylld med en EffectBrush ovanför bilden. EffectBrush använder en CompositionBackdropBrush som indata till oskärpaeffekten.

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

Kombinera CompositionBrushes

Ett antal CompositionBrushes använder andra CompositionBrushes som indata. Du kan till exempel använda metoden SetSourceParameter för att ange en annan CompositionBrush som indata till en CompositionEffectBrush. Tabellen nedan beskriver de kombinationer av CompositionBrushes som stöds. Observera att om du använder en kombination som inte stöds genereras ett undantag.

Borste	EffectBrush.SetSourceParameter()	MaskBrush.Mask	MaskBrush.Source	NineGridBrush.Source
CompositionColorBrush	JA	JA	JA	JA
CompositionLinear Gradientsborste	JA	JA	JA	NEJ
CompositionSurfaceBrush	JA	JA	JA	JA
CompositionEffectBrush	NEJ	NEJ	JA	NEJ
sammansättningsmaskpensel	NEJ	NEJ	NEJ	NEJ
CompositionNineGridBrush	JA	JA	JA	NEJ
CompositionBackdropBrush	JA	NEJ	NEJ	NEJ

Använda en XAML-pensel jämfört med CompositionBrush

Följande tabell innehåller en lista över scenarier och om XAML- eller kompositionspenseln används när du målar ett UIElement eller en SpriteVisual i ditt program.

Anmärkning

Om en CompositionBrush föreslås för ett XAML UIElement antas det att CompositionBrush paketeras med hjälp av en XamlCompositionBrushBase.

Scenario	XAML UIElement	Komposition SpriteVisual
Måla ett område med enfärgad färg	SolidColorBrush	CompositionColorBrush
Måla ett område med animerad färg	SolidColorBrush	CompositionColorBrush
Måla en yta med en statisk färgövergång	LinearGradientBrush	CompositionLinearGradientBrush
Måla ett område med animerade färgövergångsstopp	CompositionLinearGradientBrush	CompositionLinearGradientBrush
Måla ett område med en bild	ImageBrush	CompositionSurfaceBrush
Måla ett område med hjälp av en webbsida	WebView2	Inte tillämpligt
Måla ett område med en bild med NineGrid stretch	Bildkontroll	CompositionNineGridBrush
Måla ett område med animerad NineGrid-utsträckning	CompositionNineGridBrush	CompositionNineGridBrush
Rendera ett område med en swapchain	SwapChainPanel	CompositionSurfaceBrush med swapchain-interoperabilitet
Måla ett område med en video	MediaPlayerElement	CompositionSurfaceBrush med medieinteroperabilitet
Måla ett område med anpassad 2D-ritning	CanvasControl från Win2D	CompositionSurfaceBrush med Win2D interoperabilitet
Måla ett område med icke-animerad mask	Använda XAML-former för att definiera en mask	CompositionMaskBrush
Måla ett område med en animerad mask	CompositionMaskBrush	CompositionMaskBrush
Måla ett område med en animerad filtereffekt	CompositionEffectBrush	CompositionEffectBrush
Måla ett område med en effekt som tillämpas på bakgrundspixlar	CompositionBackdropBrush	CompositionBackdropBrush

Relaterade ämnen

Sammansättningsbaserat DirectX- och Direct2D-interop med BeginDraw och EndDraw

XAML penselinteroperabilitet med XamlCompositionBrushBase