[ADD] SystemBackdropHost Control Sample Page #2079

rashmi-thakurr · 2025-11-19T10:28:51Z

Description

Adds Samples for SystemBackdropHost Control

Motivation and Context

Provides a clearer example of how to use SystemBackdropHost. Helps developers understand and test the newer backdrop APIs.

How Has This Been Tested?

Tested in WinUI Gallery on Windows 11. Verified backdrop switching, CornerRadius updates, and sample loading without errors in Debug and Release.

Screenshots (if appropriate):

Types of changes

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)

rashmi-thakurr · 2025-11-19T10:37:48Z

@rashmi-thakurr please read the following Contributor License Agreement(CLA). If you agree with the CLA, please reply with the following information.
@microsoft-github-policy-service agree [company="{your company}"]
Options:

(default - no company specified) I have sole ownership of intellectual property rights to my Submissions and I am not making Submissions in the course of work for my employer.
@microsoft-github-policy-service agree
(when company given) I am making Submissions in the course of work for my employer (or my employer has intellectual property rights in my Submissions by contract or applicable law). I have permission from my employer to make Submissions and enter into this Agreement on behalf of my employer. By signing below, the defined term “You” includes me and my employer.
@microsoft-github-policy-service agree company="Microsoft"
Contributor License Agreement

@microsoft-github-policy-service agree company="Microsoft"

niels9001 · 2025-11-19T14:14:31Z

@rashmi-thakurr Exciting to see this new feature land :)!

The main branch is used for the latest stable release. Therefore, this PR should merge into: the 2.0 branch. Once 2.0 hits stable we will then merge that branch into main

niels9001 · 2025-11-19T14:15:10Z

WinUIGallery/Samples/ControlPages/SystemBackdropHostPage.xaml

+                    </ComboBox>
+                    <Slider x:Name="CornerRadiusSlider" Header="Corner Radius" Maximum="50" Minimum="0" StepFrequency="1" Value="8" ValueChanged="CornerRadiusSlider_ValueChanged" />
+                    <TextBlock>
+						<Run Text="Current Radius: " />


Suggested change

<Run Text="Current Radius: " />

<Run Text="Current radius: " />

niels9001 · 2025-11-19T14:19:08Z

WinUIGallery/Samples/Data/ControlInfoData.json

+          "Subtitle": "A control to host system backdrop materials.",
+          "ImagePath": "ms-appx:///Assets/ControlImages/Acrylic.png",
+          "Description": "SystemBackdropHost allows you to apply system backdrop materials to specific UI elements.",
+          "Description": "SystemBackdropHost is developed to enable seamless Acrylic effects for individual surfaces and controls in WinUI3 apps. This control allows developers to easily apply system backdrops (like Acrylic and Mica) anywhere in their app UI.",


SystemBackdropHost enables applying Mica and Acrylic to individual UI elements within an app experience, extending these materials beyond the window background for more flexible and immersive designs.

niels9001 · 2025-11-19T14:19:33Z

WinUIGallery/Samples/SampleCode/SystemBackdropHost/SystemBackdropHostAcrylic_xaml.txt

+            <DesktopAcrylicBackdrop />
+        </SystemBackdropHost.SystemBackdrop>
+    </SystemBackdropHost>
+    <Button Content="Click Me" HorizontalAlignment="Center" VerticalAlignment="Center"/>


Suggested change

<Button Content="Click Me" HorizontalAlignment="Center" VerticalAlignment="Center"/>

<Button Content="Button" HorizontalAlignment="Center" VerticalAlignment="Center"/>

niels9001 · 2025-11-19T14:19:45Z

WinUIGallery/Samples/SampleCode/SystemBackdropHost/SystemBackdropHostMica_xaml.txt

+            <MicaBackdrop Kind="Base" />
+        </SystemBackdropHost.SystemBackdrop>
+    </SystemBackdropHost>
+    <Button Content="Click Me" HorizontalAlignment="Center" VerticalAlignment="Center"/>


Suggested change

<Button Content="Click Me" HorizontalAlignment="Center" VerticalAlignment="Center"/>

<Button Content="Button" HorizontalAlignment="Center" VerticalAlignment="Center"/>

niels9001 · 2025-11-19T14:19:55Z

WinUIGallery/Samples/SampleCode/SystemBackdropHost/SystemBackdropHostMicaAlt_xaml.txt

+            <MicaBackdrop Kind="BaseAlt" />
+        </SystemBackdropHost.SystemBackdrop>
+    </SystemBackdropHost>
+    <Button Content="Click Me" HorizontalAlignment="Center" VerticalAlignment="Center"/>


Suggested change

<Button Content="Click Me" HorizontalAlignment="Center" VerticalAlignment="Center"/>

<Button Content="Button" HorizontalAlignment="Center" VerticalAlignment="Center"/>

niels9001 · 2025-11-19T14:20:19Z

WinUIGallery/Samples/ControlPages/SystemBackdropHostPage.xaml

+                        <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" />


Suggested change

<Slider x:Name="CornerRadiusSlider" Header="Corner Radius" Maximum="50" Minimum="0" StepFrequency="1" Value="8" ValueChanged="CornerRadiusSlider_ValueChanged" />

<Slider x:Name="CornerRadiusSlider" Header="Corner radius" Maximum="50" Minimum="0" StepFrequency="1" Value="8" ValueChanged="CornerRadiusSlider_ValueChanged" />

niels9001 · 2025-11-19T14:21:26Z

WinUIGallery/Samples/ControlPages/SystemBackdropHostPage.xaml

+                        <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" />
+                    <TextBlock>


For the sake of simplicity, do we need to plot the value? Why not just the slider?

AndrewKeepCoding · 2025-11-20T05:27:10Z

WinUIGallery/Samples/ControlPages/SystemBackdropHostPage.xaml.cs

+        }
+    }
+
+    private void CornerRadiusSlider_ValueChanged(object sender, Microsoft.UI.Xaml.Controls.Primitives.RangeBaseValueChangedEventArgs e)


This makes the code cleaner and more consistent with the rest of the file. 🙂

Suggested change

private void CornerRadiusSlider_ValueChanged(object sender, Microsoft.UI.Xaml.Controls.Primitives.RangeBaseValueChangedEventArgs e)

private void CornerRadiusSlider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)

AndrewKeepCoding · 2025-11-20T05:28:25Z

WinUIGallery/Samples/Data/ControlInfoData.json

+          "Subtitle": "A control to host system backdrop materials.",
+          "ImagePath": "ms-appx:///Assets/ControlImages/Acrylic.png",
+          "Description": "SystemBackdropHost allows you to apply system backdrop materials to specific UI elements.",
+          "Description": "SystemBackdropHost is developed to enable seamless Acrylic effects for individual surfaces and controls in WinUI3 apps. This control allows developers to easily apply system backdrops (like Acrylic and Mica) anywhere in their app UI.",


Nit: For consistency, use "WinUI 3" instead of "WinUI3".

godlytalias · 2025-11-20T06:59:29Z

WinUIGallery/Samples/Data/ControlInfoData.json

+          "ApiNamespace": "Microsoft.UI.Xaml.Controls",
+          "Subtitle": "A control to host system backdrop materials.",
+          "ImagePath": "ms-appx:///Assets/ControlImages/Acrylic.png",
+          "Description": "SystemBackdropHost allows you to apply system backdrop materials to specific UI elements.",


May be better to mention 'specific area inside the UI tree' as we are not applying backdrop directly to ui elements

[ADD] Add new SystemBackdropHost Control Sample Page

c327668

niels9001 requested changes Nov 19, 2025

View reviewed changes

AndrewKeepCoding reviewed Nov 20, 2025

View reviewed changes

godlytalias reviewed Nov 20, 2025

View reviewed changes

	<Run Text="Current Radius: " />
	<Run Text="Current radius: " />

	<Button Content="Click Me" HorizontalAlignment="Center" VerticalAlignment="Center"/>
	<Button Content="Button" HorizontalAlignment="Center" VerticalAlignment="Center"/>

	<Slider x:Name="CornerRadiusSlider" Header="Corner Radius" Maximum="50" Minimum="0" StepFrequency="1" Value="8" ValueChanged="CornerRadiusSlider_ValueChanged" />
	<Slider x:Name="CornerRadiusSlider" Header="Corner radius" Maximum="50" Minimum="0" StepFrequency="1" Value="8" ValueChanged="CornerRadiusSlider_ValueChanged" />

	private void CornerRadiusSlider_ValueChanged(object sender, Microsoft.UI.Xaml.Controls.Primitives.RangeBaseValueChangedEventArgs e)
	private void CornerRadiusSlider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)

[ADD] SystemBackdropHost Control Sample Page #2079

Are you sure you want to change the base?

[ADD] SystemBackdropHost Control Sample Page #2079

Uh oh!

Conversation

rashmi-thakurr commented Nov 19, 2025

Description

Motivation and Context

How Has This Been Tested?

Screenshots (if appropriate):

Types of changes

Uh oh!

rashmi-thakurr commented Nov 19, 2025

Uh oh!

niels9001 commented Nov 19, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants