Improved SystemBackdrop sample

WinUIGallery/ContentIncludes.props

@@ -245,8 +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\SystemBackdropsSample1_cs.txt" />
+    <Content Include="ControlPagesSampleCode\SystemBackdrops\SystemBackdropsSample1_xaml.txt" />
+    <Content Include="ControlPagesSampleCode\SystemBackdrops\SystemBackdropsSample2_cs.txt" />
+    <Content Include="ControlPagesSampleCode\SystemBackdrops\SystemBackdropsSample2_xaml.txt" />
     <Content Include="ControlPagesSampleCode\SystemBackdrops\SystemBackdropsSample3.txt" />
     <Content Include="ControlPagesSampleCode\SystemBackdrops\SystemBackdropsSample4.txt" />
     <Content Include="ControlPagesSampleCode\SystemBackdrops\SystemBackdropsEnsureSystemDQC.txt" />

WinUIGallery/ControlPages/SystemBackdropsPage.xaml

@@ -19,45 +19,71 @@
       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 HeaderText="MicaBackdrop:"
+                              CSharpSource="SystemBackdrops\SystemBackdropsSample1_cs.txt"
+                              XamlSource="SystemBackdrops\SystemBackdropsSample1_xaml.txt">
+            <StackPanel>
+                <TextBlock TextWrapping="WrapWholeWords">
+                    Inheritance: Object > DependencyObject > SystemBackdrop <LineBreak/> <LineBreak/>
+
+                      Mica is an opaque, dynamic material that incorporates theme and desktop wallpaper to paint the background of windows.
+                    You can apply Mica as your application backdrop to create a visual hierarchy, aiding productivity, by increasing clarity about which window is in focus.
+                    Mica is specifically designed for app performance as it only samples the desktop wallpaper once to create its visualization.
+                    Mica is available for Windows 11 build 22000 or later. <LineBreak/> <LineBreak/>
+
+                      Mica Alt is a variant of Mica, with stronger tinting of the user's desktop background color.
+                    You can apply Mica Alt as your app's backdrop to provide a deeper visual hierarchy than Mica, especially when creating an app with a tabbed title bar.
+                    Mica Alt is available for Windows 11 build 22000 or later.
+                </TextBlock>
+                <Button Margin="0 10 0 0" Click="createBuiltInMicaWindow_Click">Show sample window</Button>
+            </StackPanel>
         </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="DesktopAcrylicBackdrop:"
+                              CSharpSource="SystemBackdrops\SystemBackdropsSample2_cs.txt"
+                              XamlSource="SystemBackdrops\SystemBackdropsSample2_xaml.txt">
+            <StackPanel>
+                <TextBlock TextWrapping="WrapWholeWords">
+                    Inheritance: Object > DependencyObject > SystemBackdrop <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.
+                      Acrylic's most noticeable characteristic is its transparency. There are two acrylic blend types that change what's visible through the material:
+<LineBreak/><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/><LineBreak/> In-app acrylic adds a sense of depth within the app frame, providing both focus and hierarchy. (Inplemented with a AcrilicBrush in Xaml)
+                </TextBlock>
+                <Button Margin="0 10 0 0" Click="createBuiltInAcrylicWindow_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\SystemBackdropsSample3.txt">
+            <StackPanel>
+                <TextBlock TextWrapping="WrapWholeWords">
+        Inheritance: Object<LineBreak/> <LineBreak/>
+        
+          Manages rendering and system policy for the mica material. The MicaController class provides a very customizable way to apply the Mica material to a app.
+                    This is a list of properties that can be modified: FallbackColor, Kind (Can also be set using the MicaBackdrop class), LuminosityOpacity, State, TintColor and the TintOpacity.
+                </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\SystemBackdropsSample4.txt">
+            <StackPanel>
+                <TextBlock TextWrapping="WrapWholeWords">
+        Inheritance: Object<LineBreak/> <LineBreak/>
+
+          Manages rendering and system policy for the background acrylic material. Acrylic has the same level of customization as Mica, but the type (Base / Thin) can't be changed using the DesktopAcrylicBackdrop class.
+                    If you wan't to use Acrylic Thin in your app you have to use the DesktopAcrylicController class. There are 2 types of Acrylic: Base and Thin. The DesktopAcrylicBackdrop class uses a version of the Base type with less dimming.
+                </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 improts and uses the underlying create function." TextWrapping="WrapWholeWords" />
         </local:ControlExample>
     </StackPanel>
 </Page>

WinUIGallery/ControlPages/SystemBackdropsPage.xaml.cs

@@ -7,48 +7,56 @@
 // 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)
         {
-            var newWindow = new WinUIGallery.SamplePages.SampleBuiltInSystemBackdropsWindow();
-            newWindow.Activate();
+            var micaWindow = new SampleBuiltInSystemBackdropsWindow();
+            micaWindow.AllowedBackdrops = [SampleBuiltInSystemBackdropsWindow.BackdropType.None,
+                SampleBuiltInSystemBackdropsWindow.BackdropType.Mica,
+                SampleBuiltInSystemBackdropsWindow.BackdropType.MicaAlt];
+            micaWindow.SetBackdrop(SampleBuiltInSystemBackdropsWindow.BackdropType.Mica);
+            micaWindow.Activate();
         }
 
-        private void createCustomMicaWindow_Click(object sender, RoutedEventArgs e)
+        private void createBuiltInAcrylicWindow_Click(object sender, RoutedEventArgs e)
         {
-            var newWindow = new WinUIGallery.SamplePages.SampleSystemBackdropsWindow();
-            newWindow.SetBackdrop(WinUIGallery.SamplePages.SampleSystemBackdropsWindow.BackdropType.Mica);
-            newWindow.Activate();
+            var acrylicWindow = new SampleBuiltInSystemBackdropsWindow();
+            acrylicWindow.AllowedBackdrops = [SampleBuiltInSystemBackdropsWindow.BackdropType.None,
+                SampleBuiltInSystemBackdropsWindow.BackdropType.Acrylic];
+            acrylicWindow.SetBackdrop(SampleBuiltInSystemBackdropsWindow.BackdropType.Acrylic);
+            acrylicWindow.Activate();
         }
 
-        private void createBuiltInAcrylicWindow_Click(object sender, RoutedEventArgs e)
+        private void createCustomMicaWindow_Click(object sender, RoutedEventArgs e)
         {
-            var newWindow = new WinUIGallery.SamplePages.SampleSystemBackdropsWindow();
-            newWindow.SetBackdrop(WinUIGallery.SamplePages.SampleSystemBackdropsWindow.BackdropType.DesktopAcrylicBase);
-            newWindow.Activate();
+            var micaWindow = new SampleSystemBackdropsWindow();
+            micaWindow.AllowedBackdrops = [SampleSystemBackdropsWindow.BackdropType.None,
+                SampleSystemBackdropsWindow.BackdropType.Mica,
+                SampleSystemBackdropsWindow.BackdropType.MicaAlt];
+            micaWindow.SetBackdrop(SampleSystemBackdropsWindow.BackdropType.Mica);
+            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();
+            acrylicWindow.AllowedBackdrops = [SampleSystemBackdropsWindow.BackdropType.None,
+                SampleSystemBackdropsWindow.BackdropType.Acrylic,
+                SampleSystemBackdropsWindow.BackdropType.AcrylicThin];
+            acrylicWindow.SetBackdrop(SampleSystemBackdropsWindow.BackdropType.Acrylic);
+            acrylicWindow.Activate();
         }
     }
 }

WinUIGallery/ControlPagesSampleCode/SystemBackdrops/SystemBackdropsSample1_cs.txt

@@ -0,0 +1,14 @@
+// Option 2 - Implement Mica with c#.
+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.
+}

WinUIGallery/ControlPagesSampleCode/SystemBackdrops/SystemBackdropsSample1_xaml.txt

@@ -0,0 +1,9 @@
+<!-- Option 1 - Implement Mica with Xaml. -->
+<Window.SystemBackdrop>
+    <MicaBackdrop/>
+</Window.SystemBackdrop>
+
+<!-- Option 1.5 Implement Mica Alt with Xaml. -->
+<Window.SystemBackdrop>
+    <MicaBackdrop Kind="BaseAlt"/>
+</Window.SystemBackdrop>

WinUIGallery/ControlPagesSampleCode/SystemBackdrops/SystemBackdropsSample2_cs.txt

@@ -0,0 +1,13 @@
+// Option 2 - Implement Acrylic with c#.
+bool TrySetDesktopAcrylicBackdrop()
+{
+    if (DesktopAcrylicController.IsSupported())
+    {
+        DesktopAcrylicBackdrop DesktopAcrylicBackdrop = new DesktopAcrylicBackdrop();
+        SystemBackdrop = DesktopAcrylicBackdrop;
+
+        return true; // Succeeded.
+    }
+
+    return false; // DesktopAcrylic is not supported on this system.
+}

WinUIGallery/ControlPagesSampleCode/SystemBackdrops/SystemBackdropsSample2_xaml.txt

@@ -0,0 +1,4 @@
+<!-- Option 1 - implement Acrylic with Xaml. -->
+<Window.SystemBackdrop>
+    <DesktopAcrylicBackdrop/>
+<Window.SystemBackdrop>