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/Settings/AppearancePage.xaml

@@ -22,18 +22,50 @@
                     HorizontalAlignment="Stretch"
                     Spacing="{StaticResource SettingsCardSpacing}">
 
-                    <ptControls:ScreenPreview Margin="0,0,0,16" HorizontalAlignment="Left">
-                        <ptControls:CommandPalettePreview
-                            PreviewBackgroundColor="{x:Bind ViewModel.Appearance.EffectiveBackdrop.TintColor, Mode=OneWay}"
-                            PreviewBackgroundImageBlurAmount="{x:Bind ViewModel.Appearance.EffectiveBackgroundImageBlurAmount, Mode=OneWay}"
-                            PreviewBackgroundImageBrightness="{x:Bind ViewModel.Appearance.EffectiveBackgroundImageBrightness, Mode=OneWay}"
-                            PreviewBackgroundImageFit="{x:Bind ViewModel.Appearance.BackgroundImageFit, Mode=OneWay}"
-                            PreviewBackgroundImageSource="{x:Bind ViewModel.Appearance.EffectiveBackgroundImageSource, Mode=OneWay}"
-                            PreviewBackgroundImageTint="{x:Bind ViewModel.Appearance.EffectiveThemeColor, Mode=OneWay}"
-                            PreviewBackgroundImageTintIntensity="{x:Bind ViewModel.Appearance.ColorIntensity, Mode=OneWay}"
-                            PreviewBackgroundOpacity="{x:Bind ViewModel.Appearance.EffectiveBackdrop.TintOpacity, Mode=OneWay}"
-                            RequestedTheme="{x:Bind ViewModel.Appearance.EffectiveTheme, Mode=OneWay}" />
-                    </ptControls:ScreenPreview>
+                    <StackPanel
+                        Margin="0,0,0,16"
+                        HorizontalAlignment="Left"
+                        Orientation="Horizontal"
+                        Spacing="16">
+                        <ptControls:ScreenPreview>
+                            <ptControls:CommandPalettePreview
+                                PreviewBackdropStyle="{x:Bind ViewModel.Appearance.EffectiveBackdropStyle, Mode=OneWay}"
+                                PreviewBackgroundColor="{x:Bind ViewModel.Appearance.EffectiveBackdrop.TintColor, Mode=OneWay}"
+                                PreviewBackgroundImageBlurAmount="{x:Bind ViewModel.Appearance.EffectiveBackgroundImageBlurAmount, Mode=OneWay}"
+                                PreviewBackgroundImageBrightness="{x:Bind ViewModel.Appearance.EffectiveBackgroundImageBrightness, Mode=OneWay}"
+                                PreviewBackgroundImageFit="{x:Bind ViewModel.Appearance.BackgroundImageFit, Mode=OneWay}"
+                                PreviewBackgroundImageOpacity="{x:Bind ViewModel.Appearance.EffectiveImageOpacity, Mode=OneWay}"
+                                PreviewBackgroundImageSource="{x:Bind ViewModel.Appearance.EffectiveBackgroundImageSource, Mode=OneWay}"
+                                PreviewBackgroundImageTint="{x:Bind ViewModel.Appearance.EffectiveThemeColor, Mode=OneWay}"
+                                PreviewBackgroundImageTintIntensity="{x:Bind ViewModel.Appearance.EffectiveTintIntensity, Mode=OneWay}"
+                                PreviewEffectiveOpacity="{x:Bind ViewModel.Appearance.EffectiveBackdrop.EffectiveOpacity, Mode=OneWay}"
+                                RequestedTheme="{x:Bind ViewModel.Appearance.EffectiveTheme, Mode=OneWay}" />
+                        </ptControls:ScreenPreview>
+                        <StackPanel VerticalAlignment="Bottom" Spacing="8">
+                            <Button
+                                x:Uid="Settings_AppearancePage_OpenCommandPaletteButton"
+                                MinWidth="200"
+                                HorizontalContentAlignment="Left"
+                                Click="OpenCommandPalette_Click"
+                                Style="{StaticResource SubtleButtonStyle}">
+                                <StackPanel Orientation="Horizontal" Spacing="8">
+                                    <FontIcon FontSize="16" Glyph="&#xE8A7;" />
+                                    <TextBlock x:Uid="Settings_AppearancePage_OpenCommandPaletteButton_Text" />
+                                </StackPanel>
+                            </Button>
+                            <Button
+                                x:Uid="Settings_AppearancePage_ResetAppearanceButton"
+                                MinWidth="200"
+                                HorizontalContentAlignment="Left"
+                                Command="{x:Bind ViewModel.Appearance.ResetAppearanceSettingsCommand}"
+                                Style="{StaticResource SubtleButtonStyle}">
+                                <StackPanel Orientation="Horizontal" Spacing="8">
+                                    <FontIcon FontSize="16" Glyph="&#xE72C;" />
+                                    <TextBlock x:Uid="Settings_AppearancePage_ResetAppearanceButton_Text" />
+                                </StackPanel>
+                            </Button>
+                        </StackPanel>
+                    </StackPanel>
 
                     <controls:SettingsCard x:Uid="Settings_GeneralPage_AppTheme_SettingsCard" HeaderIcon="{ui:FontIcon Glyph=&#xE793;}">
                         <ComboBox MinWidth="{StaticResource SettingActionControlMinWidth}" SelectedIndex="{x:Bind ViewModel.Appearance.ThemeIndex, Mode=TwoWay}">
@@ -62,19 +94,67 @@
                         </ComboBox>
                     </controls:SettingsCard>
 
+                    <controls:SettingsExpander
+                        x:Uid="Settings_GeneralPage_BackdropStyle_SettingsCard"
+                        HeaderIcon="{ui:FontIcon Glyph=&#xF5EF;}"
+                        IsExpanded="{x:Bind ViewModel.Appearance.IsBackdropOpacityVisible, Mode=OneWay}">
+                        <ComboBox MinWidth="{StaticResource SettingActionControlMinWidth}" SelectedIndex="{x:Bind ViewModel.Appearance.BackdropStyleIndex, Mode=TwoWay}">
+                            <ComboBoxItem x:Uid="Settings_GeneralPage_BackdropStyle_Acrylic" />
+                            <ComboBoxItem x:Uid="Settings_GeneralPage_BackdropStyle_Transparent" />
+                            <ComboBoxItem x:Uid="Settings_GeneralPage_BackdropStyle_Mica" />
+                            <!--  Hidden: preview not working well, kept to preserve index mapping  -->
+                            <ComboBoxItem x:Uid="Settings_GeneralPage_BackdropStyle_AcrylicThin" Visibility="Collapsed" />
+                            <ComboBoxItem x:Uid="Settings_GeneralPage_BackdropStyle_MicaAlt" />
+                        </ComboBox>
+                        <controls:SettingsExpander.Items>
+                            <!--  Mica description (no opacity control)  -->
+                            <controls:SettingsCard
+                                x:Uid="Settings_GeneralPage_MicaBackdrop_SettingsCard"
+                                HorizontalContentAlignment="Stretch"
+                                ContentAlignment="Vertical"
+                                Visibility="{x:Bind ViewModel.Appearance.IsMicaBackdropDescriptionVisible, Mode=OneWay}">
+                                <TextBlock
+                                    x:Uid="Settings_GeneralPage_MicaBackdrop_DescriptionTextBlock"
+                                    Margin="24"
+                                    HorizontalAlignment="Stretch"
+                                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                                    HorizontalTextAlignment="Center"
+                                    TextAlignment="Center"
+                                    TextWrapping="WrapWholeWords" />
+                            </controls:SettingsCard>
+                            <!--  Opacity slider (for non-Mica styles)  -->
+                            <controls:SettingsCard x:Uid="Settings_GeneralPage_BackdropOpacity_SettingsCard" Visibility="{x:Bind ViewModel.Appearance.IsBackdropOpacityVisible, Mode=OneWay}">
+                                <Slider
+                                    MinWidth="{StaticResource SettingActionControlMinWidth}"
+                                    Maximum="100"
+                                    Minimum="0"
+                                    StepFrequency="1"
+                                    Value="{x:Bind ViewModel.Appearance.BackdropOpacity, Mode=TwoWay}" />
+                            </controls:SettingsCard>
+                        </controls:SettingsExpander.Items>
+                    </controls:SettingsExpander>
+
                     <controls:SettingsExpander
                         x:Uid="Settings_GeneralPage_Background_SettingsExpander"
                         HeaderIcon="{ui:FontIcon Glyph=&#xE790;}"
+                        IsEnabled="{x:Bind ViewModel.Appearance.IsBackgroundSettingsEnabled, Mode=OneWay}"
                         IsExpanded="{x:Bind ViewModel.Appearance.IsColorizationDetailsExpanded, Mode=TwoWay}">
-                        <ComboBox
-                            x:Uid="Settings_GeneralPage_ColorizationMode"
-                            MinWidth="{StaticResource SettingActionControlMinWidth}"
-                            SelectedIndex="{x:Bind ViewModel.Appearance.ColorizationModeIndex, Mode=TwoWay}">
-                            <ComboBoxItem x:Uid="Settings_GeneralPage_ColorizationMode_None" />
-                            <ComboBoxItem x:Uid="Settings_GeneralPage_ColorizationMode_WindowsAccent" />
-                            <ComboBoxItem x:Uid="Settings_GeneralPage_ColorizationMode_CustomColor" />
-                            <ComboBoxItem x:Uid="Settings_GeneralPage_ColorizationMode_Image" />
-                        </ComboBox>
+                        <Grid>
+                            <ComboBox
+                                x:Uid="Settings_GeneralPage_ColorizationMode"
+                                MinWidth="{StaticResource SettingActionControlMinWidth}"
+                                SelectedIndex="{x:Bind ViewModel.Appearance.ColorizationModeIndex, Mode=TwoWay}"
+                                Visibility="{x:Bind ViewModel.Appearance.IsBackgroundSettingsEnabled, Mode=OneWay}">
+                                <ComboBoxItem x:Uid="Settings_GeneralPage_ColorizationMode_None" />
+                                <ComboBoxItem x:Uid="Settings_GeneralPage_ColorizationMode_WindowsAccent" />
+                                <ComboBoxItem x:Uid="Settings_GeneralPage_ColorizationMode_CustomColor" />
+                                <ComboBoxItem x:Uid="Settings_GeneralPage_ColorizationMode_Image" />
+                            </ComboBox>
+                            <TextBlock
+                                x:Uid="Settings_GeneralPage_Background_NotAvailable"
+                                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                                Visibility="{x:Bind ViewModel.Appearance.IsBackgroundNotAvailableVisible, Mode=OneWay}" />
+                        </Grid>
                         <controls:SettingsExpander.Items>
                             <!--  none  -->
                             <controls:SettingsCard
@@ -155,7 +235,7 @@
                                     PaletteColors="{x:Bind ViewModel.Appearance.Swatches}"
                                     SelectedColor="{x:Bind ViewModel.Appearance.ThemeColor, Mode=TwoWay}" />
                             </controls:SettingsCard>
-                            <controls:SettingsCard x:Uid="Settings_GeneralPage_BackgroundTintIntensity_SettingsCard" Visibility="{x:Bind ViewModel.Appearance.IsCustomTintIntensityVisible, Mode=OneWay}">
+                            <controls:SettingsCard x:Uid="Settings_GeneralPage_BackgroundTintIntensity_SettingsCard" Visibility="{x:Bind ViewModel.Appearance.IsColorIntensityVisible, Mode=OneWay}">
                                 <Slider
                                     MinWidth="{StaticResource SettingActionControlMinWidth}"
                                     Maximum="100"
@@ -163,9 +243,17 @@
                                     StepFrequency="1"
                                     Value="{x:Bind ViewModel.Appearance.ColorIntensity, Mode=TwoWay}" />
                             </controls:SettingsCard>
+                            <controls:SettingsCard x:Uid="Settings_GeneralPage_ImageTintIntensity_SettingsCard" Visibility="{x:Bind ViewModel.Appearance.IsImageTintIntensityVisible, Mode=OneWay}">
+                                <Slider
+                                    MinWidth="{StaticResource SettingActionControlMinWidth}"
+                                    Maximum="100"
+                                    Minimum="0"
+                                    StepFrequency="1"
+                                    Value="{x:Bind ViewModel.Appearance.BackgroundImageTintIntensity, Mode=TwoWay}" />
+                            </controls:SettingsCard>
 
-                            <!--  Reset background image properties  -->
-                            <controls:SettingsCard x:Uid="Settings_GeneralPage_BackgroundImage_ResetProperties_SettingsCard" Visibility="{x:Bind ViewModel.Appearance.IsBackgroundControlsVisible, Mode=OneWay}">
+                            <!--  Reset appearance properties  -->
+                            <controls:SettingsCard x:Uid="Settings_GeneralPage_BackgroundImage_ResetProperties_SettingsCard" Visibility="{x:Bind ViewModel.Appearance.IsResetButtonVisible, Mode=OneWay}">
                                 <StackPanel Orientation="Horizontal" Spacing="8">
                                     <Button x:Uid="Settings_GeneralPage_Background_ResetImagePropertiesButton" Command="{x:Bind ViewModel.Appearance.ResetBackgroundImagePropertiesCommand}" />
                                 </StackPanel>

src/modules/cmdpal/Microsoft.CmdPal.UI/Settings/AppearancePage.xaml.cs

@@ -3,8 +3,13 @@
 // See the LICENSE file in the project root for more information.
 
 using System.Diagnostics;
+using CommunityToolkit.Mvvm.Messaging;
 using ManagedCommon;
+using Microsoft.CmdPal.Core.ViewModels.Messages;
+using Microsoft.CmdPal.UI.Events;
+using Microsoft.CmdPal.UI.Messages;
 using Microsoft.CmdPal.UI.ViewModels;
+using Microsoft.CmdPal.UI.ViewModels.Messages;
 using Microsoft.CmdPal.UI.ViewModels.Services;
 using Microsoft.Extensions.DependencyInjection;
 using Microsoft.UI;
@@ -12,6 +17,7 @@ using Microsoft.UI.Xaml;
 using Microsoft.UI.Xaml.Controls;
 using Microsoft.UI.Xaml.Documents;
 using Microsoft.Windows.Storage.Pickers;
+using Windows.Win32.Foundation;
 
 namespace Microsoft.CmdPal.UI.Settings;
 
@@ -86,4 +92,9 @@ public sealed partial class AppearancePage : Page
             }
         });
     }
+
+    private void OpenCommandPalette_Click(object sender, RoutedEventArgs e)
+    {
+        WeakReferenceMessenger.Default.Send<HotkeySummonMessage>(new(string.Empty, HWND.Null));
+    }
 }