[ADD] SystemBackdropElement Control Sample Page

WinUIGallery/ContentIncludes.props

@@ -239,6 +239,9 @@
     <Content Include="Samples\SampleCode\SystemBackdrops\SystemBackdropsSampleBackdropTypes_xaml.txt" />
     <Content Include="Samples\SampleCode\SystemBackdrops\SystemBackdropsSampleMicaController.txt" />
     <Content Include="Samples\SampleCode\SystemBackdrops\SystemBackdropsSampleDesktopAcrylicController.txt" />
+    <Content Include="Samples\SampleCode\SystemBackdropElement\SystemBackdropElementAcrylic_xaml.txt" />
+    <Content Include="Samples\SampleCode\SystemBackdropElement\SystemBackdropElementMica_xaml.txt" />
+    <Content Include="Samples\SampleCode\SystemBackdropElement\SystemBackdropElementMicaAlt_xaml.txt" />
     <Content Include="Samples\SampleCode\TabView\TabViewBasicSample_cs.txt" />
     <Content Include="Samples\SampleCode\TabView\TabViewKeyboardAcceleratorSample_cs.txt" />
     <Content Include="Samples\SampleCode\TeachingTip\TeachingTipSample2_xaml.txt" />

WinUIGallery/Samples/ControlPages/SystemBackdropElementPage.xaml

@@ -0,0 +1,39 @@
+<!-- Copyright (c) Microsoft Corporation. -->
+<Page x:Class="WinUIGallery.ControlPages.SystemBackdropElementPage"
+      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:controls="using:WinUIGallery.Controls"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      mc:Ignorable="d">
+    <StackPanel>
+        <controls:ControlExample x:Name="Example1" HeaderText="SystemBackdropElement Sample">
+            <controls:ControlExample.Example>
+                <Grid Width="300" Height="200" HorizontalAlignment="Center">
+                    <SystemBackdropElement x:Name="DynamicBackdropHost" CornerRadius="8">
+                        <SystemBackdropElement.SystemBackdrop>
+                            <DesktopAcrylicBackdrop />
+                        </SystemBackdropElement.SystemBackdrop>
+                    </SystemBackdropElement>
+                    <Button HorizontalAlignment="Center" VerticalAlignment="Center" Content="Click Me" />
+                </Grid>
+            </controls:ControlExample.Example>
+            <controls:ControlExample.Options>
+                <StackPanel Spacing="12">
+                    <ComboBox x:Name="BackdropTypeComboBox" Header="Backdrop Type" SelectedIndex="0" SelectionChanged="BackdropTypeComboBox_SelectionChanged">
+                        <ComboBoxItem Content="Acrylic" Tag="Acrylic" />
+                        <ComboBoxItem Content="Mica" Tag="Mica" />
+                        <ComboBoxItem Content="Mica Alt" Tag="MicaAlt" />
+                    </ComboBox>
+                    <Slider x:Name="CornerRadiusSlider" Header="Corner radius" Maximum="50" Minimum="0" StepFrequency="1" Value="8" ValueChanged="CornerRadiusSlider_ValueChanged" />
+                </StackPanel>
+            </controls:ControlExample.Options>
+            <controls:ControlExample.XamlSource>
+                SystemBackdropElement/SystemBackdropElementAcrylic_xaml.txt
+            </controls:ControlExample.XamlSource>
+            <controls:ControlExample.Substitutions>
+                <controls:ControlExampleSubstitution Key="CornerRadius" Value="{x:Bind CornerRadiusSlider.Value, Mode=OneWay}" />
+            </controls:ControlExample.Substitutions>
+        </controls:ControlExample>
+    </StackPanel>
+</Page>

WinUIGallery/Samples/ControlPages/SystemBackdropElementPage.xaml.cs

@@ -0,0 +1,64 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Media;
+using Microsoft.UI.Xaml.Controls.Primitives;
+using Microsoft.UI.Composition.SystemBackdrops;
+
+namespace WinUIGallery.ControlPages;
+
+public sealed partial class SystemBackdropElementPage : Page
+{
+    public SystemBackdropElementPage()
+    {
+        this.InitializeComponent();
+    }
+
+    private void BackdropTypeComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
+    {
+        if (DynamicBackdropHost == null || BackdropTypeComboBox == null)
+            return;
+
+        var selectedItem = BackdropTypeComboBox.SelectedItem as ComboBoxItem;
+        if (selectedItem == null)
+            return;
+
+        string backdropType = selectedItem.Tag?.ToString() ?? "Acrylic";
+
+        // Update the SystemBackdrop based on selection
+        if (backdropType == "Acrylic")
+        {
+            DynamicBackdropHost.SystemBackdrop = new DesktopAcrylicBackdrop();
+            if (Example1 != null)
+            {
+                Example1.XamlSource = "SystemBackdropElement/SystemBackdropElementAcrylic_xaml.txt";
+            }
+        }
+        else if (backdropType == "Mica")
+        {
+            DynamicBackdropHost.SystemBackdrop = new MicaBackdrop { Kind = MicaKind.Base };
+            if (Example1 != null)
+            {
+                Example1.XamlSource = "SystemBackdropElement/SystemBackdropElementMica_xaml.txt";
+            }
+        }
+        else if (backdropType == "MicaAlt")
+        {
+            DynamicBackdropHost.SystemBackdrop = new MicaBackdrop { Kind = MicaKind.BaseAlt };
+            if (Example1 != null)
+            {
+                Example1.XamlSource = "SystemBackdropElement/SystemBackdropElementMicaAlt_xaml.txt";
+            }
+        }
+    }
+
+    private void CornerRadiusSlider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
+    {
+        if (DynamicBackdropHost != null)
+        {
+            DynamicBackdropHost.CornerRadius = new CornerRadius(e.NewValue);
+        }
+    }
+}

WinUIGallery/Samples/Data/ControlInfoData.json

@@ -2658,6 +2658,29 @@
               "Uri": "https://learn.microsoft.com/en-us/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.media.themeshadow"
             }
           ]
+        },
+        {
+          "UniqueId": "SystemBackdropElement",
+          "Title": "SystemBackdropElement",
+          "BaseClasses": [
+            "Object",
+            "DependencyObject",
+            "UIElement",
+            "FrameworkElement",
+            "Control",
+            "ContentControl"
+          ],
+          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
+          "Subtitle": "An element to host system backdrop materials.",
+          "ImagePath": "ms-appx:///Assets/ControlImages/Acrylic.png",
+          "Description": "SystemBackdropElement applies system backdrop materials (Mica and Acrylic) to specific areas inside the UI tree, extending these materials beyond the window background to enable more flexible and immersive designs.",
+          "IsNew": true,
+          "Docs": [
+            {
+              "Title": "SystemBackdropElement - API",
+              "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.systembackdropelement"
+            }
+          ]
         }
       ]
     },

WinUIGallery/Samples/SampleCode/SystemBackdropElement/SystemBackdropElementAcrylic_xaml.txt

@@ -0,0 +1,8 @@
+<Grid Width="300" Height="200">
+    <SystemBackdropElement CornerRadius="$(CornerRadius)">
+        <SystemBackdropElement.SystemBackdrop>
+            <DesktopAcrylicBackdrop />
+        </SystemBackdropElement.SystemBackdrop>
+    </SystemBackdropElement>
+    <Button Content="Button" HorizontalAlignment="Center" VerticalAlignment="Center"/>
+</Grid>

WinUIGallery/Samples/SampleCode/SystemBackdropElement/SystemBackdropElementMicaAlt_xaml.txt

@@ -0,0 +1,8 @@
+<Grid Width="300" Height="200">
+    <SystemBackdropElement CornerRadius="$(CornerRadius)">
+        <SystemBackdropElement.SystemBackdrop>
+            <MicaBackdrop Kind="BaseAlt" />
+        </SystemBackdropElement.SystemBackdrop>
+    </SystemBackdropElement>
+    <Button Content="Button" HorizontalAlignment="Center" VerticalAlignment="Center"/>
+</Grid>

WinUIGallery/Samples/SampleCode/SystemBackdropElement/SystemBackdropElementMica_xaml.txt

@@ -0,0 +1,8 @@
+<Grid Width="300" Height="200">
+    <SystemBackdropElement CornerRadius="$(CornerRadius)">
+        <SystemBackdropElement.SystemBackdrop>
+            <MicaBackdrop Kind="Base" />
+        </SystemBackdropElement.SystemBackdrop>
+    </SystemBackdropElement>
+    <Button Content="Button" HorizontalAlignment="Center" VerticalAlignment="Center"/>
+</Grid>