Adding media samples to WCT sample app

components/Media/samples/AcrylicBrush.md

@@ -0,0 +1,21 @@
+---
+title: AcrylicBrush
+author: erinwoo  
+description: A brush that can apply an acrylic background effect.
+keywords: brush, acrylic, acrylicbrush
+dev_langs:
+  - csharp
+category: Media
+subcategory: Brushes
+discussion-id: 0
+issue-id: 0
+icon: Assets/EffectAnimations.png
+---
+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.
+> [!SAMPLE AcrylicBrushSample]
+
+Setting BackgroundSource to `HostBackdrop` results in the acrylic effect being applied behind the current application.
+> [!SAMPLE AcrylicBrushHostBackdropSample]
+
+To learn more about the acrylic material in Windows: [link](https://learn.microsoft.com/en-us/windows/apps/design/style/acrylic)

components/Media/samples/BackdropBlurBrush.md

@@ -0,0 +1,15 @@
+---
+title: BackdropBlurBrush
+author: erinwoo  
+description: A brush that blurs the background in the application
+keywords: backdrop, background, blur, brush
+dev_langs:
+  - csharp
+category: Media
+subcategory: Brushes
+discussion-id: 0
+issue-id: 0
+icon: Assets/EffectAnimations.png
+---
+
+> [!SAMPLE BackdropBlurBrushSample]

components/Media/samples/BackdropGammaTransferBrush.md

@@ -0,0 +1,17 @@
+---
+title: BackdropGammaTransferBrush
+author: erinwoo  
+description: A brush which modifies the color values of the brush's background in the application
+keywords: back, backdrop, gamma, transfer, brush
+dev_langs:
+  - csharp
+category: Media
+subcategory: Brushes
+discussion-id: 0
+issue-id: 0
+icon: Assets/EffectAnimations.png
+---
+
+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]

components/Media/samples/BackdropInvertBrush.md

@@ -0,0 +1,15 @@
+---
+title: BackdropInvertBrush
+author: erinwoo  
+description: A brush that inverts the colors of the brush's background in the application
+keywords: backdrop, invert, brush
+dev_langs:
+  - csharp
+category: Media
+subcategory: Brushes
+discussion-id: 0
+issue-id: 0
+icon: Assets/EffectAnimations.png
+---
+
+> [!SAMPLE BackdropInvertBrushSample]

components/Media/samples/BackdropSaturationBrush.md

@@ -0,0 +1,15 @@
+---
+title: BackdropSaturationBrush
+author: erinwoo  
+description: A brush that can increase or decrease the saturation of the brush's background in the application.
+keywords: back, backdrop, saturation, brush
+dev_langs:
+  - csharp
+category: Media
+subcategory: Brushes
+discussion-id: 0
+issue-id: 0
+icon: Assets/EffectAnimations.png
+---
+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]

components/Media/samples/BackdropSepiaBrush.md

@@ -0,0 +1,15 @@
+---
+title: BackdropSepiaBrush
+author: erinwoo  
+description: A brush that applies the sepia effect to the brush's background
+keywords: back, backdrop, sepia, brush
+dev_langs:
+  - csharp
+category: Media
+subcategory: Brushes
+discussion-id: 0
+issue-id: 0
+icon: Assets/EffectAnimations.png
+---
+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]

components/Media/samples/Brushes/AcrylicBrushHostBackdropSample.xaml

@@ -0,0 +1,32 @@
+<Page x:Class="MediaExperiment.Samples.Brushes.AcrylicBrushHostBackdropSample"
+      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 Source="ms-appx:///Assets/Bloom.jpg"
+                   Height="400"/>
+            <!--Brush area-->
+            <Border BorderBrush="Black" BorderThickness=".5" VerticalAlignment="Center" HorizontalAlignment="Center" Width="550" Height="300">
+                <Border.Background>
+                    <media:AcrylicBrush
+                        BackgroundSource="HostBackdrop"
+                        TintColor="Black"
+                        TintOpacity=".2"
+                        BlurAmount="2"/>
+                </Border.Background>
+                <!--Foreground image-->
+                <Image VerticalAlignment="Center"
+                    Source="ms-appx:///Assets/BrushAssets/Trex.png"
+                    Height="100"/>
+            </Border>
+        </Grid>
+    </StackPanel>
+</Page>

components/Media/samples/Brushes/AcrylicBrushHostBackdropSample.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(AcrylicBrushHostBackdropSample), "AcrylicBrushHostBackdrop", description: $"A sample for showing how to apply a {nameof(CommunityToolkit.WinUI.Media.AcrylicBrush)} effect to a background.")]
+public sealed partial class AcrylicBrushHostBackdropSample : Page
+{
+    public AcrylicBrushHostBackdropSample()
+    {
+        this.InitializeComponent();
+    }
+}

components/Media/samples/Brushes/AcrylicBrushSample.xaml

@@ -0,0 +1,32 @@
+<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 Source="ms-appx:///Assets/Bloom.jpg"
+                   Height="400"/>
+            <!--Brush area-->
+            <Border BorderBrush="Black" BorderThickness=".5" VerticalAlignment="Center" HorizontalAlignment="Center" Width="550" Height="300">
+                <Border.Background>
+                    <media:AcrylicBrush
+                        BackgroundSource="Backdrop"
+                        TintColor="Black"
+                        TintOpacity=".6"
+                        BlurAmount="15"/>
+                </Border.Background>
+                <!--Foreground image-->
+                <Image VerticalAlignment="Center"
+                    Source="ms-appx:///Assets/BrushAssets/Trex.png"
+                    Height="100"/>
+            </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,27 @@
+<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 Source="ms-appx:///Assets/Bloom.jpg"
+               Height="400"/>
+            <!--Brush area-->
+            <Border BorderBrush="Black" BorderThickness=".5" VerticalAlignment="Center" HorizontalAlignment="Center" Width="550" Height="300">
+                <Border.Background>
+                    <media:BackdropBlurBrush Amount="5.0"/>
+                </Border.Background>
+            </Border>
+            <!--Foreground image-->
+            <Image VerticalAlignment="Center"
+                Source="ms-appx:///Assets/BrushAssets/Trex.png"
+                Height="100"/>
+        </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,22 @@
+<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 Source="ms-appx:///Assets/Bloom.jpg" Height="400"/>
+            <!--Brush area-->
+            <Border BorderBrush="Black" BorderThickness=".5" VerticalAlignment="Center" HorizontalAlignment="Center" Width="550" Height="300">
+                <Border.Background>
+                    <media:BackdropGammaTransferBrush RedAmplitude="10" AlphaOffset=".2" />
+                </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,24 @@
+<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 Source="ms-appx:///Assets/Bloom.jpg"
+               Height="400"/>
+            <!--Brush area-->
+            <Border BorderBrush="Black" BorderThickness=".5" VerticalAlignment="Center" HorizontalAlignment="Center" Width="550" Height="300">
+                <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,24 @@
+<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 Source="ms-appx:///Assets/Bloom.jpg"
+               Height="400"/>
+            <!--Brush area-->
+            <Border BorderBrush="Black" BorderThickness=".5" VerticalAlignment="Center" HorizontalAlignment="Center" Width="550" Height="300">
+                <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,23 @@
+<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 Source="ms-appx:///Assets/Bloom.jpg"
+               Height="400"/>
+            <!--Brush area-->
+            <Border BorderBrush="Black" BorderThickness=".5" VerticalAlignment="Center" HorizontalAlignment="Center" Width="550" Height="300">
+                <Border.Background>
+                    <media:BackdropSepiaBrush Intensity=".8"/>
+                </Border.Background>
+            </Border>
+        </Grid>
+    </StackPanel>
+</Page>