Skip to content

Commit 9b3b59b

Browse files
rashmi-thakurrRashmi Thakurniels9001
authored
[ADD] SystemBackdropElement Control Sample Page (#2079)
<!--- Provide a general summary of your changes in the Title above --> ## Description <!--- Describe your changes in detail --> Adds Samples for SystemBackdropElement Control ## Motivation and Context <!--- Why is this change required? What problem does it solve? --> <!--- If it fixes an open issue, please link to the issue here. --> Provides a clearer example of how to use SystemBackdropElement. Helps developers understand and test the newer backdrop APIs. ## How Has This Been Tested? <!--- Please describe in detail how you tested your changes. --> <!--- Include details of your testing environment, and the tests you ran to --> <!--- see how your change affects other areas of the code, etc. --> Tested in WinUI Gallery on Windows 11. Verified backdrop switching, CornerRadius updates, and sample loading without errors in Debug and Release. ## Screenshots (if appropriate): <img width="2263" height="1214" alt="Screenshot 2025-11-19 152224" src="https://github.com/user-attachments/assets/140cb6f1-7ae5-4e1b-ae63-f53a3b765590" /> ## Types of changes <!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: --> - [ ] Bug fix (non-breaking change which fixes an issue) - [x ] New feature (non-breaking change which adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality to change) --------- Co-authored-by: Rashmi Thakur <[email protected]> Co-authored-by: Niels Laute <[email protected]>
1 parent 8847fa9 commit 9b3b59b

File tree

7 files changed

+153
-0
lines changed

7 files changed

+153
-0
lines changed

‎WinUIGallery/ContentIncludes.props‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -239,6 +239,9 @@
239239
<Content Include="Samples\SampleCode\SystemBackdrops\SystemBackdropsSampleBackdropTypes_xaml.txt" />
240240
<Content Include="Samples\SampleCode\SystemBackdrops\SystemBackdropsSampleMicaController.txt" />
241241
<Content Include="Samples\SampleCode\SystemBackdrops\SystemBackdropsSampleDesktopAcrylicController.txt" />
242+
<Content Include="Samples\SampleCode\SystemBackdropElement\SystemBackdropElementAcrylic_xaml.txt" />
243+
<Content Include="Samples\SampleCode\SystemBackdropElement\SystemBackdropElementMica_xaml.txt" />
244+
<Content Include="Samples\SampleCode\SystemBackdropElement\SystemBackdropElementMicaAlt_xaml.txt" />
242245
<Content Include="Samples\SampleCode\TabView\TabViewBasicSample_cs.txt" />
243246
<Content Include="Samples\SampleCode\TabView\TabViewKeyboardAcceleratorSample_cs.txt" />
244247
<Content Include="Samples\SampleCode\TeachingTip\TeachingTipSample2_xaml.txt" />

‎WinUIGallery/Samples/ControlPages/SystemBackdropElementPage.xaml‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!-- Copyright (c) Microsoft Corporation. -->
2+
<Page x:Class="WinUIGallery.ControlPages.SystemBackdropElementPage"
3+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5+
xmlns:controls="using:WinUIGallery.Controls"
6+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
7+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
8+
mc:Ignorable="d">
9+
<StackPanel>
10+
<controls:ControlExample x:Name="Example1" HeaderText="SystemBackdropElement Sample">
11+
<controls:ControlExample.Example>
12+
<Grid Width="300" Height="200" HorizontalAlignment="Center">
13+
<SystemBackdropElement x:Name="DynamicBackdropHost" CornerRadius="8">
14+
<SystemBackdropElement.SystemBackdrop>
15+
<DesktopAcrylicBackdrop />
16+
</SystemBackdropElement.SystemBackdrop>
17+
</SystemBackdropElement>
18+
<Button HorizontalAlignment="Center" VerticalAlignment="Center" Content="Click Me" />
19+
</Grid>
20+
</controls:ControlExample.Example>
21+
<controls:ControlExample.Options>
22+
<StackPanel Spacing="12">
23+
<ComboBox x:Name="BackdropTypeComboBox" Header="Backdrop Type" SelectedIndex="0" SelectionChanged="BackdropTypeComboBox_SelectionChanged">
24+
<ComboBoxItem Content="Acrylic" Tag="Acrylic" />
25+
<ComboBoxItem Content="Mica" Tag="Mica" />
26+
<ComboBoxItem Content="Mica Alt" Tag="MicaAlt" />
27+
</ComboBox>
28+
<Slider x:Name="CornerRadiusSlider" Header="Corner radius" Maximum="50" Minimum="0" StepFrequency="1" Value="8" ValueChanged="CornerRadiusSlider_ValueChanged" />
29+
</StackPanel>
30+
</controls:ControlExample.Options>
31+
<controls:ControlExample.XamlSource>
32+
SystemBackdropElement/SystemBackdropElementAcrylic_xaml.txt
33+
</controls:ControlExample.XamlSource>
34+
<controls:ControlExample.Substitutions>
35+
<controls:ControlExampleSubstitution Key="CornerRadius" Value="{x:Bind CornerRadiusSlider.Value, Mode=OneWay}" />
36+
</controls:ControlExample.Substitutions>
37+
</controls:ControlExample>
38+
</StackPanel>
39+
</Page>

‎WinUIGallery/Samples/ControlPages/SystemBackdropElementPage.xaml.cs‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
// Copyright (c) Microsoft Corporation. All rights reserved.
2+
// Licensed under the MIT License.
3+
4+
using Microsoft.UI.Xaml;
5+
using Microsoft.UI.Xaml.Controls;
6+
using Microsoft.UI.Xaml.Media;
7+
using Microsoft.UI.Xaml.Controls.Primitives;
8+
using Microsoft.UI.Composition.SystemBackdrops;
9+
10+
namespace WinUIGallery.ControlPages;
11+
12+
public sealed partial class SystemBackdropElementPage : Page
13+
{
14+
public SystemBackdropElementPage()
15+
{
16+
this.InitializeComponent();
17+
}
18+
19+
private void BackdropTypeComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
20+
{
21+
if (DynamicBackdropHost == null || BackdropTypeComboBox == null)
22+
return;
23+
24+
var selectedItem = BackdropTypeComboBox.SelectedItem as ComboBoxItem;
25+
if (selectedItem == null)
26+
return;
27+
28+
string backdropType = selectedItem.Tag?.ToString() ?? "Acrylic";
29+
30+
// Update the SystemBackdrop based on selection
31+
if (backdropType == "Acrylic")
32+
{
33+
DynamicBackdropHost.SystemBackdrop = new DesktopAcrylicBackdrop();
34+
if (Example1 != null)
35+
{
36+
Example1.XamlSource = "SystemBackdropElement/SystemBackdropElementAcrylic_xaml.txt";
37+
}
38+
}
39+
else if (backdropType == "Mica")
40+
{
41+
DynamicBackdropHost.SystemBackdrop = new MicaBackdrop { Kind = MicaKind.Base };
42+
if (Example1 != null)
43+
{
44+
Example1.XamlSource = "SystemBackdropElement/SystemBackdropElementMica_xaml.txt";
45+
}
46+
}
47+
else if (backdropType == "MicaAlt")
48+
{
49+
DynamicBackdropHost.SystemBackdrop = new MicaBackdrop { Kind = MicaKind.BaseAlt };
50+
if (Example1 != null)
51+
{
52+
Example1.XamlSource = "SystemBackdropElement/SystemBackdropElementMicaAlt_xaml.txt";
53+
}
54+
}
55+
}
56+
57+
private void CornerRadiusSlider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
58+
{
59+
if (DynamicBackdropHost != null)
60+
{
61+
DynamicBackdropHost.CornerRadius = new CornerRadius(e.NewValue);
62+
}
63+
}
64+
}

‎WinUIGallery/Samples/Data/ControlInfoData.json‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2658,6 +2658,29 @@
26582658
"Uri": "https://learn.microsoft.com/en-us/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.media.themeshadow"
26592659
}
26602660
]
2661+
},
2662+
{
2663+
"UniqueId": "SystemBackdropElement",
2664+
"Title": "SystemBackdropElement",
2665+
"BaseClasses": [
2666+
"Object",
2667+
"DependencyObject",
2668+
"UIElement",
2669+
"FrameworkElement",
2670+
"Control",
2671+
"ContentControl"
2672+
],
2673+
"ApiNamespace": "Microsoft.UI.Xaml.Controls",
2674+
"Subtitle": "An element to host system backdrop materials.",
2675+
"ImagePath": "ms-appx:///Assets/ControlImages/Acrylic.png",
2676+
"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.",
2677+
"IsNew": true,
2678+
"Docs": [
2679+
{
2680+
"Title": "SystemBackdropElement - API",
2681+
"Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.systembackdropelement"
2682+
}
2683+
]
26612684
}
26622685
]
26632686
},

‎WinUIGallery/Samples/SampleCode/SystemBackdropElement/SystemBackdropElementAcrylic_xaml.txt‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<Grid Width="300" Height="200">
2+
<SystemBackdropElement CornerRadius="$(CornerRadius)">
3+
<SystemBackdropElement.SystemBackdrop>
4+
<DesktopAcrylicBackdrop />
5+
</SystemBackdropElement.SystemBackdrop>
6+
</SystemBackdropElement>
7+
<Button Content="Button" HorizontalAlignment="Center" VerticalAlignment="Center"/>
8+
</Grid>

‎WinUIGallery/Samples/SampleCode/SystemBackdropElement/SystemBackdropElementMicaAlt_xaml.txt‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<Grid Width="300" Height="200">
2+
<SystemBackdropElement CornerRadius="$(CornerRadius)">
3+
<SystemBackdropElement.SystemBackdrop>
4+
<MicaBackdrop Kind="BaseAlt" />
5+
</SystemBackdropElement.SystemBackdrop>
6+
</SystemBackdropElement>
7+
<Button Content="Button" HorizontalAlignment="Center" VerticalAlignment="Center"/>
8+
</Grid>

‎WinUIGallery/Samples/SampleCode/SystemBackdropElement/SystemBackdropElementMica_xaml.txt‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<Grid Width="300" Height="200">
2+
<SystemBackdropElement CornerRadius="$(CornerRadius)">
3+
<SystemBackdropElement.SystemBackdrop>
4+
<MicaBackdrop Kind="Base" />
5+
</SystemBackdropElement.SystemBackdrop>
6+
</SystemBackdropElement>
7+
<Button Content="Button" HorizontalAlignment="Center" VerticalAlignment="Center"/>
8+
</Grid>

0 commit comments

Comments
 (0)