Win2D pipeline brushes

Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj

@@ -135,6 +135,8 @@
   </ItemGroup>
   <ItemGroup>
     <!-- A reference to the entire .Net Framework and Windows SDK are automatically included -->
+    <Content Include="Assets\BrushAssets\TileTexture.png" />
+    <Content Include="Assets\BrushAssets\NoiseTexture.png" />
     <Content Include="Assets\mslogo.png" />
     <Content Include="Assets\NotificationAssets\Cloudy-Square.png" />
     <Content Include="Assets\NotificationAssets\Cloudy.png" />
@@ -269,8 +271,11 @@
     <Content Include="Icons\More.png" />
     <Content Include="Icons\Notifications.png" />
     <Content Include="Icons\Services.png" />
+    <Content Include="SamplePages\TilesBrush\TilesBrush.png" />
     <Content Include="SamplePages\Eyedropper\Eyedropper.png" />
     <Content Include="SamplePages\OnDevice\OnDevice.png" />
+    <Content Include="SamplePages\AcrylicBrush\AcrylicBrush.png" />
+    <Content Include="SamplePages\PipelineBrush\PipelineBrush.png" />
     <Content Include="SamplePages\RemoteDeviceHelper\RemoteDeviceHelper.png" />
     <Content Include="SamplePages\ImageCropper\ImageCropper.png" />
     <Content Include="SamplePages\StaggeredLayout\StaggeredLayout.png" />
@@ -511,6 +516,9 @@
     </Content>
     <Content Include="SamplePages\Weibo Service\WeiboCode.bind" />
     <Compile Include="Common\TextBlockHyperlinkBehavior.cs" />
+    <Compile Include="SamplePages\TilesBrush\TilesBrushPage.xaml.cs">
+      <DependentUpon>TilesBrushPage.xaml</DependentUpon>
+    </Compile>
     <Compile Include="SamplePages\Eyedropper\EyedropperPage.xaml.cs">
       <DependentUpon>EyedropperPage.xaml</DependentUpon>
     </Compile>
@@ -529,6 +537,12 @@
     <Compile Include="SamplePages\OnDevice\OnDevicePage.xaml.cs">
       <DependentUpon>OnDevicePage.xaml</DependentUpon>
     </Compile>
+    <Compile Include="SamplePages\AcrylicBrush\AcrylicBrushPage.xaml.cs">
+      <DependentUpon>AcrylicBrushPage.xaml</DependentUpon>
+    </Compile>
+    <Compile Include="SamplePages\PipelineBrush\PipelineBrushPage.xaml.cs">
+      <DependentUpon>PipelineBrushPage.xaml</DependentUpon>
+    </Compile>
     <Compile Include="SamplePages\RemoteDeviceHelper\RemoteDeviceHelperPage.xaml.cs">
       <DependentUpon>RemoteDeviceHelperPage.xaml</DependentUpon>
     </Compile>
@@ -584,9 +598,12 @@
     <Content Include="SamplePages\Eyedropper\EyedropperXaml.bind" />
     <Content Include="SamplePages\Eyedropper\EyedropperCode.bind" />
     <Content Include="SamplePages\TokenizingTextBox\TokenizingTextBoxCode.bind" />
+    <Content Include="SamplePages\PipelineBrush\PipelineBrushXaml.bind" />
+    <Content Include="SamplePages\PipelineBrush\PipelineBrushCode.bind" />
+    <Content Include="SamplePages\AcrylicBrush\AcrylicBrushXaml.bind" />
+    <Content Include="SamplePages\TilesBrush\TilesBrushXaml.bind" />
     <Content Include="SamplePages\IconExtensions\IconExtensionsXaml.bind" />
     <Content Include="SamplePages\WrapLayout\WrapLayout.bind" />
-    <Content Include="SamplePages\StaggeredLayout\StaggeredLayout.bind" />
     <Content Include="SamplePages\ObservableGroup\ObservableGroup.bind" />
     <Content Include="SamplePages\Triggers\CompareStateTrigger.bind" />
     <Content Include="SamplePages\Triggers\IsEqualStateTrigger.bind" />
@@ -979,6 +996,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="SamplePages\TilesBrush\TilesBrushPage.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </Page>
     <Page Include="SamplePages\Eyedropper\EyedropperPage.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
@@ -1006,6 +1027,14 @@
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
     </Page>
+    <Page Include="SamplePages\AcrylicBrush\AcrylicBrushPage.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </Page>
+    <Page Include="SamplePages\PipelineBrush\PipelineBrushPage.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="SamplePages\RemoteDeviceHelper\RemoteDeviceHelperPage.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/AcrylicBrush/AcrylicBrushPage.xaml

@@ -0,0 +1,18 @@
+<Page
+    x:Class="Microsoft.Toolkit.Uwp.SampleApp.SamplePages.AcrylicBrushPage"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:brushes="using:Microsoft.Toolkit.Uwp.UI.Media"
+    mc:Ignorable="d">
+
+    <!-- Shallow Copy -->
+    <Grid>
+        <Rectangle>
+            <Rectangle.Fill>
+                <brushes:AcrylicBrush />
+            </Rectangle.Fill>
+        </Rectangle>
+    </Grid>
+</Page>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/AcrylicBrush/AcrylicBrushPage.xaml.cs

@@ -0,0 +1,22 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using Windows.UI.Xaml.Controls;
+
+namespace Microsoft.Toolkit.Uwp.SampleApp.SamplePages
+{
+    /// <summary>
+    /// A page that shows how to use the acrylic brushe.
+    /// </summary>
+    public sealed partial class AcrylicBrushPage : Page
+    {
+        /// <summary>
+        /// Initializes a new instance of the <see cref="AcrylicBrushPage"/> class.
+        /// </summary>
+        public AcrylicBrushPage()
+        {
+            this.InitializeComponent();
+        }
+    }
+}

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/AcrylicBrush/AcrylicBrushXaml.bind

@@ -0,0 +1,32 @@
+<Page
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:brushes="using:Microsoft.Toolkit.Uwp.UI.Media"
+    xmlns:effects="using:Microsoft.Toolkit.Uwp.UI.Media.Effects"
+    mc:Ignorable="d">
+
+  <Grid>
+    <Image Source="ms-appx:///Assets/Photos/BigFourSummerHeat.jpg"/>
+    <Grid>
+      <Grid.ColumnDefinitions>
+        <ColumnDefinition Width="*" />
+        <ColumnDefinition Width="*" />
+      </Grid.ColumnDefinitions>
+      <ProgressRing IsActive="True" Grid.ColumnSpan="2"
+                    VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="Red" Width="200" Height="200"/>
+      <Border BorderBrush="Black" BorderThickness="1"
+              Grid.Column="2"
+              Height="400">
+        <Border.Background>
+          <brushes:AcrylicBrush Source="@[Source:Enum:AcrylicBackgroundSource.Backdrop]"
+                                Tint="@[Tint:Brush:DarkCyan]"
+                                TintMix="@[TintMix:DoubleSlider:0.2:0.0-1.0]"
+                                BlurAmount="@[BlurAmount:DoubleSlider:12:0.0-32.0]"
+                                TextureUri="ms-appx:///Assets/BrushAssets/NoiseTexture.png"/>
+        </Border.Background>
+      </Border>
+    </Grid>
+  </Grid>
+</Page>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/PipelineBrush/PipelineBrushCode.bind

@@ -0,0 +1,20 @@
+// Defines a brush like the one shown in the XAML code, but via C# code.
+using Microsoft.Toolkit.Uwp.UI.Media;
+using Microsoft.Toolkit.Uwp.UI.Media.Effects;
+using Windows.UI.Xaml.Media;
+
+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.Background)
+    .AsBrush();

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/PipelineBrush/PipelineBrushPage.xaml

@@ -0,0 +1,84 @@
+<Page
+    x:Class="Microsoft.Toolkit.Uwp.SampleApp.SamplePages.PipelineBrushPage"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:media="using:Microsoft.Toolkit.Uwp.UI.Media"
+    xmlns:effects="using:Microsoft.Toolkit.Uwp.UI.Media.Effects"
+    mc:Ignorable="d">
+
+    <!--Shallow copy-->
+    <Grid>
+        <Image Source="ms-appx:///Assets/Photos/BigFourSummerHeat.jpg"/>
+        <Grid>
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="*" />
+                <ColumnDefinition Width="*" />
+            </Grid.ColumnDefinitions>
+            <ProgressRing IsActive="True" Grid.ColumnSpan="2"
+                          VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="Red" Width="200" Height="200"/>
+            <Border>
+                <Border.Background>
+                    <media:PipelineBrush>
+                        <media:PipelineBrush.Effects>
+                            <effects:AcrylicEffect/>
+                            <effects:BlendEffect>
+                                <effects:BlendEffect.Input>
+                                    <effects:BackdropEffect Source="Backdrop"/>
+                                </effects:BlendEffect.Input>
+                            </effects:BlendEffect>
+                            <effects:BlurEffect/>
+                            <effects:ExposureEffect/>
+                            <effects:GrayscaleEffect/>
+                            <effects:HueRotationEffect/>
+                        </media:PipelineBrush.Effects>
+                    </media:PipelineBrush>
+                </Border.Background>
+            </Border>
+            <Border>
+                <Border.Background>
+                    <media:PipelineBrush>
+                        <media:PipelineBrush.Effects>
+                            <effects:AcrylicEffect/>
+                            <effects:HueRotationEffect/>
+                            <effects:BlendEffect>
+                                <effects:BlendEffect.Input>
+                                    <effects:ImageEffect Uri="ms-appx:///Assets/BrushAssets/NoiseTexture.png"/>
+                                </effects:BlendEffect.Input>
+                            </effects:BlendEffect>
+                            <effects:InvertEffect/>
+                            <effects:LuminanceToAlphaEffect/>
+                            <effects:OpacityEffect/>
+                            <effects:SaturationEffect/>
+                            <effects:SepiaEffect/>
+                        </media:PipelineBrush.Effects>
+                    </media:PipelineBrush>
+                </Border.Background>
+            </Border>
+            <Border>
+                <Border.Background>
+                    <media:PipelineBrush>
+                        <media:PipelineBrush.Effects>
+                            <effects:AcrylicEffect/>
+                            <effects:SepiaEffect/>
+                            <effects:ShadeEffect/>
+                            <effects:BlendEffect>
+                                <effects:BlendEffect.Input>
+                                    <effects:SolidColorEffect/>
+                                </effects:BlendEffect.Input>
+                            </effects:BlendEffect>
+                            <effects:TemperatureAndTintEffect/>
+                            <effects:BlendEffect>
+                                <effects:BlendEffect.Input>
+                                    <effects:TileEffect Uri="ms-appx:///Assets/BrushAssets/NoiseTexture.png"/>
+                                </effects:BlendEffect.Input>
+                            </effects:BlendEffect>
+                            <effects:TintEffect/>
+                        </media:PipelineBrush.Effects>
+                    </media:PipelineBrush>
+                </Border.Background>
+            </Border>
+        </Grid>
+    </Grid>
+</Page>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/PipelineBrush/PipelineBrushPage.xaml.cs

@@ -0,0 +1,22 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using Windows.UI.Xaml.Controls;
+
+namespace Microsoft.Toolkit.Uwp.SampleApp.SamplePages
+{
+    /// <summary>
+    /// A page that shows how to use the pipeline brushes.
+    /// </summary>
+    public sealed partial class PipelineBrushPage : Page
+    {
+        /// <summary>
+        /// Initializes a new instance of the <see cref="PipelineBrushPage"/> class.
+        /// </summary>
+        public PipelineBrushPage()
+        {
+            this.InitializeComponent();
+        }
+    }
+}

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/PipelineBrush/PipelineBrushXaml.bind

@@ -0,0 +1,51 @@
+<Page
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:brushes="using:Microsoft.Toolkit.Uwp.UI.Media"
+    xmlns:effects="using:Microsoft.Toolkit.Uwp.UI.Media.Effects"
+    mc:Ignorable="d">
+
+  <Grid>
+    <Image Source="ms-appx:///Assets/Photos/BigFourSummerHeat.jpg"/>
+    <Grid>
+      <Grid.ColumnDefinitions>
+        <ColumnDefinition Width="*" />
+        <ColumnDefinition Width="*" />
+      </Grid.ColumnDefinitions>
+      <ProgressRing IsActive="True" Grid.ColumnSpan="2"
+                    VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="Red" Width="200" Height="200"/>
+      <Border BorderBrush="Black" BorderThickness="1"
+              Grid.Column="2"
+              Height="400">
+        <Border.Background>
+          <brushes:PipelineBrush>
+            <brushes:PipelineBrush.Effects>
+              <effects:BackdropEffect Source="Backdrop"/>
+              <effects:LuminanceToAlphaEffect/>
+              <effects:OpacityEffect Value="0.4"/>
+              <effects:BlendEffect Mode="Multiply">
+                <effects:BlendEffect.Input>
+                  <effects:BackdropEffect Source="Backdrop"/>
+                </effects:BlendEffect.Input>
+              </effects:BlendEffect>
+              <effects:BlurEffect Value="16"/>
+              <effects:ShadeEffect Color="#FF222222" Intensity="0.2"/>
+              <effects:BlendEffect Mode="Overlay" Placement="Background">
+                <effects:BlendEffect.Input>
+                  <effects:TileEffect Uri="ms-appx:///Assets/BrushAssets/NoiseTexture.png"/>
+                </effects:BlendEffect.Input>
+              </effects:BlendEffect>
+              <effects:BlendEffect Mode="Overlay" Placement="Background">
+                <effects:BlendEffect.Input>
+                  <effects:ImageEffect Uri="ms-appx:///SamplePages/DropShadowPanel/Unicorn.png"/>
+                </effects:BlendEffect.Input>
+              </effects:BlendEffect>
+            </brushes:PipelineBrush.Effects>
+          </brushes:PipelineBrush>
+        </Border.Background>
+      </Border>
+    </Grid>
+  </Grid>
+</Page>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TilesBrush/TilesBrushPage.xaml

@@ -0,0 +1,18 @@
+<Page
+    x:Class="Microsoft.Toolkit.Uwp.SampleApp.SamplePages.TilesBrushPage"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:brushes="using:Microsoft.Toolkit.Uwp.UI.Media"
+    mc:Ignorable="d">
+
+    <!-- Shallow Copy -->
+    <Grid>
+        <Rectangle>
+            <Rectangle.Fill>
+                <brushes:TilesBrush />
+            </Rectangle.Fill>
+        </Rectangle>
+    </Grid>
+</Page>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TilesBrush/TilesBrushPage.xaml.cs

@@ -0,0 +1,22 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using Windows.UI.Xaml.Controls;
+
+namespace Microsoft.Toolkit.Uwp.SampleApp.SamplePages
+{
+    /// <summary>
+    /// A page that shows how to use the tiles brushe.
+    /// </summary>
+    public sealed partial class TilesBrushPage : Page
+    {
+        /// <summary>
+        /// Initializes a new instance of the <see cref="TilesBrushPage"/> class.
+        /// </summary>
+        public TilesBrushPage()
+        {
+            this.InitializeComponent();
+        }
+    }
+}