[CmdPal] Settings page refresh (#43487)

- Refreshed the CmdPal page.
- CmdPal can now also be activated from this page by clicking a button
- Added a Preview InfoBar for FL in AP

<img width="1384" height="1067" alt="image"
src="https://github.com/user-attachments/assets/f670e13b-5b4a-4f6a-bcb0-e1dc357afb1e"
/>

## Summary of the Pull Request

<!-- Please review the items on the PR checklist before submitting-->
## PR Checklist

- [ ] Closes: #xxx
- [ ] **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

---------

Co-authored-by: vanzue <vanzue@outlook.com>

Directory.Packages.props

@@ -7,6 +7,7 @@
     <PackageVersion Include="AdaptiveCards.ObjectModel.WinUI3" Version="2.0.0-beta" />
     <PackageVersion Include="AdaptiveCards.Rendering.WinUI3" Version="2.1.0-beta" />
     <PackageVersion Include="AdaptiveCards.Templating" Version="2.0.5" />
+    <PackageVersion Include="CommunityToolkit.Labs.WinUI.Controls.OpacityMaskView" Version="0.1.251101-build.2372" />
     <PackageVersion Include="Microsoft.Bot.AdaptiveExpressions.Core" Version="4.23.0" />
     <PackageVersion Include="Appium.WebDriver" Version="4.4.5" />
     <PackageVersion Include="CoenM.ImageSharp.ImageHash" Version="1.3.6" />

NOTICE.md

@@ -1498,6 +1498,7 @@ SOFTWARE.
 - CoenM.ImageSharp.ImageHash
 - CommunityToolkit.Common
 - CommunityToolkit.Labs.WinUI.Controls.MarkdownTextBlock
+- CommunityToolkit.Labs.WinUI.Controls.OpacityMaskView
 - CommunityToolkit.Mvvm
 - CommunityToolkit.WinUI.Animations
 - CommunityToolkit.WinUI.Collections

src/settings-ui/Settings.UI/PowerToys.Settings.csproj

@@ -28,6 +28,8 @@
 		<None Remove="Assets\Settings\Icons\Models\WindowsML.svg" />
 		<None Remove="Assets\Settings\Modules\APDialog.dark.png" />
 		<None Remove="Assets\Settings\Modules\APDialog.light.png" />
+		<None Remove="Assets\Settings\Modules\CmdPal_Background.png" />
+		<None Remove="Assets\Settings\Modules\CmdPal_Hero.png" />
 		<None Remove="Assets\Settings\Modules\LightSwitch.png" />
 		<None Remove="SettingsXAML\Controls\Dashboard\CheckUpdateControl.xaml" />
 		<None Remove="SettingsXAML\Controls\Dashboard\ShortcutConflictControl.xaml" />
@@ -71,6 +73,7 @@
 	</ItemGroup>
 
 	<ItemGroup>
+		<PackageReference Include="CommunityToolkit.Labs.WinUI.Controls.OpacityMaskView" />
 		<PackageReference Include="CommunityToolkit.WinUI.Controls.Segmented" />
 		<PackageReference Include="CommunityToolkit.WinUI.Controls.SettingsControls" />
 		<PackageReference Include="CommunityToolkit.WinUI.Controls.Primitives" />

src/settings-ui/Settings.UI/SettingsXAML/Controls/ModelPicker/FoundryLocalModelPicker.xaml

@@ -30,6 +30,24 @@
     </UserControl.Resources>
 
     <Grid>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="*" />
+            <RowDefinition Height="Auto" />
+        </Grid.RowDefinitions>
+        <InfoBar
+            x:Uid="AdvancedPaste_FL_PreviewMessage"
+            Grid.Row="1"
+            Padding="4"
+            IsClosable="False"
+            IsOpen="True"
+            Message="Foundry Local is still in Public Preview">
+            <InfoBar.ActionButton>
+                <HyperlinkButton
+                    x:Uid="AdvancedPaste_FL_LearnMoreFoundryLocal"
+                    Content="Learn more"
+                    NavigateUri="https://learn.microsoft.com/azure/ai-foundry/foundry-local/what-is-foundry-local" />
+            </InfoBar.ActionButton>
+        </InfoBar>
         <StackPanel
             x:Name="LoadingPanel"
             HorizontalAlignment="Center"

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

@@ -10,40 +10,200 @@
     xmlns:ui="using:CommunityToolkit.WinUI"
     AutomationProperties.LandmarkType="Main"
     mc:Ignorable="d">
+    <Grid>
+        <Grid
+            MaxWidth="1000"
+            Padding="16,0,16,0"
+            VerticalAlignment="Top"
+            Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
+            BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
+            BorderThickness="1"
+            CornerRadius="16"
+            RowSpacing="8">
+            <Grid.RowDefinitions>
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+            </Grid.RowDefinitions>
+            <tkcontrols:OpacityMaskView Margin="-16,0,-16,0" HorizontalAlignment="Stretch">
+                <tkcontrols:OpacityMaskView.OpacityMask>
+                    <Rectangle>
+                        <Rectangle.Fill>
+                            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
+                                <GradientStop Offset="0.50" Color="Black" />
+                                <GradientStop Offset="0.75" Color="#80000000" />
+                                <GradientStop Offset="0.95" Color="Transparent" />
+                            </LinearGradientBrush>
+                        </Rectangle.Fill>
+                    </Rectangle>
+                </tkcontrols:OpacityMaskView.OpacityMask>
+                <Grid Height="560">
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="Auto" />
+                        <RowDefinition Height="Auto" />
+                        <RowDefinition Height="*" />
+                    </Grid.RowDefinitions>
+                    <Image
+                        Grid.RowSpan="3"
+                        HorizontalAlignment="Stretch"
+                        Source="/Assets/Settings/Modules/CmdPal_Background.png"
+                        Stretch="UniformToFill" />
+                    <TextBlock
+                        Margin="0,24,0,12"
+                        HorizontalAlignment="Center"
+                        FontSize="36"
+                        FontWeight="Bold"
+                        Text="Command Palette">
+                        <TextBlock.Foreground>
+                            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
+                                <GradientStop Offset="0.0" Color="#FFB9EBFF" />
+                                <GradientStop Offset="0.49" Color="#FF86CBFF" />
+                                <GradientStop Offset="1.0" Color="#FFA1E7FF" />
+                            </LinearGradientBrush>
+                        </TextBlock.Foreground>
+                    </TextBlock>
+                    <TextBlock
+                        Grid.Row="1"
+                        HorizontalAlignment="Center"
+                        Foreground="White"
+                        TextAlignment="Center"
+                        TextWrapping="Wrap">
+                        <Run x:Uid="CmdPal_Description" />
+                        <Hyperlink NavigateUri="">
+                            <Run x:Uid="LearnMore_CmdPal.Text" Foreground="White" />
+                        </Hyperlink>
+                    </TextBlock>
+                    <Image
+                        Grid.Row="2"
+                        Margin="0,16,0,0"
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Top"
+                        Source="/Assets/Settings/Modules/CmdPal_Hero.png"
+                        Stretch="Uniform" />
+                </Grid>
+            </tkcontrols:OpacityMaskView>
 
-    <controls:SettingsPageControl x:Uid="CmdPal" ModuleImageSource="ms-appx:///Assets/Settings/Modules/CmdPal.png">
+            <Grid
-        <controls:SettingsPageControl.ModuleContent>
+                Grid.Row="1"
-            <StackPanel ChildrenTransitions="{StaticResource SettingsCardsAnimations}" Orientation="Vertical">
+                Margin="0,-12,0,24"
+                ColumnSpacing="32"
+                RowSpacing="8">
+                <Grid.RowDefinitions>
+                    <RowDefinition Height="Auto" />
+                    <RowDefinition Height="Auto" />
+                </Grid.RowDefinitions>
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="*" />
+                    <ColumnDefinition Width="*" />
+                    <ColumnDefinition Width="*" />
+                </Grid.ColumnDefinitions>
+                <FontIcon
+                    HorizontalAlignment="Center"
+                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                    Glyph="&#xEB3B;" />
+                <TextBlock
+                    Grid.Row="1"
+                    HorizontalAlignment="Center"
+                    TextAlignment="Center"
+                    TextWrapping="Wrap">
+                    <Run x:Uid="CmdPal_ExtensibleHeader" FontWeight="SemiBold" /> <LineBreak />
+                    <Run
+                        x:Uid="CmdPal_ExtensibleDescription"
+                        FontSize="12"
+                        Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
+                </TextBlock>
+
+                <FontIcon
+                    Grid.Column="1"
+                    HorizontalAlignment="Center"
+                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                    Glyph="&#xE945;" />
+                <TextBlock
+                    Grid.Row="1"
+                    Grid.Column="1"
+                    HorizontalAlignment="Center"
+                    TextAlignment="Center"
+                    TextWrapping="Wrap">
+                    <Run x:Uid="CmdPal_FastHeader" FontWeight="SemiBold" /> <LineBreak />
+                    <Run
+                        x:Uid="CmdPal_FastDescription"
+                        FontSize="12"
+                        Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
+                </TextBlock>
+
+                <FontIcon
+                    Grid.Column="2"
+                    HorizontalAlignment="Center"
+                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                    Glyph="&#xE790;" />
+                <TextBlock
+                    Grid.Row="1"
+                    Grid.Column="2"
+                    HorizontalAlignment="Center"
+                    TextAlignment="Center"
+                    TextWrapping="Wrap">
+                    <Run x:Uid="CmdPal_ModernHeader" FontWeight="SemiBold" /> <LineBreak />
+                    <Run
+                        x:Uid="CmdPal_ModernDescription"
+                        FontSize="12"
+                        Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
+                </TextBlock>
+            </Grid>
+            <StackPanel
+                Grid.Row="2"
+                Margin="0,8,0,0"
+                Orientation="Vertical"
+                Spacing="{StaticResource SettingsCardSpacing}">
                 <controls:GPOInfoControl ShowWarning="{x:Bind ViewModel.IsEnabledGpoConfigured, Mode=OneWay}">
                     <tkcontrols:SettingsCard
                         Name="CmdPalEnableCmdPal"
                         x:Uid="CmdPal_Enable_CmdPal"
+                        HorizontalAlignment="Stretch"
                         HeaderIcon="{ui:BitmapIcon Source=/Assets/Settings/Icons/CmdPal.png}">
                         <ToggleSwitch IsOn="{x:Bind ViewModel.IsEnabled, Mode=TwoWay}" />
                     </tkcontrols:SettingsCard>
                 </controls:GPOInfoControl>
-                <controls:SettingsGroup x:Uid="CmdPal_Activation_GroupSettings" IsEnabled="{x:Bind ViewModel.IsEnabled, Mode=OneWay}">
+                <tkcontrols:SettingsCard
-                    <tkcontrols:SettingsCard
+                    x:Uid="CmdPal_Launch"
-                        Name="CmdPalActivationShortcut"
+                    Grid.Row="3"
-                        x:Uid="CmdPal_ActivationShortcut"
+                    ActionIcon="{ui:FontIcon Glyph=&#xE8A7;}"
-                        HeaderIcon="{ui:FontIcon Glyph=&#xEDA7;}">
+                    Click="LaunchCard_Click"
-                        <controls:ShortcutControl
+                    Header="Launch Command Palette"
-                            MinWidth="{StaticResource SettingActionControlMinWidth}"
+                    HeaderIcon="{ui:FontIcon Glyph=&#xE945;}"
-                            HotkeySettings="{x:Bind Path=ViewModel.Hotkey, Mode=OneWay}"
+                    IsClickEnabled="True"
-                            IsEnabled="False" />
+                    IsEnabled="{x:Bind ViewModel.IsEnabled, Mode=OneWay}">
-                        <tkcontrols:SettingsCard.Description>
+                    <ItemsControl
-                            <HyperlinkButton
+                        AutomationProperties.AccessibilityView="Raw"
-                                x:Name="CmdPalSettingsDeeplink"
+                        IsTabStop="False"
-                                x:Uid="CmdPal_DeeplinkContent"
+                        ItemsSource="{x:Bind Path=ViewModel.Hotkey.GetKeysList(), Mode=OneWay}">
-                                Click="CmdPalSettingsDeeplink_Click" />
+                        <ItemsControl.ItemsPanel>
-                        </tkcontrols:SettingsCard.Description>
+                            <ItemsPanelTemplate>
-                    </tkcontrols:SettingsCard>
+                                <StackPanel Orientation="Horizontal" Spacing="4" />
-                </controls:SettingsGroup>
+                            </ItemsPanelTemplate>
+                        </ItemsControl.ItemsPanel>
+                        <ItemsControl.ItemTemplate>
+                            <DataTemplate>
+                                <controls:KeyVisual
+                                    Padding="8,8,8,8"
+                                    VerticalAlignment="Center"
+                                    AutomationProperties.AccessibilityView="Raw"
+                                    Content="{Binding}"
+                                    Style="{StaticResource AccentKeyVisualStyle}" />
+                            </DataTemplate>
+                        </ItemsControl.ItemTemplate>
+                    </ItemsControl>
+                </tkcontrols:SettingsCard>
+                <tkcontrols:SettingsCard
+                    x:Uid="CmdPal_Settings"
+                    Grid.Row="4"
+                    ActionIcon="{ui:FontIcon Glyph=&#xE8A7;}"
+                    Click="SettingsCard_Click"
+                    HeaderIcon="{ui:FontIcon Glyph=&#xE713;}"
+                    IsClickEnabled="True"
+                    IsEnabled="{x:Bind ViewModel.IsEnabled, Mode=OneWay}" />
             </StackPanel>
-        </controls:SettingsPageControl.ModuleContent>
+        </Grid>
-
+    </Grid>
-        <controls:SettingsPageControl.PrimaryLinks>
-            <controls:PageLink x:Uid="LearnMore_CmdPal" Link="https://aka.ms/PowerToysOverview_CmdPal" />
-        </controls:SettingsPageControl.PrimaryLinks>
-    </controls:SettingsPageControl>
 </local:NavigablePage>

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

@@ -63,12 +63,20 @@ namespace Microsoft.PowerToys.Settings.UI.Views
             }
         }
 
-        private void CmdPalSettingsDeeplink_Click(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)
+        private void SettingsCard_Click(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)
         {
             // Launch CmdPal settings window as normal user using explorer
             string launchPath = "explorer.exe";
             string launchArgs = "x-cmdpal://settings";
             LaunchApp(launchPath, launchArgs);
         }
+
+        private void LaunchCard_Click(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)
+        {
+            // Launch CmdPal window as normal user using explorer
+            string launchPath = "explorer.exe";
+            string launchArgs = "x-cmdpal";
+            LaunchApp(launchPath, launchArgs);
+        }
     }
 }

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

@@ -5159,25 +5159,12 @@ To record a specific window, enter the hotkey with the Alt key in the opposite m
   <data name="Shell_TopLevelSystemTools.Content" xml:space="preserve">
     <value>System Tools</value>
   </data>
-  <data name="CmdPal.ModuleTitle" xml:space="preserve">
-    <value>Command Palette</value>
-  </data>
-  <data name="CmdPal_ShortDescription" xml:space="preserve">
-    <value>A better quick launcher</value>
-  </data>
-  <data name="CmdPal_ActivationDescription" xml:space="preserve">
-    <value>Open Command Palette</value>
-  </data>
   <data name="CmdPal_Enable_CmdPal.Header" xml:space="preserve">
     <value>Enable Command Palette</value>
-    <comment>"Command Palette" is the name of the utility.</comment>
+    <comment>Command Palette is a product name, do not loc</comment>
-  </data>
-  <data name="CmdPal.ModuleDescription" xml:space="preserve">
-    <value>A fully extensible quick launcher with a richer display and additional capabilities without sacrificing performance.</value>
   </data>
   <data name="LearnMore_CmdPal.Text" xml:space="preserve">
-    <value>Learn more about Command Palette</value>
+    <value>Learn more</value>
-    <comment>Command Palette is a product name, do not loc</comment>
   </data>
   <data name="Shell_CmdPal.Content" xml:space="preserve">
     <value>Command Palette</value>
@@ -5185,11 +5172,11 @@ To record a specific window, enter the hotkey with the Alt key in the opposite m
   </data>
   <data name="Oobe_CmdPal.Description" xml:space="preserve">
     <value>A fully extensible quick launcher with a richer display and additional capabilities without sacrificing performance.</value>
-    <comment>"Command Palette" is a product name</comment>
+    <comment>Command Palette is a product name, do not loc</comment>
   </data>
   <data name="Oobe_CmdPal.Title" xml:space="preserve">
     <value>Command Palette</value>
-    <comment>"Command Palette" is a product name</comment>
+    <comment>Command Palette is a product name, do not loc</comment>
   </data>
   <data name="Oobe_CmdPal_HowToUse.Text" xml:space="preserve">
     <value>and start typing!</value>
@@ -5222,14 +5209,8 @@ To record a specific window, enter the hotkey with the Alt key in the opposite m
   <data name="RetryLabel.Text" xml:space="preserve">
     <value>Retry</value>
   </data>
-  <data name="CmdPal_Activation_GroupSettings.Header" xml:space="preserve">
+  <data name="CmdPal_Settings.Header" xml:space="preserve">
-    <value>Activation</value>
+    <value>Settings</value>
-  </data>
-  <data name="CmdPal_ActivationShortcut.Header" xml:space="preserve">
-    <value>Activation shortcut</value>
-  </data>
-  <data name="CmdPal_DeeplinkContent.Content" xml:space="preserve">
-    <value>Open Command Palette settings to customize the activation shortcut</value>
   </data>
   <data name="Help_chromaCIE" xml:space="preserve">
     <value>chroma (CIE LCh)</value>
@@ -5753,4 +5734,51 @@ To record a specific window, enter the hotkey with the Alt key in the opposite m
   <data name="AdvancedPaste_EnableClipboardPreview.Description" xml:space="preserve">
     <value>Display a preview of the current clipboard content</value>
   </data>
+  <data name="AdvancedPaste_FL_LearnMoreFoundryLocal.Content" xml:space="preserve">
+    <value>Learn more</value>
+  </data>
+  <data name="AdvancedPaste_FL_PreviewMessage.Message" xml:space="preserve">
+    <value>Foundry Local is still in public preview</value>
+    <comment>Do not loc "Foundry Local"</comment>
+  </data>
+  <data name="CmdPal_Settings.Description" xml:space="preserve">
+    <value>Configure the activation shortcut, extensions, behavior and much more</value>
+  </data>
+  <data name="CmdPal_Launch.Header" xml:space="preserve">
+    <value>Open Command Palette</value>
+    <comment>Command Palette is a product name, do not loc</comment>
+  </data>
+  <data name="CmdPal_ShortDescription" xml:space="preserve">
+    <value>A better quick launcher</value>
+  </data>
+  <data name="CmdPal_Description.Text" xml:space="preserve">
+    <value>Find files, launch apps, and do so much more with the most extensible quick launcher.</value>
+  </data>
+  <data name="CmdPal.ModuleTitle" xml:space="preserve">
+    <value>Command Palette</value>
+    <comment>Command Palette is a product name, do not loc</comment>
+  </data>
+  <data name="CmdPal_ActivationDescription" xml:space="preserve">
+    <value>Open Command Palette</value>
+    <comment>Command Palette is a product name, do not loc</comment>
+  </data>
+  <data name="CmdPal_ExtensibleDescription.Text" xml:space="preserve">
+    <value>Powerful extensions help you do more</value>
+  </data>
+  <data name="CmdPal_ExtensibleHeader.Text" xml:space="preserve">
+    <value>Extensible</value>
+  </data>
+  <data name="CmdPal_FastDescription.Text" xml:space="preserve">
+    <value>Find files and launch apps in an instant</value>
+  </data>
+  <data name="CmdPal_FastHeader.Text" xml:space="preserve">
+    <value>Fast</value>
+  </data>
+  <data name="CmdPal_ModernHeader.Text" xml:space="preserve">
+    <value>Beautiful</value>
+  </data>
+  <data name="CmdPal_ModernDescription.Text" xml:space="preserve">
+    <value>A modern UI built with Fluent Design</value>
+    <comment>Fluent Design is a product name, do not loc</comment>
+  </data>
 </root>