CmdPal: Transparent window (#45159)

## Summary

This PR adds:
- Backdrop material customization
  - Alongside acrylic, the following options are now available:
  - Transparent background
  - Mica background
- Background material opacity
  - Lets you control how transparent the background is

## Pictures? Pictures!

<img width="1491" height="928" alt="image"
src="https://github.com/user-attachments/assets/ff4e9e06-fcf1-4f05-bc0a-fb70dc4f39be"
/>



https://github.com/user-attachments/assets/84e83279-afab-481e-b904-f054318c5d2f

<img width="977" height="628" alt="image"
src="https://github.com/user-attachments/assets/241a228d-af3f-448a-94a6-0a282218bd8c"
/>


## PR Checklist

- [x] Closes: #44197
<!-- - [ ] Closes: #yyy (add separate lines for additional resolved
issues) -->
- [ ] **Communication:** I've discussed this with core contributors
already. If the work hasn't been agreed, this work might be rejected
- [ ] **Tests:** Added/updated and all pass
- [ ] **Localization:** All end-user-facing strings can be localized
- [ ] **Dev docs:** Added/updated
- [ ] **New binaries:** Added on the required places
- [ ] [JSON for
signing](https://github.com/microsoft/PowerToys/blob/main/.pipelines/ESRPSigning_core.json)
for new binaries
- [ ] [WXS for
installer](https://github.com/microsoft/PowerToys/blob/main/installer/PowerToysSetup/Product.wxs)
for new binaries and localization folder
- [ ] [YML for CI
pipeline](https://github.com/microsoft/PowerToys/blob/main/.pipelines/ci/templates/build-powertoys-steps.yml)
for new test projects
- [ ] [YML for signed
pipeline](https://github.com/microsoft/PowerToys/blob/main/.pipelines/release.yml)
- [ ] **Documentation updated:** If checked, please file a pull request
on [our docs
repo](https://github.com/MicrosoftDocs/windows-uwp/tree/docs/hub/powertoys)
and link it here: #xxx

<!-- Provide a more detailed description of the PR, other things fixed,
or any additional comments/features here -->
## Detailed Description of the Pull Request / Additional comments

<!-- Describe how you validated the behavior. Add automated tests
wherever possible, but list manual validation steps taken as well -->
## Validation Steps Performed

src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/BlurImageControl.cs

@@ -288,7 +288,6 @@ internal sealed partial class BlurImageControl : Control
         _effectBrush?.Dispose();
         _effectBrush = effectFactory.CreateBrush();
 
-        // Set initial source
         if (ImageSource is not null)
         {
             _imageBrush ??= _compositor.CreateSurfaceBrush();

src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/CommandPalettePreview.xaml

@@ -16,24 +16,38 @@
         CornerRadius="8"
         Translation="0,0,8">
         <Grid>
+            <!--  Clear style: SolidColorBrush with computed alpha (window backdrop)  -->
             <Border
                 HorizontalAlignment="Stretch"
                 VerticalAlignment="Stretch"
                 BorderBrush="{ThemeResource SurfaceStrokeColorDefaultBrush}"
                 BorderThickness="1"
-                Visibility="{x:Bind h:BindTransformers.NegateVisibility(ShowBackgroundImage), Mode=OneWay}">
+                Visibility="{x:Bind ClearVisibility, Mode=OneWay}">
+                <Border.Background>
+                    <SolidColorBrush Color="{x:Bind EffectiveClearColor, Mode=OneWay}" />
+                </Border.Background>
+            </Border>
+            <!--  Acrylic/Mica style: AcrylicBrush with effective opacity (window backdrop)  -->
+            <Border
+                HorizontalAlignment="Stretch"
+                VerticalAlignment="Stretch"
+                BorderBrush="{ThemeResource SurfaceStrokeColorDefaultBrush}"
+                BorderThickness="1"
+                Visibility="{x:Bind AcrylicVisibility, Mode=OneWay}">
                 <Border.Background>
                     <AcrylicBrush
                         FallbackColor="{x:Bind PreviewBackgroundColor, Mode=OneWay}"
                         TintColor="{x:Bind PreviewBackgroundColor, Mode=OneWay}"
-                        TintOpacity="{x:Bind PreviewBackgroundOpacity, Mode=OneWay}" />
+                        TintOpacity="{x:Bind PreviewEffectiveOpacity, Mode=OneWay}" />
                 </Border.Background>
             </Border>
+            <!--  Background image (inside window, on top of backdrop)  -->
             <local:BlurImageControl
                 HorizontalAlignment="Stretch"
                 VerticalAlignment="Stretch"
                 BlurAmount="{x:Bind PreviewBackgroundImageBlurAmount, Mode=OneWay}"
                 ImageBrightness="{x:Bind PreviewBackgroundImageBrightness, Mode=OneWay}"
+                ImageOpacity="{x:Bind PreviewBackgroundImageOpacity, Mode=OneWay}"
                 ImageSource="{x:Bind PreviewBackgroundImageSource, Mode=OneWay}"
                 ImageStretch="{x:Bind ToStretch(PreviewBackgroundImageFit), Mode=OneWay}"
                 IsHitTestVisible="False"

src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/CommandPalettePreview.xaml.cs

@@ -12,13 +12,11 @@ namespace Microsoft.CmdPal.UI.Controls;
 
 public sealed partial class CommandPalettePreview : UserControl
 {
-    public static readonly DependencyProperty PreviewBackgroundOpacityProperty = DependencyProperty.Register(nameof(PreviewBackgroundOpacity), typeof(double), typeof(CommandPalettePreview), new PropertyMetadata(0d));
+    public static readonly DependencyProperty PreviewBackgroundColorProperty = DependencyProperty.Register(nameof(PreviewBackgroundColor), typeof(Color), typeof(CommandPalettePreview), new PropertyMetadata(default(Color), OnBackdropPropertyChanged));
 
-    public static readonly DependencyProperty PreviewBackgroundColorProperty = DependencyProperty.Register(nameof(PreviewBackgroundColor), typeof(Color), typeof(CommandPalettePreview), new PropertyMetadata(default(Color)));
+    public static readonly DependencyProperty PreviewBackgroundImageSourceProperty = DependencyProperty.Register(nameof(PreviewBackgroundImageSource), typeof(ImageSource), typeof(CommandPalettePreview), new PropertyMetadata(null, OnBackgroundImageSourceChanged));
 
-    public static readonly DependencyProperty PreviewBackgroundImageSourceProperty = DependencyProperty.Register(nameof(PreviewBackgroundImageSource), typeof(ImageSource), typeof(CommandPalettePreview), new PropertyMetadata(null, PropertyChangedCallback));
-
-    public static readonly DependencyProperty PreviewBackgroundImageOpacityProperty = DependencyProperty.Register(nameof(PreviewBackgroundImageOpacity), typeof(int), typeof(CommandPalettePreview), new PropertyMetadata(0));
+    public static readonly DependencyProperty PreviewBackgroundImageOpacityProperty = DependencyProperty.Register(nameof(PreviewBackgroundImageOpacity), typeof(double), typeof(CommandPalettePreview), new PropertyMetadata(1.0));
 
     public static readonly DependencyProperty PreviewBackgroundImageFitProperty = DependencyProperty.Register(nameof(PreviewBackgroundImageFit), typeof(BackgroundImageFit), typeof(CommandPalettePreview), new PropertyMetadata(default(BackgroundImageFit)));
 
@@ -30,7 +28,18 @@ public sealed partial class CommandPalettePreview : UserControl
 
     public static readonly DependencyProperty PreviewBackgroundImageTintIntensityProperty = DependencyProperty.Register(nameof(PreviewBackgroundImageTintIntensity), typeof(int), typeof(CommandPalettePreview), new PropertyMetadata(0));
 
-    public static readonly DependencyProperty ShowBackgroundImageProperty = DependencyProperty.Register(nameof(ShowBackgroundImage), typeof(Visibility), typeof(CommandPalettePreview), new PropertyMetadata(Visibility.Collapsed));
+    public static readonly DependencyProperty ShowBackgroundImageProperty = DependencyProperty.Register(nameof(ShowBackgroundImage), typeof(Visibility), typeof(CommandPalettePreview), new PropertyMetadata(Visibility.Collapsed, OnVisibilityPropertyChanged));
+
+    public static readonly DependencyProperty PreviewBackdropStyleProperty = DependencyProperty.Register(nameof(PreviewBackdropStyle), typeof(BackdropStyle?), typeof(CommandPalettePreview), new PropertyMetadata(null, OnVisibilityPropertyChanged));
+
+    public static readonly DependencyProperty PreviewEffectiveOpacityProperty = DependencyProperty.Register(nameof(PreviewEffectiveOpacity), typeof(double), typeof(CommandPalettePreview), new PropertyMetadata(1.0, OnBackdropPropertyChanged));
+
+    // Computed read-only dependency properties
+    public static readonly DependencyProperty EffectiveClearColorProperty = DependencyProperty.Register(nameof(EffectiveClearColor), typeof(Color), typeof(CommandPalettePreview), new PropertyMetadata(default(Color)));
+
+    public static readonly DependencyProperty AcrylicVisibilityProperty = DependencyProperty.Register(nameof(AcrylicVisibility), typeof(Visibility), typeof(CommandPalettePreview), new PropertyMetadata(Visibility.Visible));
+
+    public static readonly DependencyProperty ClearVisibilityProperty = DependencyProperty.Register(nameof(ClearVisibility), typeof(Visibility), typeof(CommandPalettePreview), new PropertyMetadata(Visibility.Collapsed));
 
     public BackgroundImageFit PreviewBackgroundImageFit
     {
@@ -38,12 +47,6 @@ public sealed partial class CommandPalettePreview : UserControl
         set { SetValue(PreviewBackgroundImageFitProperty, value); }
     }
 
-    public double PreviewBackgroundOpacity
-    {
-        get { return (double)GetValue(PreviewBackgroundOpacityProperty); }
-        set { SetValue(PreviewBackgroundOpacityProperty, value); }
-    }
-
     public Color PreviewBackgroundColor
     {
         get { return (Color)GetValue(PreviewBackgroundColorProperty); }
@@ -56,10 +59,10 @@ public sealed partial class CommandPalettePreview : UserControl
         set { SetValue(PreviewBackgroundImageSourceProperty, value); }
     }
 
-    public int PreviewBackgroundImageOpacity
+    public double PreviewBackgroundImageOpacity
     {
-        get { return (int)GetValue(PreviewBackgroundImageOpacityProperty); }
-        set { SetValue(PreviewBackgroundImageOpacityProperty, value); }
+        get => (double)GetValue(PreviewBackgroundImageOpacityProperty);
+        set => SetValue(PreviewBackgroundImageOpacityProperty, value);
     }
 
     public double PreviewBackgroundImageBrightness
@@ -92,12 +95,48 @@ public sealed partial class CommandPalettePreview : UserControl
         set => SetValue(ShowBackgroundImageProperty, value);
     }
 
+    public BackdropStyle? PreviewBackdropStyle
+    {
+        get => (BackdropStyle?)GetValue(PreviewBackdropStyleProperty);
+        set => SetValue(PreviewBackdropStyleProperty, value);
+    }
+
+    /// <summary>
+    /// Gets or sets the effective opacity for the backdrop, pre-computed by the theme provider.
+    /// For Acrylic style: used directly as TintOpacity.
+    /// For Clear style: used to compute the alpha channel of the solid color.
+    /// </summary>
+    public double PreviewEffectiveOpacity
+    {
+        get => (double)GetValue(PreviewEffectiveOpacityProperty);
+        set => SetValue(PreviewEffectiveOpacityProperty, value);
+    }
+
+    // Computed read-only properties
+    public Color EffectiveClearColor
+    {
+        get => (Color)GetValue(EffectiveClearColorProperty);
+        private set => SetValue(EffectiveClearColorProperty, value);
+    }
+
+    public Visibility AcrylicVisibility
+    {
+        get => (Visibility)GetValue(AcrylicVisibilityProperty);
+        private set => SetValue(AcrylicVisibilityProperty, value);
+    }
+
+    public Visibility ClearVisibility
+    {
+        get => (Visibility)GetValue(ClearVisibilityProperty);
+        private set => SetValue(ClearVisibilityProperty, value);
+    }
+
     public CommandPalettePreview()
     {
         InitializeComponent();
     }
 
-    private static void PropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
+    private static void OnBackgroundImageSourceChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
     {
         if (d is not CommandPalettePreview preview)
         {
@@ -107,7 +146,46 @@ public sealed partial class CommandPalettePreview : UserControl
         preview.ShowBackgroundImage = e.NewValue is ImageSource ? Visibility.Visible : Visibility.Collapsed;
     }
 
-    private double ToOpacity(int value) => value / 100.0;
+    private static void OnBackdropPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+    {
+        if (d is not CommandPalettePreview preview)
+        {
+            return;
+        }
+
+        preview.UpdateComputedClearColor();
+    }
+
+    private static void OnVisibilityPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+    {
+        if (d is not CommandPalettePreview preview)
+        {
+            return;
+        }
+
+        preview.UpdateComputedVisibilityProperties();
+        preview.UpdateComputedClearColor();
+    }
+
+    private void UpdateComputedClearColor()
+    {
+        EffectiveClearColor = Color.FromArgb(
+            (byte)(PreviewEffectiveOpacity * 255),
+            PreviewBackgroundColor.R,
+            PreviewBackgroundColor.G,
+            PreviewBackgroundColor.B);
+    }
+
+    private void UpdateComputedVisibilityProperties()
+    {
+        var config = BackdropStyles.Get(PreviewBackdropStyle ?? BackdropStyle.Acrylic);
+
+        // Show backdrop effect based on style (on top of any background image)
+        AcrylicVisibility = config.PreviewBrush == PreviewBrushKind.Acrylic
+            ? Visibility.Visible : Visibility.Collapsed;
+        ClearVisibility = config.PreviewBrush == PreviewBrushKind.Solid
+            ? Visibility.Visible : Visibility.Collapsed;
+    }
 
     private double ToTintIntensity(int value) => value / 100.0;