[cmdpal] UX tweaks (#38087)

- Removing the redundant icon + text in the bottom left corner - Minor styling tweaks - Adding subtle show/hide animations - Improved narrator support for Settings button - Minor design tweaks to the tags for better visibility (still needs more work in the future) ![SubtleAnimations](https://github.com/user-attachments/assets/d2f6bec3-f8d6-48a4-a533-c0f2e0c81f8c)
2026-04-03 17:56:44 +02:00 · 2025-03-24 11:13:19 +01:00
parent 69c2e9c568
commit 79bd825f91
5 changed files with 82 additions and 30 deletions
--- a/src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/CommandBar.xaml
+++ b/src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/CommandBar.xaml
@@ -3,6 +3,7 @@
    x:Class="Microsoft.CmdPal.UI.Controls.CommandBar"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:animations="using:CommunityToolkit.WinUI.Animations"
    xmlns:cmdpalUI="using:Microsoft.CmdPal.UI"
    xmlns:converters="using:CommunityToolkit.WinUI.Converters"
    xmlns:cpcontrols="using:Microsoft.CmdPal.UI.Controls"
@@ -62,6 +63,27 @@
                        Text="{x:Bind RequestedShortcut, Mode=OneWay, Converter={StaticResource KeyChordToStringConverter}}" />
                </Grid>
            </DataTemplate>
+
+            <animations:ImplicitAnimationSet x:Name="ShowAnimations">
+                <animations:OpacityAnimation
+                    From="0"
+                    To="1.0"
+                    Duration="0:0:0.340" />
+                <animations:ScaleAnimation
+                    From="0.85"
+                    To="1"
+                    Duration="0:0:0.350" />
+            </animations:ImplicitAnimationSet>
+            <animations:ImplicitAnimationSet x:Name="HideAnimations">
+                <animations:OpacityAnimation
+                    From="1.0"
+                    To="0"
+                    Duration="0:0:0.240" />
+                <animations:ScaleAnimation
+                    From="1"
+                    To="0.85"
+                    Duration="0:0:0.350" />
+            </animations:ImplicitAnimationSet>
        </ResourceDictionary>
    </UserControl.Resources>

@@ -80,15 +102,6 @@
            Margin="8,0,0,0"
            Tapped="PageIcon_Tapped"
            Visibility="{x:Bind CurrentPageViewModel.IsNested, Mode=OneWay}">
-
-            <cpcontrols:IconBox
-                x:Name="IconBorder"
-                Width="16"
-                Height="16"
-                x:Load="{x:Bind IsLoaded, Mode=OneWay}"
-                CornerRadius="{StaticResource ControlCornerRadius}"
-                SourceKey="{x:Bind CurrentPageViewModel.Icon, Mode=OneWay}"
-                SourceRequested="{x:Bind help:IconCacheProvider.SourceRequested}" />
            <InfoBadge Visibility="{x:Bind CurrentPageViewModel.HasStatusMessage, Mode=OneWay}" Value="{x:Bind CurrentPageViewModel.StatusMessages.Count, Mode=OneWay}" />
            <Grid.ContextFlyout>
                <Flyout x:Name="StatusMessagesFlyout" Placement="TopEdgeAlignedLeft">
@@ -121,14 +134,15 @@
        </Grid>
        <Button
            x:Name="SettingsIconButton"
-            Margin="0,0,0,0"
+            x:Uid="SettingsButton"
+            animations:Implicit.HideAnimations="{StaticResource HideAnimations}"
+            animations:Implicit.ShowAnimations="{StaticResource ShowAnimations}"
+            ui:VisualExtensions.NormalizedCenterPoint="0.5,0.5"
            Style="{StaticResource SubtleButtonStyle}"
            Tapped="SettingsIcon_Tapped"
            Visibility="{x:Bind CurrentPageViewModel.IsNested, Mode=OneWay, Converter={StaticResource BoolToInvertedVisibilityConverter}}">
-
            <StackPanel Orientation="Horizontal" Spacing="8">
                <FontIcon
-                    HorizontalAlignment="Left"
                    VerticalAlignment="Center"
                    FontSize="16"
                    Glyph="&#xE713;" />
@@ -138,28 +152,29 @@
                    Text="Settings" />
            </StackPanel>
        </Button>
-
        <TextBlock
            Grid.Column="1"
            VerticalAlignment="Center"
-            FontSize="12"
+            Style="{StaticResource CaptionTextBlockStyle}"
            Text="{x:Bind CurrentPageViewModel.Title, Mode=OneWay}"
            Visibility="{x:Bind CurrentPageViewModel.IsNested, Mode=OneWay}" />
-
        <StackPanel
            Grid.Column="2"
+            Padding="0,0,4,0"
            HorizontalAlignment="Right"
            Orientation="Horizontal"
            Spacing="4">
            <Button
                x:Name="PrimaryButton"
                Padding="6,4,4,4"
+                animations:Implicit.HideAnimations="{StaticResource HideAnimations}"
+                animations:Implicit.ShowAnimations="{StaticResource ShowAnimations}"
+                ui:VisualExtensions.NormalizedCenterPoint="0.5,0.5"
                x:Load="{x:Bind IsLoaded, Mode=OneWay}"
                Background="Transparent"
                Style="{StaticResource SubtleButtonStyle}"
                Tapped="PrimaryButton_Tapped"
                Visibility="{x:Bind ViewModel.HasPrimaryCommand, Mode=OneWay}">
-
                <StackPanel Orientation="Horizontal" Spacing="8">
                    <TextBlock
                        VerticalAlignment="Center"
@@ -183,11 +198,13 @@
            <Button
                x:Name="SecondaryButton"
                Padding="6,4,4,4"
+                animations:Implicit.HideAnimations="{StaticResource HideAnimations}"
+                animations:Implicit.ShowAnimations="{StaticResource ShowAnimations}"
+                ui:VisualExtensions.NormalizedCenterPoint="0.5,0.5"
                x:Load="{x:Bind IsLoaded, Mode=OneWay}"
                Style="{StaticResource SubtleButtonStyle}"
                Tapped="SecondaryButton_Tapped"
                Visibility="{x:Bind ViewModel.HasSecondaryCommand, Mode=OneWay}">
-
                <StackPanel Orientation="Horizontal" Spacing="8">
                    <TextBlock
                        VerticalAlignment="Center"
@@ -226,7 +243,11 @@
            </Button>
            <Button
                x:Name="MoreCommandsButton"
+                x:Uid="MoreCommandsButton"
                Padding="4"
+                animations:Implicit.HideAnimations="{StaticResource HideAnimations}"
+                animations:Implicit.ShowAnimations="{StaticResource ShowAnimations}"
+                ui:VisualExtensions.NormalizedCenterPoint="0.5,0.5"
                Content="{ui:FontIcon Glyph=&#xE712;,
                                      FontSize=16}"
                Style="{StaticResource SubtleButtonStyle}"
--- a/src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/Tag.xaml
+++ b/src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/Tag.xaml
@@ -6,14 +6,14 @@

    <ResourceDictionary.ThemeDictionaries>
        <ResourceDictionary x:Key="Default">
-            <StaticResource x:Key="TagBackground" ResourceKey="CardBackgroundFillColorDefaultBrush" />
-            <StaticResource x:Key="TagBorderBrush" ResourceKey="CardStrokeColorDefaultBrush" />
+            <StaticResource x:Key="TagBackground" ResourceKey="ControlSolidFillColorDefaultBrush" />
+            <StaticResource x:Key="TagBorderBrush" ResourceKey="ControlStrokeColorSecondaryBrush" />
            <StaticResource x:Key="TagForeground" ResourceKey="TextFillColorTertiaryBrush" />
        </ResourceDictionary>

        <ResourceDictionary x:Key="Light">
-            <StaticResource x:Key="TagBackground" ResourceKey="CardBackgroundFillColorDefaultBrush" />
-            <StaticResource x:Key="TagBorderBrush" ResourceKey="CardStrokeColorDefaultBrush" />
+            <StaticResource x:Key="TagBackground" ResourceKey="ControlSolidFillColorDefaultBrush" />
+            <StaticResource x:Key="TagBorderBrush" ResourceKey="ControlStrokeColorSecondaryBrush" />
            <StaticResource x:Key="TagForeground" ResourceKey="TextFillColorTertiaryBrush" />
        </ResourceDictionary>

@@ -32,7 +32,6 @@
    <Style x:Key="DefaultTagStyle" TargetType="local:Tag">
        <Style.Setters>
            <Setter Property="Background" Value="{ThemeResource TagBackground}" />
-            <Setter Property="Foreground" Value="{ThemeResource TagForeground}" />
            <Setter Property="BorderBrush" Value="{ThemeResource TagBorderBrush}" />
            <Setter Property="BorderThickness" Value="{ThemeResource TagBorderThickness}" />
            <Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
@@ -42,8 +41,8 @@
            <Setter Property="BackgroundSizing" Value="InnerBorderEdge" />
            <Setter Property="Padding" Value="{ThemeResource TagPadding}" />
            <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
+            <Setter Property="Foreground" Value="{ThemeResource TagForeground}" />
            <Setter Property="FontWeight" Value="Normal" />
-            <Setter Property="FontSize" Value="{StaticResource CaptionTextBlockFontSize}" />
            <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
            <Setter Property="FocusVisualMargin" Value="-3" />
            <Setter Property="Template">
@@ -74,10 +73,11 @@
                                SourceKey="{TemplateBinding Icon}" />
                            <TextBlock
                                Grid.Column="1"
+                                Margin="0,-1,0,0"
                                CharacterSpacing="{TemplateBinding CharacterSpacing}"
                                FontFamily="{TemplateBinding FontFamily}"
-                                FontSize="{TemplateBinding FontSize}"
                                FontWeight="{TemplateBinding FontWeight}"
+                                Foreground="{TemplateBinding Foreground}"
                                Text="{TemplateBinding Text}" />
                        </Grid>
                    </ControlTemplate>
--- a/src/modules/cmdpal/Microsoft.CmdPal.UI/ExtViews/ListPage.xaml
+++ b/src/modules/cmdpal/Microsoft.CmdPal.UI/ExtViews/ListPage.xaml
@@ -30,7 +30,7 @@
        <StackLayout
            x:Name="HorizontalStackLayout"
            Orientation="Horizontal"
-            Spacing="8" />
+            Spacing="4" />

        <DataTemplate x:Key="TagTemplate" x:DataType="viewmodels:TagViewModel">
            <ItemContainer>
@@ -89,6 +89,7 @@
                <ItemsView
                    Grid.RowSpan="2"
                    Grid.Column="2"
+                    Margin="0,0,8,0"
                    VerticalAlignment="Center"
                    IsHitTestVisible="False"
                    IsItemInvokedEnabled="False"
@@ -103,7 +104,6 @@
    </Page.Resources>

    <Grid>
-
        <controls:SwitchPresenter
            HorizontalAlignment="Stretch"
            TargetType="x:Boolean"
@@ -111,6 +111,7 @@
            <controls:Case Value="False">
                <ListView
                    x:Name="ItemsList"
+                    Padding="0,2,0,0"
                    DoubleTapped="ItemsList_DoubleTapped"
                    IsDoubleTapEnabled="True"
                    IsItemClickEnabled="True"
--- a/src/modules/cmdpal/Microsoft.CmdPal.UI/Pages/ShellPage.xaml
+++ b/src/modules/cmdpal/Microsoft.CmdPal.UI/Pages/ShellPage.xaml
@@ -42,6 +42,7 @@
                <cpcontrols:Tag
                    HorizontalAlignment="Left"
                    BackgroundColor="{x:Bind Background, Mode=OneWay}"
+                    FontSize="12"
                    ForegroundColor="{x:Bind Foreground, Mode=OneWay}"
                    Icon="{x:Bind Icon, Mode=OneWay}"
                    Text="{x:Bind Text, Mode=OneWay}"
@@ -100,9 +101,9 @@
                                    x:Name="TagsWrapPanel"
                                    MinWidth="0"
                                    Padding="0"
-                                    HorizontalSpacing="8"
+                                    HorizontalSpacing="4"
                                    Orientation="Horizontal"
-                                    VerticalSpacing="8" />
+                                    VerticalSpacing="4" />
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                    </ItemsControl>
@@ -300,11 +301,34 @@
                <ScrollViewer
                    x:Name="DetailsContent"
                    Grid.Column="1"
+                    Margin="4"
                    HorizontalAlignment="Stretch"
+                    ui:VisualExtensions.NormalizedCenterPoint="0.5,0.5"
                    Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                    BorderBrush="{ThemeResource DividerStrokeColorDefaultBrush}"
-                    BorderThickness="1,0,0,0"
+                    BorderThickness="1"
+                    CornerRadius="{StaticResource ControlCornerRadius}"
                    Visibility="Collapsed">
+                    <animations:Implicit.ShowAnimations>
+                        <animations:OpacityAnimation
+                            From="0"
+                            To="1.0"
+                            Duration="0:0:0.270" />
+                        <animations:TranslationAnimation
+                            From="24,0,0"
+                            To="0,0,0"
+                            Duration="0:0:0.280" />
+                    </animations:Implicit.ShowAnimations>
+                    <animations:Implicit.HideAnimations>
+                        <animations:OpacityAnimation
+                            From="1.0"
+                            To="0"
+                            Duration="0:0:0.180" />
+                        <animations:TranslationAnimation
+                            From="0,0,0"
+                            To="24,0,0"
+                            Duration="0:0:0.220" />
+                    </animations:Implicit.HideAnimations>
                    <Grid Margin="12">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
@@ -346,7 +370,7 @@
                            ItemTemplate="{StaticResource DetailsDataTemplateSelector}"
                            ItemsSource="{x:Bind ViewModel.Details.Metadata, Mode=OneWay}">
                            <ItemsRepeater.Layout>
-                                <StackLayout Spacing="8" />
+                                <StackLayout Spacing="12" />
                            </ItemsRepeater.Layout>
                        </ItemsRepeater>
                    </Grid>
--- a/src/modules/cmdpal/Microsoft.CmdPal.UI/Strings/en-us/Resources.resw
+++ b/src/modules/cmdpal/Microsoft.CmdPal.UI/Strings/en-us/Resources.resw
@@ -373,4 +373,10 @@ Right-click to remove the key combination, thereby deactivating the shortcut.</v
  <data name="Settings_GeneralPage_NavigationViewItem_Extensions.Content" xml:space="preserve">
    <value>Extensions</value>
  </data>
+  <data name="MoreCommandsButton.[using:Microsoft.UI.Xaml.Automation]AutomationProperties.Name" xml:space="preserve">
+    <value>More commands</value>
+  </data>
+  <data name="SettingsButton.[using:Microsoft.UI.Xaml.Automation]AutomationProperties.Name" xml:space="preserve">
+    <value>Open Command Palette settings</value>
+  </data>
 </root>