Skip to content

Commit cfc5fcc

Browse files
michael-hawkermichael-hawker
authored
Merge pull request #294 from Sergio0694/feature/pipeline-effects
Pipeline effects
2 parents bf3a349 + 1afefb3 commit cfc5fcc

14 files changed

+236
-7
lines changed

‎docs/brushes/AcrylicBrush.md

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
---
2+
title: AcrylicBrush
3+
author: Sergio0694
4+
description: A composition brush that implements an acrylic effect with customizable parameters.
5+
keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, brush, backdrop, blur, win2d, composition
6+
---
7+
8+
# AcrylicBrush
9+
10+
The [AcrylicBrush](https://docs.microsoft.com/dotnet/api/microsoft.toolkit.uwp.ui.media.acrylicbrush) is a [Brush](https://docs.microsoft.com/uwp/api/windows.ui.xaml.media.brush) that implements an acrylic effect with customizable parameters.
11+
12+
> [!div class="nextstepaction"]
13+
> [Try it in the sample app](uwpct://Brushes?sample=AcrylicBrush)
14+
15+
## Syntax
16+
17+
```xml
18+
<Border BorderBrush="Black" BorderThickness="1" VerticalAlignment="Center" HorizontalAlignment="Center" Width="400" Height="400">
19+
<Border.Background>
20+
<media:AcrylicBrush
21+
BackgroundSource="Backdrop"
22+
TintColor="DimGray"
23+
TintOpacity="0.25"
24+
BlurAmount="20"
25+
TextureUri="ms-appx:///Assets/BrushAssets/NoiseTexture.png"/>
26+
</Border.Background>
27+
</Border>
28+
```
29+
30+
## Example Image
31+
32+
![Acrylic brush](../resources/images/Brushes/AcrylicBrush.jpg "Acrylic brush")
33+
34+
## Properties
35+
36+
| Property | Type | Description |
37+
| -- | -- | -- |
38+
| BackgroundSource | AcrylicBackgroundSource | The background source mode for the effect. |
39+
| BlurAmount | double | The blur amount for the effect (ignored when using HostBackdrop source). |
40+
| TintColor | Color | The tint for the effect. |
41+
| TintOpacity | double | The tint opacity factor for the effect. |
42+
| TextureUri | Uri | The `Uri` for the texture to use. |
43+
44+
## Code behind support
45+
46+
This brush can be also be built from code behind through the `PipelineBuilder` class.
47+
48+
```csharp
49+
Brush brush = PipelineBuilder.FromBackdropAcrylic(
50+
Colors.DimGray,
51+
0.25f,
52+
20,
53+
"/Assets/BrushAssets/NoiseTexture.png".ToAppxUri()).AsBrush();
54+
```
55+
56+
## Sample Project
57+
58+
[AcrylicBrush sample page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/AcrylicBrush). You can [see this in action](uwpct://Brushes?sample=AcrylicBrush) in the [Windows Community Toolkit Sample App](http://aka.ms/uwptoolkitapp).
59+
60+
## Requirements
61+
62+
| Device family | Universal, 10.0.17134.0 or higher |
63+
| --- | --- |
64+
| Namespace | Microsoft.Toolkit.Uwp.UI.Media |
65+
| NuGet package | [Microsoft.Toolkit.Uwp.UI.Media](https://www.nuget.org/packages/Microsoft.Toolkit.Uwp.UI.Media/) |
66+
67+
## API
68+
69+
* [AcrylicBrush source code](https://github.com/windows-toolkit/WindowsCommunityToolkit/blob/master/Microsoft.Toolkit.Uwp.UI.Media/Brushes/AcrylicBrush.cs)
70+
* [PipelineBuilder source code](https://github.com/windows-toolkit/WindowsCommunityToolkit/blob/master/Microsoft.Toolkit.Uwp.UI.Media/Pipelines/PipelineBuilder.cs)
71+
72+
## Related Topics
73+
74+
* [Win2D GaussianBlurEffect reference](http://microsoft.github.io/Win2D/html/T_Microsoft_Graphics_Canvas_Effects_GaussianBlurEffect.htm)
75+
* [XamlCompositionBrushBase Examples](https://docs.microsoft.com/uwp/api/windows.ui.xaml.media.xamlcompositionbrushbase#examples)

‎docs/brushes/BackdropBlurBrush.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ The [BackdropBlurBrush](https://docs.microsoft.com/dotnet/api/microsoft.toolkit.
1414
1515
## Syntax
1616

17-
```xaml
17+
```xml
1818
<Border BorderBrush="Black" BorderThickness="1" VerticalAlignment="Center" HorizontalAlignment="Center" Width="400" Height="400">
1919
<Border.Background>
2020
<media:BackdropBlurBrush Amount="3.0" />

‎docs/brushes/BackdropGammaTransferBrush.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ The [BackdropGammaTransferBrush](https://docs.microsoft.com/dotnet/api/microsoft
1616

1717
To apply a red hue:
1818

19-
```xaml
19+
```xml
2020
<Border BorderBrush="Black" BorderThickness="1" VerticalAlignment="Center" HorizontalAlignment="Center" Width="400" Height="400">
2121
<Border.Background>
2222
<media:BackdropGammaTransferBrush RedAmplitude="1.25" />

‎docs/brushes/BackdropInvertBrush.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ The [BackdropInvertBrush](https://docs.microsoft.com/dotnet/api/microsoft.toolki
1414
1515
## Syntax
1616

17-
```xaml
17+
```xml
1818
<Border BorderBrush="Black" BorderThickness="1" VerticalAlignment="Center" HorizontalAlignment="Center" Width="400" Height="400">
1919
<Border.Background>
2020
<media:BackdropInvertBrush />

‎docs/brushes/BackdropSaturationBrush.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ The [BackdropSaturationBrush](https://docs.microsoft.com/dotnet/api/microsoft.to
1414
1515
## Syntax
1616

17-
```xaml
17+
```xml
1818
<Border BorderBrush="Black" BorderThickness="1" VerticalAlignment="Center" HorizontalAlignment="Center" Width="400" Height="400">
1919
<Border.Background>
2020
<media:BackdropSaturationBrush Saturation="0.25" />

‎docs/brushes/BackdropSepiaBrush.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ The [BackdropSepiaBrush](https://docs.microsoft.com/dotnet/api/microsoft.toolkit
1414
1515
## Syntax
1616

17-
```xaml
17+
```xml
1818
<Border BorderBrush="Black" BorderThickness="1" VerticalAlignment="Center" HorizontalAlignment="Center" Width="400" Height="400">
1919
<Border.Background>
2020
<media:BackdropSepiaBrush Intensity="0.75" />

‎docs/brushes/ImageBlendBrush.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ The [ImageBlendBrush](https://docs.microsoft.com/dotnet/api/microsoft.toolkit.uw
1414
1515
## Syntax
1616

17-
```xaml
17+
```xml
1818
<Border Grid.Column="0">
1919
<Border.Background>
2020
<media:ImageBlendBrush

‎docs/brushes/PipelineBrush.md

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
---
2+
title: PipelineBrush
3+
author: Sergio0694
4+
description: A composition brush that can render any custom Win2D/Composition effects chain.
5+
keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, brush, backdrop, blur, win2d, composition
6+
---
7+
8+
# PipelineBrush
9+
10+
The [PipelineBrush](https://docs.microsoft.com/dotnet/api/microsoft.toolkit.uwp.ui.media.pipelinebrush) is a [Brush](https://docs.microsoft.com/uwp/api/windows.ui.xaml.media.brush) which can render any custom Win2D/Composition effects chain.
11+
12+
> [!div class="nextstepaction"]
13+
> [Try it in the sample app](uwpct://Brushes?sample=PipelineBrush)
14+
15+
## Syntax
16+
17+
```xml
18+
<Border BorderBrush="Black" BorderThickness="1" VerticalAlignment="Center" HorizontalAlignment="Center" Width="400" Height="400">
19+
<Border.Background>
20+
<media:PipelineBrush Source="{effects:BackdropSource}">
21+
<effects:LuminanceToAlphaEffect/>
22+
<effects:OpacityEffect Value="0.4"/>
23+
<effects:BlendEffect
24+
Mode="Multiply"
25+
Source="{effects:BackdropSource}"/>
26+
<effects:BlurEffect Value="16"/>
27+
<effects:ShadeEffect Color="#FF222222" Intensity="0.2"/>
28+
<effects:BlendEffect
29+
Mode="Overlay"
30+
Placement="Foreground"
31+
Source="{effects:TileSource Uri=ms-appx:///Assets/BrushAssets/NoiseTexture.png}"/>
32+
</brushes:PipelineBrush>
33+
</Border.Background>
34+
</Border>
35+
```
36+
37+
## Example Image
38+
39+
![Pipeline brush](../resources/images/Brushes/PipelineBrush.jpg "Pipeline brush")
40+
41+
## Properties
42+
43+
| Property | Type | Description |
44+
| -- | -- | -- |
45+
| Source | PipelineBuilder | The source for the current pipeline |
46+
| Effects | IList<IPipelineEffect> | The collection of effects to use in the current pipeline. |
47+
48+
## Code behind support
49+
50+
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.
51+
52+
```csharp
53+
Brush brush =
54+
PipelineBuilder
55+
.FromBackdrop()
56+
.LuminanceToAlpha()
57+
.Opacity(0.4f)
58+
.Blend(
59+
PipelineBuilder.FromBackdrop(),
60+
BlendEffectMode.Multiply)
61+
.Blur(16)
62+
.Shade("#FF222222".ToColor(), 0.4f)
63+
.Blend(
64+
PipelineBuilder.FromTiles("/Assets/BrushAssets/NoiseTexture.png"),
65+
BlendEffectMode.Overlay,
66+
Placement.Foreground)
67+
.AsBrush();
68+
```
69+
70+
## Sample Project
71+
72+
[PipelineBrush sample page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/PipelineBrush). You can [see this in action](uwpct://Brushes?sample=PipelineBrush) in the [Windows Community Toolkit Sample App](http://aka.ms/uwptoolkitapp).
73+
74+
## Requirements
75+
76+
| Device family | Universal, 10.0.17134.0 or higher |
77+
| --- | --- |
78+
| Namespace | Microsoft.Toolkit.Uwp.UI.Media |
79+
| NuGet package | [Microsoft.Toolkit.Uwp.UI.Media](https://www.nuget.org/packages/Microsoft.Toolkit.Uwp.UI.Media/) |
80+
81+
## API
82+
83+
* [PipelineBrush source code](https://github.com/windows-toolkit/WindowsCommunityToolkit/blob/master/Microsoft.Toolkit.Uwp.UI.Media/Brushes/PipelineBrush.cs)
84+
* [PipelineBuilder source code](https://github.com/windows-toolkit/WindowsCommunityToolkit/blob/master/Microsoft.Toolkit.Uwp.UI.Media/Pipelines/PipelineBuilder.cs)
85+
86+
## Related Topics
87+
88+
* [Win2D GaussianBlurEffect reference](http://microsoft.github.io/Win2D/html/T_Microsoft_Graphics_Canvas_Effects_GaussianBlurEffect.htm)
89+
* [XamlCompositionBrushBase Examples](https://docs.microsoft.com/uwp/api/windows.ui.xaml.media.xamlcompositionbrushbase#examples)

‎docs/brushes/RadialGradientBrush.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ The Animation or Binding of *GradientStop* `Offset` and `Color` properties is no
2222

2323
## Syntax
2424

25-
```xaml
25+
```xml
2626
<Rectangle Width="300" Height="300" Stroke="Black" StrokeThickness="2">
2727
<Rectangle.Fill>
2828
<media:RadialGradientBrush

‎docs/brushes/TilesBrush.md

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
---
2+
title: TilesBrush
3+
author: Sergio0694
4+
description: A composition brush that displays a tiled image.
5+
keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, brush, backdrop, blur, win2d, composition
6+
---
7+
8+
# TilesBrush
9+
10+
The [TilesBrush](https://docs.microsoft.com/dotnet/api/microsoft.toolkit.uwp.ui.media.tilesbrush) is a [Brush](https://docs.microsoft.com/uwp/api/windows.ui.xaml.media.brush) that that displays a tiled image.
11+
12+
> [!div class="nextstepaction"]
13+
> [Try it in the sample app](uwpct://Brushes?sample=TilesBrush)
14+
15+
## Syntax
16+
17+
```xml
18+
<Border BorderBrush="Black" BorderThickness="1" VerticalAlignment="Center" HorizontalAlignment="Center" Width="400" Height="400">
19+
<Border.Background>
20+
<brushes:TilesBrush TextureUri="ms-appx:///Assets/BrushAssets/TileTexture.png"/>
21+
</Border.Background>
22+
</Border>
23+
```
24+
25+
## Example Image
26+
27+
![Tiles brush](../resources/images/Brushes/TilesBrush.jpg "Tiles brush")
28+
29+
## Properties
30+
31+
| Property | Type | Description |
32+
| -- | -- | -- |
33+
| TextureUri | Uri | The `Uri` for the texture to use. |
34+
| DpiMode | DpiMode | The DPI mode used to render the texture (the default is `DpiMode.DisplayDpiWith96AsLowerBound`) |
35+
36+
## Code behind support
37+
38+
This brush can be also be built from code behind through the `PipelineBuilder` class.
39+
40+
```csharp
41+
Brush brush = PipelineBuilder.FromTiles("/Assets/BrushAssets/NoiseTexture.png".ToAppxUri()).AsBrush();
42+
```
43+
44+
## Sample Project
45+
46+
[TilesBrush sample page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TilesBrush). You can [see this in action](uwpct://Brushes?sample=TilesBrush) in the [Windows Community Toolkit Sample App](http://aka.ms/uwptoolkitapp).
47+
48+
## Requirements
49+
50+
| Device family | Universal, 10.0.17134.0 or higher |
51+
| --- | --- |
52+
| Namespace | Microsoft.Toolkit.Uwp.UI.Media |
53+
| NuGet package | [Microsoft.Toolkit.Uwp.UI.Media](https://www.nuget.org/packages/Microsoft.Toolkit.Uwp.UI.Media/) |
54+
55+
## API
56+
57+
* [TilesBrush source code](https://github.com/windows-toolkit/WindowsCommunityToolkit/blob/master/Microsoft.Toolkit.Uwp.UI.Media/Brushes/TilesBrush.cs)
58+
* [PipelineBuilder source code](https://github.com/windows-toolkit/WindowsCommunityToolkit/blob/master/Microsoft.Toolkit.Uwp.UI.Media/Pipelines/PipelineBuilder.cs)
59+
60+
## Related Topics
61+
62+
* [XamlCompositionBrushBase Examples](https://docs.microsoft.com/uwp/api/windows.ui.xaml.media.xamlcompositionbrushbase#examples)

‎docs/resources/images/Brushes/AcrylicBrush.jpg

280 KB
Loading

‎docs/resources/images/Brushes/PipelineBrush.jpg

299 KB
Loading

‎docs/resources/images/Brushes/TilesBrush.jpg

233 KB
Loading

‎docs/toc.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,13 +89,16 @@
8989
## [Scale](animations/Scale.md)
9090

9191
# Brushes
92+
## [AcrylicBrush](brushes/AcrylicBrush.md)
9293
## [BackdropBlurBrush](brushes/BackdropBlurBrush.md)
9394
## [BackdropGammaTransferBrush](brushes/BackdropGammaTransferBrush.md)
9495
## [BackdropInvertBrush](brushes/BackdropInvertBrush.md)
9596
## [BackdropSaturationBrush](brushes/BackdropSaturationBrush.md)
9697
## [BackdropSepiaBrush](brushes/BackdropSepiaBrush.md)
9798
## [ImageBlendBrush](brushes/ImageBlendBrush.md)
99+
## [PipelineBrush](brushes/PipelineBrush.md)
98100
## [RadialGradientBrush](brushes/RadialGradientBrush.md)
101+
## [TilesBrush](brushes/TilesBrush.md)
99102

100103
# Extensions
101104
## [ArrayExtensions](extensions/ArrayExtensions.md)

0 commit comments

Comments
 (0)