Improved SystemBackdrop sample

WinUIGallery/ContentIncludes.props

@@ -245,10 +245,10 @@
     <Content Include="ControlPagesSampleCode\System\FilePickerSample5_cs.txt" />
     <Content Include="ControlPagesSampleCode\System\FilePickerSample5_xaml.txt" />
     <Content Include="ControlPagesSampleCode\System\Window.txt" />
-    <Content Include="ControlPagesSampleCode\SystemBackdrops\SystemBackdropsSample1.txt" />
-    <Content Include="ControlPagesSampleCode\SystemBackdrops\SystemBackdropsSample2.txt" />
-    <Content Include="ControlPagesSampleCode\SystemBackdrops\SystemBackdropsSample3.txt" />
-    <Content Include="ControlPagesSampleCode\SystemBackdrops\SystemBackdropsSample4.txt" />
+    <Content Include="ControlPagesSampleCode\SystemBackdrops\SystemBackdropsSampleBackdropTypes_cs.txt" />
+    <Content Include="ControlPagesSampleCode\SystemBackdrops\SystemBackdropsSampleBackdropTypes_xaml.txt" />
+    <Content Include="ControlPagesSampleCode\SystemBackdrops\SystemBackdropsSampleMicaController.txt" />
+    <Content Include="ControlPagesSampleCode\SystemBackdrops\SystemBackdropsSampleDesktopAcrylicController.txt" />
     <Content Include="ControlPagesSampleCode\SystemBackdrops\SystemBackdropsEnsureSystemDQC.txt" />
     <Content Include="ControlPagesSampleCode\TabView\TabViewBasicSample_cs.txt" />
     <Content Include="ControlPagesSampleCode\TabView\TabViewKeyboardAcceleratorSample_cs.txt" />

WinUIGallery/ControlPages/SystemBackdropsPage.xaml

@@ -19,45 +19,62 @@
       mc:Ignorable="d">
 
     <StackPanel>
-        <local:ControlExample HeaderText="Create a window with a built-in Mica system backdrop."
-                              CSharpSource="SystemBackdrops\SystemBackdropsSample3.txt">
-            <local:ControlExample.Xaml>
-                <x:String xml:space="preserve">
-// Option 1 - implement Mica with Xaml.
-&lt;Window.SystemBackdrop&gt;
-    &lt;MicaBackdrop /&gt;
-&lt;/Window.SystemBackdrop&gt;
-                </x:String>
-            </local:ControlExample.Xaml>
-            <Button Click="createBuiltInMicaWindow_Click">Create Window with built-in Mica</Button>
-        </local:ControlExample>
-
-        <local:ControlExample HeaderText="Create a window with a customizable Mica system backdrop."
-                              CSharpSource="SystemBackdrops\SystemBackdropsSample1.txt">
-            <Button Click="createCustomMicaWindow_Click">Create Window with customizable Mica</Button>
+        <local:ControlExample HeaderText="Backdrop types"
+                              CSharpSource="SystemBackdrops\SystemBackdropsSampleBackdropTypes_cs.txt"
+                              XamlSource="SystemBackdrops\SystemBackdropsSampleBackdropTypes_xaml.txt">
+            <StackPanel>
+                <TextBlock TextWrapping="WrapWholeWords">
+                      There are three backdrop types: <LineBreak/>
+                    1. SystemBackdrop (The base class of every backdrop type) <LineBreak/>
+                    2. MicaBackdrop (A backdrop that uses the Mica material) <LineBreak/>
+                    3. DesktopAcrylicBackdrop (A backdrop that uses the Acrylic material) <LineBreak/> <LineBreak/>
+
+                      Mica is an opaque, dynamic material that incorporates theme and desktop wallpaper to paint the background of windows.
+                    Mica is specifically designed for app performance as it only samples the desktop wallpaper once to create its visualization.
+                      Mica Alt is a variant of Mica, with stronger tinting of the user's desktop background. Recommended when creating an app with a tabbed title bar.
+                    All variants of Mica are available for Windows 11 build 22000 or later. <LineBreak/> <LineBreak/>
+
+                      Acrylic is a semi-transparent material that replicates the effect of frosted glass. It's used only for transient, light-dismiss surfaces such as flyouts and context menus.
+                      There are two acrylic blend types that change what's visible through the material:
+
+<LineBreak/> Background acrylic reveals the desktop wallpaper and other windows that are behind the currently active app, adding depth between application windows while celebrating the user's personalization preferences.
+<LineBreak/> In-app acrylic adds a sense of depth within the app frame, providing both focus and hierarchy. (Inplemented with a AcrylicBrush in XAML)
+                </TextBlock>
+                <Button Margin="0 10 0 0" Click="createBuiltInWindow_Click">Show sample window</Button>
+            </StackPanel>
         </local:ControlExample>
 
-        <local:ControlExample HeaderText="Create a window with a built-in Desktop Acrylic system backdrop."
-                              CSharpSource="SystemBackdrops\SystemBackdropsSample4.txt">
-            <local:ControlExample.Xaml>
-                <x:String xml:space="preserve">
-// Option 1 - implement Acrylic with Xaml.
-&lt;Window.SystemBackdrop&gt;
-    &lt;DesktopAcrylicBackdrop /&gt;
-&lt;/Window.SystemBackdrop&gt;
-                </x:String>
-            </local:ControlExample.Xaml>
-            <Button Click="createBuiltInAcrylicWindow_Click">Create Window with built-in Acrylic</Button>
+        <local:ControlExample HeaderText="MicaController"
+                              CSharpSource="SystemBackdrops\SystemBackdropsSampleMicaController.txt">
+            <StackPanel>
+                <TextBlock TextWrapping="WrapWholeWords">        
+          Manages rendering and system policy for the mica material. The MicaController class provides a very customizable way to apply the Mica material to an app.
+                    This is a list of properties that can be modified: FallbackColor, Kind, LuminosityOpacity, TintColor and the TintOpacity.
+                     <LineBreak/>There are 2 types of Mica:<LineBreak/>
+                     1. Base (Lighter)<LineBreak/>
+                     2. Alt (Darker)<LineBreak/>
+                </TextBlock>
+                <Button Margin="0 10 0 0" Click="createCustomMicaWindow_Click">Show sample window</Button>
+            </StackPanel>
         </local:ControlExample>
 
-        <local:ControlExample HeaderText="Create a window with a customizable Desktop Acrylic system backdrop."
-                              CSharpSource="SystemBackdrops\SystemBackdropsSample2.txt">
-            <Button Click="createCustomDesktopAcrylicWindow_Click">Create Window with customizable Desktop Acrylic</Button>
+        <local:ControlExample HeaderText="DesktopAcrylicController"
+                              CSharpSource="SystemBackdrops\SystemBackdropsSampleDesktopAcrylicController.txt">
+            <StackPanel>
+                <TextBlock TextWrapping="WrapWholeWords">        
+          Manages rendering and system policy for the background acrylic material. Acrylic has the same level of customization as Mica, but the type can't be changed using the DesktopAcrylicBackdrop class.
+                   <LineBreak/>There are 2 types of Acrylic:<LineBreak/>
+                   1. Base (Darker)<LineBreak/>
+                   2. Thin (Lighter)<LineBreak/>
+                   If you wan't to use Acrylic Thin in your app you have to use the DesktopAcrylicController class. The DesktopAcrylicBackdrop class uses the Base type.
+                </TextBlock>
+                <Button Margin="0 10 0 0" Click="createCustomDesktopAcrylicWindow_Click">Show sample window</Button>
+            </StackPanel>
         </local:ControlExample>
 
-        <local:ControlExample HeaderText="Helper class to ensure a Windows.System.DispatcherQueue exists."
+        <local:ControlExample HeaderText="WindowsSystemDispatcherQueueHelper"
                               CSharpSource="SystemBackdrops\SystemBackdropsEnsureSystemDQC.txt">
-            <TextBlock Text="A Windows.System.DispatcherQueue must exist on the thread to use MicaController or DesktopAcrylicController. This helper class exposes and uses the underlying create function." TextWrapping="WrapWholeWords" />
+            <TextBlock Text="A DispatcherQueue must exist on the thread to use a Mica- or DesktopAcrylicController. This helper class imports and uses the underlying create function." TextWrapping="WrapWholeWords" />
         </local:ControlExample>
     </StackPanel>
 </Page>

WinUIGallery/ControlPages/SystemBackdropsPage.xaml.cs

@@ -7,47 +7,49 @@
 // PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.
 //
 //*********************************************************
-using WinUIGallery.Helper;
-using System;
-using Microsoft.UI;
-using Microsoft.UI.Windowing;
 using Microsoft.UI.Xaml;
 using Microsoft.UI.Xaml.Controls;
-using Microsoft.UI.Xaml.Media;
+using WinUIGallery.SamplePages;
 
 namespace WinUIGallery.ControlPages;
 
 public sealed partial class SystemBackdropsPage : Page
 {
     public SystemBackdropsPage()
     {
-        this.InitializeComponent();
+        InitializeComponent();
     }
 
-    private void createBuiltInMicaWindow_Click(object sender, RoutedEventArgs e)
+    private void createBuiltInWindow_Click(object sender, RoutedEventArgs e)
     {
-        var newWindow = new WinUIGallery.SamplePages.SampleBuiltInSystemBackdropsWindow();
-        newWindow.Activate();
+        var buildInBackdropsWindow = new SampleBuiltInSystemBackdropsWindow();
+        buildInBackdropsWindow.SetBackdrop(SampleBuiltInSystemBackdropsWindow.BackdropType.Mica);
+        buildInBackdropsWindow.Activate();
     }
 
     private void createCustomMicaWindow_Click(object sender, RoutedEventArgs e)
     {
-        var newWindow = new WinUIGallery.SamplePages.SampleSystemBackdropsWindow();
-        newWindow.SetBackdrop(WinUIGallery.SamplePages.SampleSystemBackdropsWindow.BackdropType.Mica);
-        newWindow.Activate();
-    }
-
-    private void createBuiltInAcrylicWindow_Click(object sender, RoutedEventArgs e)
-    {
-        var newWindow = new WinUIGallery.SamplePages.SampleSystemBackdropsWindow();
-        newWindow.SetBackdrop(WinUIGallery.SamplePages.SampleSystemBackdropsWindow.BackdropType.DesktopAcrylicBase);
-        newWindow.Activate();
+        var micaWindow = new SampleSystemBackdropsWindow
+        {
+            AllowedBackdrops = [
+                SampleSystemBackdropsWindow.BackdropType.Mica,
+                SampleSystemBackdropsWindow.BackdropType.MicaAlt,
+                SampleSystemBackdropsWindow.BackdropType.None
+            ]
+        };
+        micaWindow.Activate();
     }
 
     private void createCustomDesktopAcrylicWindow_Click(object sender, RoutedEventArgs e)
     {
-        var newWindow = new WinUIGallery.SamplePages.SampleSystemBackdropsWindow();
-        newWindow.SetBackdrop(WinUIGallery.SamplePages.SampleSystemBackdropsWindow.BackdropType.DesktopAcrylicBase);
-        newWindow.Activate();
+        var acrylicWindow = new SampleSystemBackdropsWindow
+        {
+            AllowedBackdrops = [
+                SampleSystemBackdropsWindow.BackdropType.Acrylic,
+                SampleSystemBackdropsWindow.BackdropType.AcrylicThin,
+                SampleSystemBackdropsWindow.BackdropType.None
+            ]
+        };
+        acrylicWindow.Activate();
     }
 }

WinUIGallery/ControlPagesSampleCode/SystemBackdrops/SystemBackdropsSampleBackdropTypes_cs.txt

@@ -0,0 +1,26 @@
+bool TrySetMicaBackdrop(bool useMicaAlt)
+{
+    if (SystemBackdrops.MicaController.IsSupported())
+    {
+        MicaBackdrop micaBackdrop = new MicaBackdrop();
+        micaBackdrop.Kind = useMicaAlt ? MicaKind.BaseAlt : MicaKind.Base;
+        SystemBackdrop = micaBackdrop;
+
+        return true; // Succeeded.
+    }
+
+    return false; // Mica is not supported on this system.
+}
+
+bool TrySetDesktopAcrylicBackdrop()
+{
+    if (DesktopAcrylicController.IsSupported())
+    {
+        DesktopAcrylicBackdrop DesktopAcrylicBackdrop = new DesktopAcrylicBackdrop();
+        SystemBackdrop = DesktopAcrylicBackdrop;
+
+        return true; // Succeeded.
+    }
+
+    return false; // DesktopAcrylic is not supported on this system.
+}