Add list background opacity setting for CmdPal

Co-authored-by: crutkas <1462282+crutkas@users.noreply.github.com>

src/modules/cmdpal/Microsoft.CmdPal.UI.ViewModels/SettingsModel.cs

@@ -50,6 +50,8 @@ public partial class SettingsModel : ObservableObject
 
     public MonitorBehavior SummonOn { get; set; } = MonitorBehavior.ToMouse;
 
+    public int ListBackgroundOpacity { get; set; } = 100;
+
     // END SETTINGS
     ///////////////////////////////////////////////////////////////////////////
 

src/modules/cmdpal/Microsoft.CmdPal.UI.ViewModels/SettingsViewModel.cs

@@ -118,6 +118,17 @@ public partial class SettingsViewModel : INotifyPropertyChanged
         }
     }
 
+    public int ListBackgroundOpacity
+    {
+        get => _settings.ListBackgroundOpacity;
+        set
+        {
+            _settings.ListBackgroundOpacity = value;
+            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(ListBackgroundOpacity)));
+            Save();
+        }
+    }
+
     public ObservableCollection<ProviderSettingsViewModel> CommandProviders { get; } = [];
 
     public SettingsViewModel(SettingsModel settings, IServiceProvider serviceProvider, TaskScheduler scheduler)

src/modules/cmdpal/Microsoft.CmdPal.UI/Converters/PercentageToOpacityConverter.cs

@@ -0,0 +1,30 @@
+// Copyright (c) Microsoft Corporation
+// The Microsoft Corporation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using Microsoft.UI.Xaml.Data;
+
+namespace Microsoft.CmdPal.UI.Converters;
+
+public class PercentageToOpacityConverter : IValueConverter
+{
+    public object Convert(object value, Type targetType, object parameter, string language)
+    {
+        if (value is int percentage)
+        {
+            return percentage / 100.0;
+        }
+
+        return 1.0;
+    }
+
+    public object ConvertBack(object value, Type targetType, object parameter, string language)
+    {
+        if (value is double opacity)
+        {
+            return (int)(opacity * 100);
+        }
+
+        return 100;
+    }
+}

src/modules/cmdpal/Microsoft.CmdPal.UI/ExtViews/ListPage.xaml

@@ -6,6 +6,7 @@
     xmlns:controls="using:CommunityToolkit.WinUI.Controls"
     xmlns:converters="using:CommunityToolkit.WinUI.Converters"
     xmlns:cpcontrols="using:Microsoft.CmdPal.UI.Controls"
+    xmlns:cpconverters="using:Microsoft.CmdPal.UI.Converters"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:help="using:Microsoft.CmdPal.UI.Helpers"
     xmlns:local="using:Microsoft.CmdPal.UI"
@@ -27,6 +28,8 @@
             EmptyValue="Collapsed"
             NotEmptyValue="Visible" />
 
+        <cpconverters:PercentageToOpacityConverter x:Key="PercentageToOpacityConverter" />
+
         <DataTemplate x:Key="TagTemplate" x:DataType="viewmodels:TagViewModel">
             <cpcontrols:Tag
                 AutomationProperties.Name="{x:Bind Text, Mode=OneWay}"
@@ -119,6 +122,9 @@
                     ItemTemplate="{StaticResource ListItemViewModelTemplate}"
                     ItemsSource="{x:Bind ViewModel.FilteredItems, Mode=OneWay}"
                     SelectionChanged="ItemsList_SelectionChanged">
+                    <ListView.Background>
+                        <SolidColorBrush Color="{ThemeResource SystemChromeMediumLowColor}" Opacity="{x:Bind ListBackgroundOpacity, Mode=OneWay, Converter={StaticResource PercentageToOpacityConverter}}" />
+                    </ListView.Background>
                     <ListView.ItemContainerTransitions>
                         <TransitionCollection />
                     </ListView.ItemContainerTransitions>

src/modules/cmdpal/Microsoft.CmdPal.UI/ExtViews/ListPage.xaml.cs

@@ -13,6 +13,7 @@ using Microsoft.UI.Xaml.Controls;
 using Microsoft.UI.Xaml.Input;
 using Microsoft.UI.Xaml.Media;
 using Microsoft.UI.Xaml.Navigation;
+using System.ComponentModel;
 
 namespace Microsoft.CmdPal.UI;
 
@@ -20,8 +21,12 @@ public sealed partial class ListPage : Page,
     IRecipient<NavigateNextCommand>,
     IRecipient<NavigatePreviousCommand>,
     IRecipient<ActivateSelectedListItemMessage>,
-    IRecipient<ActivateSecondaryCommandMessage>
+    IRecipient<ActivateSecondaryCommandMessage>,
+    INotifyPropertyChanged
 {
+    public event PropertyChangedEventHandler? PropertyChanged;
+
+    private SettingsModel? _settings;
     private ListViewModel? ViewModel
     {
         get => (ListViewModel?)GetValue(ViewModelProperty);
@@ -37,6 +42,19 @@ public sealed partial class ListPage : Page,
         this.InitializeComponent();
         this.NavigationCacheMode = NavigationCacheMode.Disabled;
         this.ItemsList.Loaded += ItemsList_Loaded;
+        
+        _settings = App.Current.Services.GetService<SettingsModel>()!;
+        _settings.SettingsChanged += Settings_SettingsChanged;
+    }
+
+    public int ListBackgroundOpacity
+    {
+        get => _settings?.ListBackgroundOpacity ?? 100;
+    }
+
+    private void Settings_SettingsChanged(SettingsModel sender, object? args)
+    {
+        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(ListBackgroundOpacity)));
     }
 
     protected override void OnNavigatedTo(NavigationEventArgs e)
@@ -78,6 +96,11 @@ public sealed partial class ListPage : Page,
             ViewModel.ItemsUpdated -= Page_ItemsUpdated;
         }
 
+        if (_settings != null)
+        {
+            _settings.SettingsChanged -= Settings_SettingsChanged;
+        }
+
         if (e.NavigationMode != NavigationMode.New)
         {
             ViewModel?.SafeCleanup();
@@ -96,8 +119,7 @@ public sealed partial class ListPage : Page,
     {
         if (e.ClickedItem is ListItemViewModel item)
         {
-            var settings = App.Current.Services.GetService<SettingsModel>()!;
-            if (settings.SingleClickActivates)
+            if (_settings!.SingleClickActivates)
             {
                 ViewModel?.InvokeItemCommand.Execute(item);
             }
@@ -113,8 +135,7 @@ public sealed partial class ListPage : Page,
     {
         if (ItemsList.SelectedItem is ListItemViewModel vm)
         {
-            var settings = App.Current.Services.GetService<SettingsModel>()!;
-            if (!settings.SingleClickActivates)
+            if (!_settings!.SingleClickActivates)
             {
                 ViewModel?.InvokeItemCommand.Execute(vm);
             }

src/modules/cmdpal/Microsoft.CmdPal.UI/Settings/GeneralPage.xaml

@@ -84,6 +84,16 @@
                         <ToggleSwitch IsOn="{x:Bind viewModel.ShowSystemTrayIcon, Mode=TwoWay}" />
                     </controls:SettingsCard>
 
+                    <TextBlock x:Uid="AppearanceSettingsHeader" Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />
+
+                    <controls:SettingsCard x:Uid="Settings_GeneralPage_ListBackgroundOpacity_SettingsCard" HeaderIcon="{ui:FontIcon Glyph=&#xF12F;}">
+                        <Slider
+                            MinWidth="{StaticResource SettingActionControlMinWidth}"
+                            Maximum="100"
+                            Minimum="0"
+                            Value="{x:Bind viewModel.ListBackgroundOpacity, Mode=TwoWay}" />
+                    </controls:SettingsCard>
+
                     <!--  Example 'About' section  -->
                     <TextBlock x:Uid="AboutSettingsHeader" Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />
 

src/modules/cmdpal/Microsoft.CmdPal.UI/Strings/en-us/Resources.resw

@@ -229,6 +229,18 @@ Right-click to remove the key combination, thereby deactivating the shortcut.</v
     <value>About</value>
     <comment>A section header for information about the app</comment>
   </data>
+  <data name="AppearanceSettingsHeader.Text" xml:space="preserve">
+    <value>Appearance</value>
+    <comment>A section header for appearance-related settings</comment>
+  </data>
+  <data name="Settings_GeneralPage_ListBackgroundOpacity_SettingsCard.Header" xml:space="preserve">
+    <value>List background opacity</value>
+    <comment>Header for a setting that controls the opacity of the results list background</comment>
+  </data>
+  <data name="Settings_GeneralPage_ListBackgroundOpacity_SettingsCard.Description" xml:space="preserve">
+    <value>Make the results list background more or less transparent</value>
+    <comment>Description for the list background opacity setting</comment>
+  </data>
   <data name="ExtensionAboutHeader.Text" xml:space="preserve">
     <value>About</value>
     <comment>A section header for information about the app</comment>

src/settings-ui/Settings.UI.Library/CmdPalProperties.cs

@@ -12,10 +12,13 @@ namespace Microsoft.PowerToys.Settings.UI.Library
     {
         // Default shortcut - Win + Alt + Space
         public static readonly HotkeySettings DefaultHotkeyValue = new HotkeySettings(true, false, true, false, 32);
+        
+        public const int DefaultListBackgroundOpacity = 100;
 
 #pragma warning disable SA1401 // Fields should be private
 #pragma warning disable CA1051 // Do not declare visible instance fields
         public HotkeySettings Hotkey;
+        public int ListBackgroundOpacity;
 #pragma warning restore CA1051 // Do not declare visible instance fields
 #pragma warning restore SA1401 // Fields should be private
 
@@ -45,12 +48,21 @@ namespace Microsoft.PowerToys.Settings.UI.Library
                 {
                     Hotkey = JsonSerializer.Deserialize<HotkeySettings>(hotkeyElement.GetRawText());
                 }
+                
+                if (doc.RootElement.TryGetProperty(nameof(ListBackgroundOpacity), out JsonElement opacityElement))
+                {
+                    ListBackgroundOpacity = opacityElement.GetInt32();
+                }
             }
             catch (Exception)
             {
             }
 
             Hotkey ??= DefaultHotkeyValue;
+            if (ListBackgroundOpacity < 0 || ListBackgroundOpacity > 100)
+            {
+                ListBackgroundOpacity = DefaultListBackgroundOpacity;
+            }
         }
     }
 }

src/settings-ui/Settings.UI/SettingsXAML/Views/CmdPalPage.xaml

@@ -40,6 +40,23 @@
                         </tkcontrols:SettingsCard.Description>
                     </tkcontrols:SettingsCard>
                 </controls:SettingsGroup>
+
+                <controls:SettingsGroup x:Uid="CmdPal_Appearance_GroupSettings" IsEnabled="{x:Bind ViewModel.IsEnabled, Mode=OneWay}">
+                    <tkcontrols:SettingsCard x:Uid="CmdPal_ListBackgroundOpacity" HeaderIcon="{ui:FontIcon Glyph=&#xF12F;}">
+                        <Slider
+                            MinWidth="{StaticResource SettingActionControlMinWidth}"
+                            Maximum="100"
+                            Minimum="0"
+                            Value="{x:Bind Path=ViewModel.ListBackgroundOpacity, Mode=OneWay}"
+                            IsEnabled="False" />
+                        <tkcontrols:SettingsCard.Description>
+                            <HyperlinkButton
+                                x:Name="CmdPalAppearanceSettingsDeeplink"
+                                x:Uid="CmdPal_AppearanceDeeplinkContent"
+                                Click="CmdPalSettingsDeeplink_Click" />
+                        </tkcontrols:SettingsCard.Description>
+                    </tkcontrols:SettingsCard>
+                </controls:SettingsGroup>
             </StackPanel>
         </controls:SettingsPageControl.ModuleContent>
 

src/settings-ui/Settings.UI/Strings/en-us/Resources.resw

@@ -5005,6 +5005,18 @@ To record a specific window, enter the hotkey with the Alt key in the opposite m
   <data name="CmdPal_DeeplinkContent.Content" xml:space="preserve">
     <value>Open Command Palette settings to customize the activation shortcut</value>
   </data>
+  <data name="CmdPal_Appearance_GroupSettings.Header" xml:space="preserve">
+    <value>Appearance</value>
+  </data>
+  <data name="CmdPal_ListBackgroundOpacity.Header" xml:space="preserve">
+    <value>List background opacity</value>
+  </data>
+  <data name="CmdPal_ListBackgroundOpacity.Description" xml:space="preserve">
+    <value>Control the transparency of the results list background</value>
+  </data>
+  <data name="CmdPal_AppearanceDeeplinkContent.Content" xml:space="preserve">
+    <value>Open Command Palette settings to customize appearance settings</value>
+  </data>
   <data name="Help_chromaCIE" xml:space="preserve">
     <value>chroma (CIE LCh)</value>
   </data>

src/settings-ui/Settings.UI/ViewModels/CmdPalViewModel.cs

@@ -26,6 +26,7 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
         private GpoRuleConfigured _enabledGpoRuleConfiguration;
         private bool _isEnabled;
         private HotkeySettings _hotkey;
+        private int _listBackgroundOpacity;
         private IFileSystemWatcher _watcher;
         private DispatcherQueue _uiDispatcherQueue;
         private CmdPalProperties _cmdPalProperties;
@@ -57,15 +58,18 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
 #endif
 
             _hotkey = _cmdPalProperties.Hotkey;
+            _listBackgroundOpacity = _cmdPalProperties.ListBackgroundOpacity;
 
             _watcher = Helper.GetFileWatcher(settingsPath, () =>
             {
                 _cmdPalProperties.InitializeHotkey();
                 _hotkey = _cmdPalProperties.Hotkey;
+                _listBackgroundOpacity = _cmdPalProperties.ListBackgroundOpacity;
 
                 _uiDispatcherQueue.TryEnqueue(() =>
                 {
                     OnPropertyChanged(nameof(Hotkey));
+                    OnPropertyChanged(nameof(ListBackgroundOpacity));
                 });
             });
 
@@ -123,6 +127,15 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
             }
         }
 
+        public int ListBackgroundOpacity
+        {
+            get => _listBackgroundOpacity;
+
+            private set
+            {
+            }
+        }
+
         public bool IsEnabledGpoConfigured { get; private set; }
 
         public void RefreshEnabledState()