Mica Sample Update

WinUIGallery/ContentIncludes.props

@@ -325,6 +325,8 @@
     <Content Include="ControlPagesSampleCode\System\FilePickerSample5_xaml.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\SystemBackdropsEnsureSystemDQC.txt" />
     <Content Include="ControlPagesSampleCode\TabView\TabViewBasicSample_cs.txt" />
     <Content Include="ControlPagesSampleCode\TabView\TabViewKeyboardAcceleratorSample_cs.txt" />

WinUIGallery/ControlPages/SystemBackdropsPage.xaml

@@ -19,14 +19,35 @@
       mc:Ignorable="d">
 
     <StackPanel>
-        <local:ControlExample HeaderText="Create a window with a Mica system backdrop."
+        <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="createMicaWindow_Click">Create Window with Mica</Button>
+            <Button Click="createCustomMicaWindow_Click">Create Window with customizable Mica</Button>
         </local:ControlExample>
 
-        <local:ControlExample HeaderText="Create a window with a Desktop Acrylic system backdrop."
-                              CSharpSource="SystemBackdrops\SystemBackdropsSample2.txt">
-            <Button Click="createAcrylicWindow_Click">Create Window with Acrylic</Button>
+        <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>
 
         <local:ControlExample HeaderText="Helper class to ensure a Windows.System.DispatcherQueue exists."

WinUIGallery/ControlPages/SystemBackdropsPage.xaml.cs

@@ -1,4 +1,4 @@
-//*********************************************************
+//*********************************************************
 //
 // Copyright (c) Microsoft. All rights reserved.
 // THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF
@@ -24,13 +24,20 @@ public SystemBackdropsPage()
             this.InitializeComponent();
         }
 
-        private void createMicaWindow_Click(object sender, RoutedEventArgs e)
+        private void createBuiltInMicaWindow_Click(object sender, RoutedEventArgs e)
+        {
+            var newWindow = new AppUIBasics.SamplePages.SampleBuiltInSystemBackdropsWindow();
+            newWindow.Activate();
+        }
+
+        private void createCustomMicaWindow_Click(object sender, RoutedEventArgs e)
         {
             var newWindow = new AppUIBasics.SamplePages.SampleSystemBackdropsWindow();
+            newWindow.SetBackdrop(AppUIBasics.SamplePages.SampleSystemBackdropsWindow.BackdropType.Mica);
             newWindow.Activate();
         }
 
-        private void createAcrylicWindow_Click(object sender, RoutedEventArgs e)
+        private void createBuiltInAcrylicWindow_Click(object sender, RoutedEventArgs e)
         {
             var newWindow = new AppUIBasics.SamplePages.SampleSystemBackdropsWindow();
             newWindow.SetBackdrop(AppUIBasics.SamplePages.SampleSystemBackdropsWindow.BackdropType.DesktopAcrylic);

WinUIGallery/ControlPagesSampleCode/SystemBackdrops/SystemBackdropsSample1.txt

@@ -28,10 +28,10 @@ bool TrySetMicaBackdrop()
         // Note: Be sure to have "using WinRT;" to support the Window.As<...>() call.
         m_micaController.AddSystemBackdropTarget(this.As<Microsoft.UI.Composition.ICompositionSupportsSystemBackdrop>());
         m_micaController.SetSystemBackdropConfiguration(m_configurationSource);
-        return true; // succeeded
+        return true; // Succeeded.
     }
 
-    return false; // Mica is not supported on this system
+    return false; // Mica is not supported on this system.
 }
 
 private void Window_Activated(object sender, WindowActivatedEventArgs args)

WinUIGallery/ControlPagesSampleCode/SystemBackdrops/SystemBackdropsSample2.txt

@@ -28,10 +28,10 @@ bool TrySetAcrylicBackdrop()
         // Note: Be sure to have "using WinRT;" to support the Window.As<...>() call.
         m_acrylicController.AddSystemBackdropTarget(this.As<Microsoft.UI.Composition.ICompositionSupportsSystemBackdrop>());
         m_acrylicController.SetSystemBackdropConfiguration(m_configurationSource);
-        return true; // succeeded
+        return true; // Succeeded.
     }
 
-    return false; // Acrylic is not supported on this system
+    return false; // Acrylic is not supported on this system.
 }
 
 private void Window_Activated(object sender, WindowActivatedEventArgs args)

WinUIGallery/ControlPagesSampleCode/SystemBackdrops/SystemBackdropsSample3.txt

@@ -0,0 +1,15 @@
+// Option 2 - Implement Mica with codebehind.
+// Allows for toggling backdrops as shown in sample.
+bool TrySetMicaBackdrop(bool useMicaAlt)
+{
+    if (Microsoft.UI.Composition.SystemBackdrops.MicaController.IsSupported())
+    {
+        Microsoft.UI.Xaml.Media.MicaBackdrop micaBackdrop = new Microsoft.UI.Xaml.Media.MicaBackdrop();
+        micaBackdrop.Kind = useMicaAlt ? Microsoft.UI.Composition.SystemBackdrops.MicaKind.BaseAlt : Microsoft.UI.Composition.SystemBackdrops.MicaKind.Base;
+        this.SystemBackdrop = micaBackdrop;
+
+        return true; // Succeeded.
+    }
+
+    return false; // Mica is not supported on this system.
+}

WinUIGallery/ControlPagesSampleCode/SystemBackdrops/SystemBackdropsSample4.txt

@@ -0,0 +1,14 @@
+// Option 2 - Implement Acrylic with codebehind.
+// Allows for toggling backdrops as shown in sample.
+bool TrySetDesktopAcrylicBackdrop()
+{
+    if (Microsoft.UI.Composition.SystemBackdrops.DesktopAcrylicController.IsSupported())
+    {
+        Microsoft.UI.Xaml.Media.DesktopAcrylicBackdrop DesktopAcrylicBackdrop = new Microsoft.UI.Xaml.Media.DesktopAcrylicBackdrop();
+        this.SystemBackdrop = DesktopAcrylicBackdrop;
+
+        return true; // Succeeded.
+    }
+
+    return false; // DesktopAcrylic is not supported on this system.
+}

WinUIGallery/DataModel/ControlInfoData.json

@@ -2275,7 +2275,7 @@
           "Subtitle": "System backdrops, like Mica and Acrylic, for the window.",
           "ImagePath": "ms-appx:///Assets/ControlImages/Acrylic.png",
           "ImageIconPath": "ms-appx:///Assets/ControlIcons/SystemBackdropsIcon.png",
-          "Description": "System backdrops are used to provide a different background for a Window other than the default white or black (depending on Light or Dark theme). Mica and Desktop Acrylic are the current supported backdrops. Applying a backdrop currently requires a bunch of app code, but this will be easier in a future release.",
+          "Description": "System backdrops are used to provide a different background for a Window other than the default white or black (depending on Light or Dark theme). Mica and Desktop Acrylic are the current supported backdrops. There are two options for applying a backdrop: first, to use built-in Mica/Acrylic types, which have no customization and are simple to apply. The second is to create a customizable backdrop, which requires more code.",
           "Content": "<p>Look at the <i>SampleSystemBackdropsWindow.xaml.cs</i> file in Visual Studio to see the full code for applying a backdrop.</p>",
           "IsNew": true,
           "Docs": [

WinUIGallery/SamplePages/SampleBuiltInSystemBackdropsWindow.xaml

@@ -0,0 +1,32 @@
+<Window
+    x:Class="AppUIBasics.SamplePages.SampleBuiltInSystemBackdropsWindow"
+    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"
+    mc:Ignorable="d">
+
+    <Grid>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="32" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+        <Grid x:Name="titleBar" Background="Transparent" />
+        <StackPanel
+            Grid.Row="1"
+            HorizontalAlignment="Center"
+            VerticalAlignment="Center"
+            Spacing="12">
+            <TextBlock HorizontalAlignment="Center">
+                <Run Text="Current backdrop: " />
+                <Run x:Name="tbCurrentBackdrop" FontWeight="SemiBold" />
+            </TextBlock>
+            <Button
+                x:Name="btnChangeBackdrop"
+                HorizontalAlignment="Center"
+                Click="ChangeBackdropButton_Click"
+                Content="Change Backdrop" />
+            <TextBlock x:Name="tbChangeStatus" HorizontalAlignment="Center" />
+        </StackPanel>
+    </Grid>
+</Window>

WinUIGallery/SamplePages/SampleBuiltInSystemBackdropsWindow.xaml.cs

@@ -0,0 +1,129 @@
+using AppUIBasics.Helper;
+using Microsoft.UI.Xaml;
+
+namespace AppUIBasics.SamplePages
+{
+    public sealed partial class SampleBuiltInSystemBackdropsWindow : Window
+    {
+        BackdropType m_currentBackdrop;
+
+        public SampleBuiltInSystemBackdropsWindow()
+        {
+            this.InitializeComponent();
+            ((FrameworkElement)this.Content).RequestedTheme = AppUIBasics.Helper.ThemeHelper.RootTheme;
+            ExtendsContentIntoTitleBar = true;
+            SetTitleBar(titleBar);
+            SetBackdrop(BackdropType.Mica);
+        }
+
+
+        public enum BackdropType
+        {
+            Mica,
+            MicaAlt,
+            DesktopAcrylic,
+            DefaultColor,
+        }
+
+        public void SetBackdrop(BackdropType type)
+        {
+            // Reset to default color. If the requested type is supported, we'll update to that.
+            // Note: This sample completely removes any previous controller to reset to the default
+            //       state. This is done so this sample can show what is expected to be the most
+            //       common pattern of an app simply choosing one controller type which it sets at
+            //       startup. If an app wants to toggle between Mica and Acrylic it could simply
+            //       call RemoveSystemBackdropTarget() on the old controller and then setup the new
+            //       controller, reusing any existing m_configurationSource and Activated/Closed
+            //       event handlers.
+            m_currentBackdrop = BackdropType.DefaultColor;
+            tbCurrentBackdrop.Text = "None (default theme color)";
+            tbChangeStatus.Text = "";
+            this.SystemBackdrop = null;
+
+            if (type == BackdropType.Mica)
+            {
+                if (TrySetMicaBackdrop(false))
+                {
+                    tbCurrentBackdrop.Text = "Built-in Mica";
+                    m_currentBackdrop = type;
+                }
+                else
+                {
+                    // Mica isn't supported. Try Acrylic.
+                    type = BackdropType.DesktopAcrylic;
+                    tbChangeStatus.Text += "  Mica isn't supported. Trying Acrylic.";
+                }
+            }
+            if (type == BackdropType.MicaAlt)
+            {
+                if (TrySetMicaBackdrop(true))
+                {
+                    tbCurrentBackdrop.Text = "Built-in MicaAlt";
+                    m_currentBackdrop = type;
+                }
+                else
+                {
+                    // MicaAlt isn't supported. Try Acrylic.
+                    type = BackdropType.DesktopAcrylic;
+                    tbChangeStatus.Text += "  MicaAlt isn't supported. Trying Acrylic.";
+                }
+            }
+            if (type == BackdropType.DesktopAcrylic)
+            {
+                if (TrySetAcrylicBackdrop())
+                {
+                    tbCurrentBackdrop.Text = "Built-in Acrylic";
+                    m_currentBackdrop = type;
+                }
+                else
+                {
+                    // Acrylic isn't supported, so take the next option, which is DefaultColor, which is already set.
+                    tbChangeStatus.Text += "  Acrylic isn't supported. Switching to default color.";
+                }
+            }
+
+            // Announce visual change to automation.
+            UIHelper.AnnounceActionForAccessibility(btnChangeBackdrop, $"Background changed to {tbCurrentBackdrop.Text}", "BackgroundChangedNotificationActivityId");
+        }
+
+        bool TrySetMicaBackdrop(bool useMicaAlt)
+        {
+            if (Microsoft.UI.Composition.SystemBackdrops.MicaController.IsSupported())
+            {
+                Microsoft.UI.Xaml.Media.MicaBackdrop micaBackdrop = new Microsoft.UI.Xaml.Media.MicaBackdrop();
+                micaBackdrop.Kind = useMicaAlt ? Microsoft.UI.Composition.SystemBackdrops.MicaKind.BaseAlt : Microsoft.UI.Composition.SystemBackdrops.MicaKind.Base;
+                this.SystemBackdrop = micaBackdrop;
+                return true;
+            }
+
+            return false; // Mica is not supported on this system
+        }
+
+        bool TrySetAcrylicBackdrop()
+        {
+            if (Microsoft.UI.Composition.SystemBackdrops.DesktopAcrylicController.IsSupported())
+            {
+                this.SystemBackdrop = new Microsoft.UI.Xaml.Media.DesktopAcrylicBackdrop();
+                return true;
+            }
+
+            return false; // Acrylic is not supported on this system
+        }
+
+        void ChangeBackdropButton_Click(object sender, RoutedEventArgs e)
+        {
+            BackdropType newType;
+
+            switch (m_currentBackdrop)
+            {
+                case BackdropType.Mica:           newType = BackdropType.MicaAlt; break;
+                case BackdropType.MicaAlt:        newType = BackdropType.DesktopAcrylic; break;
+                case BackdropType.DesktopAcrylic: newType = BackdropType.DefaultColor; break;
+                default:
+                case BackdropType.DefaultColor:   newType = BackdropType.Mica; break;
+            }
+
+            SetBackdrop(newType);
+        }
+    }
+}

WinUIGallery/SamplePages/SampleSystemBackdropsWindow.xaml

@@ -6,14 +6,27 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d">
 
-    <StackPanel>
-        <StackPanel Margin="20" Spacing="10">
-            <StackPanel Orientation="Horizontal">
-                <TextBlock Text="Current backdrop: " />
-                <TextBlock x:Name="tbCurrentBackdrop" />
-            </StackPanel>
-            <Button x:Name="btnChangeBackdrop" Content="Change Backdrop" Click="ChangeBackdropButton_Click" />
-            <TextBlock x:Name="tbChangeStatus" />
+    <Grid>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="32" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+        <Grid x:Name="titleBar" Background="Transparent" />
+        <StackPanel
+            Grid.Row="1"
+            HorizontalAlignment="Center"
+            VerticalAlignment="Center"
+            Spacing="12">
+            <TextBlock HorizontalAlignment="Center">
+                <Run Text="Current backdrop: " />
+                <Run x:Name="tbCurrentBackdrop" FontWeight="SemiBold" />
+            </TextBlock>
+            <Button
+                x:Name="btnChangeBackdrop"
+                HorizontalAlignment="Center"
+                Click="ChangeBackdropButton_Click"
+                Content="Change Backdrop" />
+            <TextBlock x:Name="tbChangeStatus" HorizontalAlignment="Center" />
         </StackPanel>
-    </StackPanel>
+    </Grid>
 </Window>