Kompoziční štětce

Všechno viditelné na obrazovce v aplikaci WinUI je viditelné, protože ho namaloval štětec. Štětce umožňují malovat objekty uživatelského rozhraní s obsahem od jednoduchých plných barev až po obrázky, kresby a složité řetězy efektů. Toto téma představuje koncepty malování s CompositionBrush.

Při práci s aplikací WinUI XAML se můžete rozhodnout malovat UIElement pomocí štětce XAML nebo KompoziceBrush. Obvykle je jednodušší zvolit štětec XAML, pokud ho už podporuje váš scénář. Můžete třeba animovat barvu tlačítka nebo změnit výplň textu nebo obrazce s obrázkem. Pokud potřebujete něco, co není podporováno štětcem XAML, jako je animovaná maska, animované devítipolové roztáhnutí nebo řetězec efektů, můžete pro vykreslení UIElement použít XamlCompositionBrushBase.

Při práci s vizuální vrstvou musí být použit štětec CompositionBrush pro vykreslení oblasti SpriteVisual.

• Požadavky
• Malování pomocí CompositionBrush
  • Natřít jednolitou barvou
  • Malujte lineárním přechodem
  • Malování s paprskovým přechodem
  • Malování s obrázkem
  • Malování pomocí vlastního výkresu
  • Malování s videem
  • Malování s efektem filtru
  • Malovat pomocí kompozičního štětce s maskou průhlednosti
  • Malování pomocí kompozitního štětce a technologie stretch NineGrid
  • Malování pomocí pixelů pozadí
• Kombinování CompositionBrushes
• Použití XAML Brush vs. CompositionBrush
• Související témata

Předpoklady

Tento přehled předpokládá, že znáte strukturu základní aplikace Composition, jak je popsáno v přehledu vizuální vrstvy.

Malujte pomocí kompozicí štětcem

CompositionBrush "maluje" oblast svým výstupem. Různé štětce mají různé typy výstupu. Některé štětce malují oblast plnou barvou, jiné s přechodem, obrázkem, vlastním výkresem nebo efektem. Existují také specializované štětce, které upravují chování jiných štětců. Například maska neprostupnosti může být použita k řízení toho, která oblast je malována kompozičním štětcem, nebo devítimřížka může být použita k řízení roztažení použitého na kompoziční štětec při malování oblasti. CompositionBrush může být z jednoho z následujících typů:

Třída	Podrobnosti
CompositionColorBrush	Maluje oblast jednolitou barvou.
CompositionSurfaceBrush	Maluje oblast s obsahem ICompositionSurface
CompositionEffectBrush	Maluje oblast obsahem kompozičního efektu.
CompositionMaskBrush	Maluje vizuál pomocí objektu CompositionBrush s neprůhlednou maskou.
CompositionNineGridBrush	Maluje oblast s CompositionBrush pomocí NineGrid stretch
CompositionLinearGradientBrush	Vyplňuje oblast lineárním gradientem.
CompositionRadialGradientBrush	Maluje oblast s radiálním gradientem.
CompositionBackdropBrush	Nakreslí oblast vzorkováním pixelů pozadí buď z aplikace, nebo pixelů, které se nachází přímo za oknem aplikace na ploše. Používá se jako vstup do jiného objektu CompositionBrush, jako je CompositionEffectBrush.

Malujte plnou barvou

A CompositionColorBrush obarvuje určitou oblast jednolitou barvou. Existují různé způsoby, jak určit barvu SolidColorBrush. Můžete například zadat její alfa, červenou, modrou a zelenou (ARGB) kanály nebo použít jednu z předdefinovaných barev poskytovaných třídou Colors .

Následující obrázek a kód znázorňují malý vizuální strom, který vytvoří obdélník ohraničený černou barvou a vyplněný čistou barvou s hodnotou 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);

Malujte pomocí lineárního přechodu

A CompositionLinearGradientBrush vytváří lineární přechod v oblasti. Lineární přechod kombinuje dvě nebo více barev přes čáru, osu přechodu. Pomocí objektů GradientStop můžete určit barvy v přechodu a jejich umístění.

Následující obrázek a kód znázorňují SpriteVisual vymalovaný LinearGradientBrushem s dvěma body přechodu pomocí červené a žluté barvy.

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

Malování s radiálním přechodem

A CompositionRadialGradientBrush maluje oblast s paprskovým přechodem. Radiální přechod kombinuje dvě nebo více barev, přičemž přechod začíná ve středu elipsy a končí na poloměru elipsy. Objekty GradientStop slouží k definování barev a jejich umístění v přechodu.

Následující obrázek a kód znázorňují SpriteVisual namalovaný RadialGradientBrush se 2 barevnými přechody.

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

Malování s obrázkem

A CompositionSurfaceBrush maluje oblast s pixely vykreslenými na ICompositionSurface. Například CompositionSurfaceBrush lze použít k namalování oblasti obrazem, který je vykreslen na ICompositionSurface pomocí API LoadedImageSurface.

Následující obrázek a kód znázorňují SpriteVisual malovaný bitmapou lékořice vykreslenou na ICompositionSurface pomocí LoadedImageSurface. Vlastnosti CompositionSurfaceBrush lze použít k roztažení a zarovnání rastrového obrázku v mezích vizuálu.

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

Malování pomocí vlastního výkresu

A CompositionSurfaceBrush lze také použít k malování oblasti s pixely z ICompositionSurface vykreslené pomocí Win2D (nebo D2D).

Následující kód ukazuje SpriteVisual vykreslený textem vykresleným na ICompositionSurface pomocí Win2D. Pokud chcete použít Win2D s WinUI, nainstalujte do projektu balíček NuGet Microsoft.Graphics.Win2D .

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

Podobně, CompositionSurfaceBrush lze také použít k malování SpriteVisual s SwapChain pomocí Win2D interop. Tato ukázka poskytuje příklad použití Win2D k malování SpriteVisual pomocí swapchain.

Malování s videem

A CompositionSurfaceBrush lze také použít k malování oblasti s pixely z ICompositionSurface vykreslené pomocí videa načteného prostřednictvím Třídy MediaPlayer .

Následující kód ukazuje SpriteVisual zobrazovaný videem načteným do 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);

Malování s efektem filtru

A CompositionEffectBrush vykresluje oblast s výstupem z CompositionEffectu. Efekty ve vizuální vrstvě lze považovat za animačně ovládané filtrovací efekty aplikované na kolekci zdrojového obsahu, jako jsou barvy, přechody, obrázky, videa, swapchainy, oblasti uživatelského rozhraní nebo hierarchie vizuálů. Zdrojový obsah se obvykle specifikuje pomocí jiného objektu CompositionBrush.

Následující obrázek a kód ukazují SpriteVisual pomalovaný obrázkem kočky, na který je aplikován efekt filtru desaturace.

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

Další informace o vytvoření efektu pomocí CompositionBrushes naleznete v tématu Efekty ve vizuální vrstvě

Malování pomocí CompositionBrush s použitou maskou s průhledností

CompositionMaskBrush maluje oblast pomocí CompositionBrush, na kterou je aplikována maska průhlednosti. Zdrojem neprůhledné masky může být jakýkoliv CompositionBrush typu CompositionColorBrush, CompositionLinearGradientBrush, CompositionSurfaceBrush, CompositionEffectBrush nebo CompositionNineGridBrush. Maska neprůhlednosti musí být zadána jako CompositionSurfaceBrush.

Následující obrázek a kód znázorňují SpriteVisual namalovaný pomocí CompositionMaskBrush. Zdrojem masky je CompositionLinearGradientBrush, který se maskuje tak, aby vypadal jako kruh pomocí obrázku kruhu jako masky.

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

Malování štětcem CompositionBrush pomocí NineGrid stretch

A CompositionNineGridBrush maluje oblast pomocí CompositionBrush, který je roztažen pomocí metafory devíti mřížek. Metafora s devíti mřížkami umožňuje roztáhnout hrany a rohy Objektu CompositionBrush odlišně než jeho střed. Zdroj devítimřížkového roztažení může být libovolný CompositionBrush typu CompositionColorBrush, CompositionSurfaceBrush nebo CompositionEffectBrush.

Následující kód ukazuje SpriteVisual vytvořen pomocí CompositionNineGridBrush. Zdrojem masky je CompositionSurfaceBrush, který je roztažen pomocí 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);

Malování pomocí pixelů pozadí

A CompositionBackdropBrush maluje oblast obsahem, který leží za ní. Funkce CompositionBackdropBrush se nikdy nepoužívá samostatně, ale místo toho se používá jako vstup do jiného objektu CompositionBrush jako EffectBrush. Například použitím CompositionBackdropBrush jako vstupu do efektu Rozostření můžete dosáhnout efektu matného skla.

Následující kód ukazuje malý vizuální strom pro vytvoření obrázku pomocí CompositionSurfaceBrush a zamrzlého skla nad obrázkem. Matné překryvné sklo je vytvořeno umístěním SpriteVisual naplněného EffectBrush přes obrázek. EffectBrush používá CompositionBackdropBrush jako vstup pro rozostření efekt.

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

Kombinování CompositionBrushes

Řada CompositionBrushes používá jiné CompositionBrushes jako vstupy. Například použití metody SetSourceParameter umožňuje nastavit jiný CompositionBrush jako vstup pro CompositionEffectBrush. Následující tabulka popisuje podporované kombinace CompositionBrushes. Všimněte si, že použití nepodporované kombinace vyvolá výjimku.

Kartáč	EffectBrush.SetSourceParameter()	MaskBrush.Mask	MaskBrush.Source	NineGridBrush.Source
CompositionColorBrush	ANO	ANO	ANO	ANO
CompositionLinear GradientBrush	ANO	ANO	ANO	NE
SloženíSurfaceBrush	ANO	ANO	ANO	ANO
CompositionEffectBrush	NE	NE	ANO	NE
CompositionMaskBrush (štětec pro složení masky)	NE	NE	NE	NE
CompositionNineGridBrush	ANO	ANO	ANO	NE
CompositionBackdropBrush	ANO	NE	NE	NE

Použití štětce XAML vs. CompositionBrush

Následující tabulka obsahuje seznam scénářů a to, zda je použití štětce XAML nebo Composition předepsáno při malování UIElement nebo SpriteVisual ve vaší aplikaci.

Poznámka:

Pokud je pro XAML UIElement navržen CompositionBrush, předpokládá se, že CompositionBrush je zabalen pomocí XamlCompositionBrushBase.

Scénář	XAML UIElement	Složení SpriteVisual
Malování oblasti plnou barvou	SolidColorBrush	CompositionColorBrush
Vykreslení oblasti animovanými barvami	SolidColorBrush	CompositionColorBrush
Vykreslení oblasti statickým přechodem	LinearGradientBrush	CompositionLinearGradientBrush
Vymalovat oblast s animovanými přechody	CompositionLinearGradientBrush	CompositionLinearGradientBrush
Vykreslení oblasti obrázkem	Imagebrush	CompositionSurfaceBrush
Vykreslení oblasti webovou stránkou	WebView2	N/A
Vykreslení oblasti obrázkem pomocí funkce NineGrid stretch	Ovládání obrázku	CompositionNineGridBrush
Vykreslení oblasti animovaným roztažením NineGridu	CompositionNineGridBrush	CompositionNineGridBrush
Vykreslit oblast pomocí swapchainu	SwapChainPanel	CompositionSurfaceBrush w/ swapchain interop
Vykreslení oblasti videem	MediaPlayerElement	CompositionSurfaceBrush s mediální interoperabilitou
Malování oblasti pomocí vlastního 2D výkresu	CanvasControl z Win2D	CompositionSurfaceBrush w/ Win2D interop
Namalovat oblast s neanimovanou maskou	Definování masky pomocí obrazců XAML	CompositionMaskBrush
"Vykreslete oblast s animovanou maskou"	CompositionMaskBrush	CompositionMaskBrush
Vykreslení oblasti animovaným efektem filtru	CompositionEffectBrush	CompositionEffectBrush
Vykreslení oblasti efektem použitým na pixely pozadí	CompositionBackdropBrush	CompositionBackdropBrush

Související témata

Kombinování nativního interopu DirectX a Direct2D pomocí BeginDraw a EndDraw

Propojení kartáče XAML s XamlCompositionBrushBase