[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-05 02:36:19 +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>