Edit

PipelineBrush

  • Article

The PipelineBrush is a Brush which can render any custom Win2D/Composition effects chain.

Try it in the sample app

Syntax

<Border BorderBrush="Black" BorderThickness="1" VerticalAlignment="Center" HorizontalAlignment="Center" Width="400" Height="400">
  <Border.Background>
    <media:PipelineBrush Source="{effects:BackdropSource}">
      <effects:LuminanceToAlphaEffect/>
      <effects:OpacityEffect Value="0.4"/>
      <effects:BlendEffect
        Mode="Multiply"
        Source="{effects:BackdropSource}"/>
      <effects:BlurEffect Value="16"/>
      <effects:ShadeEffect Color="#FF222222" Intensity="0.2"/>
      <effects:BlendEffect
        Mode="Overlay"
        Placement="Foreground"
        Source="{effects:TileSource Uri=ms-appx:///Assets/BrushAssets/NoiseTexture.png}"/>
    </brushes:PipelineBrush>
  </Border.Background>
</Border>

Example Image

Pipeline brush

Properties

Property Type Description
Source PipelineBuilder The source for the current pipeline
Effects IList<IPipelineEffect> The collection of effects to use in the current pipeline.

Code behind support

The pipelines of effects that can be built from XAML through the PipelineBrush type can also be created directly from code behind through the PipelineBuilder class.

Brush brush =
  PipelineBuilder
    .FromBackdrop()
    .LuminanceToAlpha()
    .Opacity(0.4f)
    .Blend(
      PipelineBuilder.FromBackdrop(),
      BlendEffectMode.Multiply)
    .Blur(16)
    .Shade("#FF222222".ToColor(), 0.4f)
    .Blend(
      PipelineBuilder.FromTiles("/Assets/BrushAssets/NoiseTexture.png"),
      BlendEffectMode.Overlay,
      Placement.Foreground)
    .AsBrush();

Sample Project

PipelineBrush sample page Source. You can see this in action in the Windows Community Toolkit Sample App.

Requirements

Device family Universal, 10.0.17134.0 or higher
Namespace Microsoft.Toolkit.Uwp.UI.Media
NuGet package Microsoft.Toolkit.Uwp.UI.Media

API