Erinwoo/media samples

components/Media/samples/Brushes.md

@@ -0,0 +1,70 @@
+---
+title: Brushes
+author: erinwoo  
+description: Brush effects that can be applied to images and backgrounds.
+keywords: brush, acrylic, acrylicbrush, backdrop, blur, gamma, transfer, invert, saturation, sepia, tiles, tile, image, blend, brushes
+dev_langs:
+  - csharp
+category: Xaml
+subcategory: Effects
+discussion-id: 0
+issue-id: 0
+icon: Assets/MediaBrushes.png
+---
+
+A brush object is used to paint graphical objects in XAML and can be layered with other visual elements such as images and backgrounds. For examples and further explanation of drawing concepts represented by Brush, see [Use brushes](https://learn.microsoft.com/en-us/windows/uwp/graphics/using-brushes).
+
+## AcrylicBrush
+
+Acrylic is a type of Brush that creates a translucent texture. You can apply acrylic to app surfaces to add depth and help establish a visual hierarchy.
+To learn more about the acrylic material in Windows: [link](https://learn.microsoft.com/en-us/windows/apps/design/style/acrylic)
+
+> [!SAMPLE AcrylicBrushSample]
+
+#### *UWP only:*
+There are two modes for setting the BackgroundSource property when using an `AcrylicBrush`.
+Setting it to `Backdrop` results in the acrylic effect being applied to whatever is *behind the brush* in the application.
+
+Setting BackgroundSource to `HostBackdrop` results in the acrylic effect being applied *behind the current application*.
+
+## BackdropBlurBrush
+
+A brush that blurs the background in the application.
+
+> [!SAMPLE BackdropBlurBrushSample]
+
+## BackdropGammaTransferBrush
+
+A brush which modifies the color values of the brush's background in the application. Map the color intensities of an image using a gamma function created using an amplitude, exponent, and offset you provide for each channel.
+
+> [!SAMPLE BackdropGammaTransferBrushSample]
+
+## BackdropInvertBrush
+
+A brush that inverts the colors of the brush's background in the application.
+
+> [!SAMPLE BackdropInvertBrushSample]
+
+## BackdropSaturationBrush
+
+A brush that can increase or decrease the saturation of the brush's background in the application. The `Saturation` property specifies a double value for the amount of Saturation to apply from 0.0 - 1.0. Zero being monochrome, and one being fully saturated. The default is 0.5.
+
+> [!SAMPLE BackdropSaturationBrushSample]
+
+## BackdropSepiaBrush
+
+A brush that applies the sepia effect to the brush's background. The `Intensity` property specifies a double value for the amount of Sepia to apply from 0.0 - 1.0. Zero being none, and one being full Sepia effect. The default is 0.5.
+
+> [!SAMPLE BackdropSepiaBrushSample]
+
+## ImageBlendBrush
+
+A brush that blends the provided image with whatever is behind it in the application with the provided blend mode. The ImageBlendMode property specifies how the image should be blended with the backdrop. More info about the effect modes can be found [here](https://microsoft.github.io/Win2D/WinUI2/html/T_Microsoft_Graphics_Canvas_Effects_BlendEffectMode.htm).
+
+> [!SAMPLE ImageBlendBrushSample]
+
+## TilesBrush
+
+A brush can be used to display a tiled image as a background.
+
+> [!SAMPLE TilesBrushSample]

components/Media/samples/Brushes/AcrylicBrushSample.xaml

@@ -0,0 +1,35 @@
+<Page x:Class="MediaExperiment.Samples.Brushes.AcrylicBrushSample"
+      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:CommunityToolkit.WinUI.Media"
+      xmlns:ui="using:CommunityToolkit.WinUI"
+      mc:Ignorable="d">
+
+    <StackPanel VerticalAlignment="Center"
+                Spacing="32">
+        <Grid>
+            <!--  Background image  -->
+            <Image Height="400"
+                   Source="ms-appx:///Assets/Bloom.jpg" />
+            <!--  Brush area  -->
+            <Border Width="550"
+                    Height="300"
+                    HorizontalAlignment="Center"
+                    VerticalAlignment="Center"
+                    BorderBrush="Black"
+                    BorderThickness=".5">
+                <Border.Background>
+                    <media:AcrylicBrush BlurAmount="15"
+                                        TintColor="Black"
+                                        TintOpacity=".6" />
+                </Border.Background>
+                <!--  Foreground image  -->
+                <Image Height="100"
+                       VerticalAlignment="Center"
+                       Source="ms-appx:///Assets/BrushAssets/Trex.png" />
+            </Border>
+        </Grid>
+    </StackPanel>
+</Page>

components/Media/samples/Brushes/AcrylicBrushSample.xaml.cs

@@ -0,0 +1,16 @@
+// 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 CommunityToolkit.WinUI.Media;
+
+namespace MediaExperiment.Samples.Brushes;
+
+[ToolkitSample(id: nameof(AcrylicBrushSample), "AcrylicBrush", description: $"A sample for showing how to apply a {nameof(CommunityToolkit.WinUI.Media.AcrylicBrush)} effect to a background.")]
+public sealed partial class AcrylicBrushSample : Page
+{
+    public AcrylicBrushSample()
+    {
+        this.InitializeComponent();
+    }
+}

components/Media/samples/Brushes/BackdropBlurBrushSample.xaml

@@ -0,0 +1,33 @@
+<Page x:Class="MediaExperiment.Samples.Brushes.BackdropBlurBrushSample"
+      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:CommunityToolkit.WinUI.Media"
+      xmlns:ui="using:CommunityToolkit.WinUI"
+      mc:Ignorable="d">
+
+    <StackPanel VerticalAlignment="Center"
+                Spacing="32">
+        <Grid>
+            <!--  Background image  -->
+            <Image Height="400"
+                   Source="ms-appx:///Assets/Bloom.jpg" />
+            <!--  Brush area  -->
+            <Border Width="550"
+                    Height="300"
+                    HorizontalAlignment="Center"
+                    VerticalAlignment="Center"
+                    BorderBrush="Black"
+                    BorderThickness=".5">
+                <Border.Background>
+                    <media:BackdropBlurBrush Amount="5.0" />
+                </Border.Background>
+            </Border>
+            <!--  Foreground image  -->
+            <Image Height="100"
+                   VerticalAlignment="Center"
+                   Source="ms-appx:///Assets/BrushAssets/Trex.png" />
+        </Grid>
+    </StackPanel>
+</Page>

components/Media/samples/Brushes/BackdropBlurBrushSample.xaml.cs

@@ -0,0 +1,16 @@
+// 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 CommunityToolkit.WinUI.Media;
+
+namespace MediaExperiment.Samples.Brushes;
+
+[ToolkitSample(id: nameof(BackdropBlurBrushSample), "BackdropBlurBrush", description: $"A sample that uses a {nameof(BackdropBlurBrush)} to blur whatever is behind the application.")]
+public sealed partial class BackdropBlurBrushSample : Page
+{
+    public BackdropBlurBrushSample()
+    {
+        this.InitializeComponent();
+    }
+}

components/Media/samples/Brushes/BackdropGammaTransferBrushSample.xaml

@@ -0,0 +1,30 @@
+<Page x:Class="MediaExperiment.Samples.Brushes.BackdropGammaTransferBrushSample"
+      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:CommunityToolkit.WinUI.Media"
+      xmlns:ui="using:CommunityToolkit.WinUI"
+      mc:Ignorable="d">
+
+    <StackPanel VerticalAlignment="Center"
+                Spacing="32">
+        <Grid>
+            <!--  Background image  -->
+            <Image Height="400"
+                   Source="ms-appx:///Assets/Bloom.jpg" />
+            <!--  Brush area  -->
+            <Border Width="550"
+                    Height="300"
+                    HorizontalAlignment="Center"
+                    VerticalAlignment="Center"
+                    BorderBrush="Black"
+                    BorderThickness=".5">
+                <Border.Background>
+                    <media:BackdropGammaTransferBrush AlphaOffset=".2"
+                                                      RedAmplitude="10" />
+                </Border.Background>
+            </Border>
+        </Grid>
+    </StackPanel>
+</Page>

components/Media/samples/Brushes/BackdropGammaTransferBrushSample.xaml.cs

@@ -0,0 +1,16 @@
+// 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 CommunityToolkit.WinUI.Media;
+
+namespace MediaExperiment.Samples.Brushes;
+
+[ToolkitSample(id: nameof(BackdropGammaTransferBrushSample), "BackdropGammaTransferBrush", description: $"A sample for showing how to apply a {nameof(CommunityToolkit.WinUI.Media.BackdropGammaTransferBrush)} effect to a background.")]
+public sealed partial class BackdropGammaTransferBrushSample : Page
+{
+    public BackdropGammaTransferBrushSample()
+    {
+        this.InitializeComponent();
+    }
+}

components/Media/samples/Brushes/BackdropInvertBrushSample.xaml

@@ -0,0 +1,29 @@
+<Page x:Class="MediaExperiment.Samples.Brushes.BackdropInvertBrushSample"
+      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:CommunityToolkit.WinUI.Media"
+      xmlns:ui="using:CommunityToolkit.WinUI"
+      mc:Ignorable="d">
+
+    <StackPanel VerticalAlignment="Center"
+                Spacing="32">
+        <Grid>
+            <!--  Background image  -->
+            <Image Height="400"
+                   Source="ms-appx:///Assets/Bloom.jpg" />
+            <!--  Brush area  -->
+            <Border Width="550"
+                    Height="300"
+                    HorizontalAlignment="Center"
+                    VerticalAlignment="Center"
+                    BorderBrush="Black"
+                    BorderThickness=".5">
+                <Border.Background>
+                    <media:BackdropInvertBrush />
+                </Border.Background>
+            </Border>
+        </Grid>
+    </StackPanel>
+</Page>

components/Media/samples/Brushes/BackdropInvertBrushSample.xaml.cs

@@ -0,0 +1,16 @@
+// 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 CommunityToolkit.WinUI.Media;
+
+namespace MediaExperiment.Samples.Brushes;
+
+[ToolkitSample(id: nameof(BackdropInvertBrushSample), "BackdropGammaTransferBrush", description: $"A sample for showing how to apply a {nameof(BackdropInvertBrush)} effect to a background.")]
+public sealed partial class BackdropInvertBrushSample : Page
+{
+    public BackdropInvertBrushSample()
+    {
+        this.InitializeComponent();
+    }
+}

components/Media/samples/Brushes/BackdropSaturationBrushSample.xaml

@@ -0,0 +1,29 @@
+<Page x:Class="MediaExperiment.Samples.Brushes.BackdropSaturationBrushSample"
+      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:CommunityToolkit.WinUI.Media"
+      xmlns:ui="using:CommunityToolkit.WinUI"
+      mc:Ignorable="d">
+
+    <StackPanel VerticalAlignment="Center"
+                Spacing="32">
+        <Grid>
+            <!--  Background image  -->
+            <Image Height="400"
+                   Source="ms-appx:///Assets/Bloom.jpg" />
+            <!--  Brush area  -->
+            <Border Width="550"
+                    Height="300"
+                    HorizontalAlignment="Center"
+                    VerticalAlignment="Center"
+                    BorderBrush="Black"
+                    BorderThickness=".5">
+                <Border.Background>
+                    <media:BackdropSaturationBrush Saturation=".2" />
+                </Border.Background>
+            </Border>
+        </Grid>
+    </StackPanel>
+</Page>

components/Media/samples/Brushes/BackdropSaturationBrushSample.xaml.cs

@@ -0,0 +1,16 @@
+// 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 CommunityToolkit.WinUI.Media;
+
+namespace MediaExperiment.Samples.Brushes;
+
+[ToolkitSample(id: nameof(BackdropSaturationBrushSample), "BackdropGammaTransferBrush", description: $"A sample for showing how to apply a {nameof(BackdropSaturationBrush)} effect to a background.")]
+public sealed partial class BackdropSaturationBrushSample : Page
+{
+    public BackdropSaturationBrushSample()
+    {
+        this.InitializeComponent();
+    }
+}

components/Media/samples/Brushes/BackdropSepiaBrushSample.xaml

@@ -0,0 +1,29 @@
+<Page x:Class="MediaExperiment.Samples.Brushes.BackdropSepiaBrushSample"
+      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:CommunityToolkit.WinUI.Media"
+      xmlns:ui="using:CommunityToolkit.WinUI"
+      mc:Ignorable="d">
+
+    <StackPanel VerticalAlignment="Center"
+                Spacing="32">
+        <Grid>
+            <!--  Background image  -->
+            <Image Height="400"
+                   Source="ms-appx:///Assets/Bloom.jpg" />
+            <!--  Brush area  -->
+            <Border Width="550"
+                    Height="300"
+                    HorizontalAlignment="Center"
+                    VerticalAlignment="Center"
+                    BorderBrush="Black"
+                    BorderThickness=".5">
+                <Border.Background>
+                    <media:BackdropSepiaBrush Intensity=".8" />
+                </Border.Background>
+            </Border>
+        </Grid>
+    </StackPanel>
+</Page>

components/Media/samples/Brushes/BackdropSepiaBrushSample.xaml.cs

@@ -0,0 +1,16 @@
+// 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 CommunityToolkit.WinUI.Media;
+
+namespace MediaExperiment.Samples.Brushes;
+
+[ToolkitSample(id: nameof(BackdropSepiaBrushSample), "BackdropGammaTransferBrush", description: $"A sample for showing how to apply a {nameof(BackdropSepiaBrush)} effect to a background.")]
+public sealed partial class BackdropSepiaBrushSample : Page
+{
+    public BackdropSepiaBrushSample()
+    {
+        this.InitializeComponent();
+    }
+}

components/Media/samples/Brushes/ImageBlendBrushSample.xaml

@@ -0,0 +1,29 @@
+<Page x:Class="MediaExperiment.Samples.Brushes.ImageBlendBrushSample"
+      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:CommunityToolkit.WinUI.Media"
+      xmlns:ui="using:CommunityToolkit.WinUI"
+      mc:Ignorable="d">
+
+    <StackPanel VerticalAlignment="Center"
+                Spacing="32">
+        <Grid>
+            <!--  Background image  -->
+            <Image Height="400"
+                   Source="ms-appx:///Assets/Bloom.jpg" />
+            <!--  Brush area  -->
+            <Border Width="550"
+                    Height="300"
+                    HorizontalAlignment="Center"
+                    VerticalAlignment="Center">
+                <Border.Background>
+                    <media:ImageBlendBrush Mode="ColorDodge"
+                                           Source="ms-appx:///Assets/BrushAssets/Trex.png"
+                                           Stretch="None" />
+                </Border.Background>
+            </Border>
+        </Grid>
+    </StackPanel>
+</Page>