CmdPal Dock visual bugfixes (#45871)

This PR fixes the following bugs and iprovements:

- The scroll forward/backward glyphs were clipped
- The `Show labels` settings is redundant as those can be set
individually, and actually messes with that setting. Therefore, removed
from the Settings UI.
- Minor string changes
- The 'Filter commands' box is hidden when right clicking the Dock to
customize it.

---------

Co-authored-by: Jiří Polášek <me@jiripolasek.com>

src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/ContextMenu.xaml

@@ -161,6 +161,17 @@
             Style="{StaticResource SearchTextBoxStyle}"
             TextChanged="ContextFilterBox_TextChanged" />
         <VisualStateManager.VisualStateGroups>
+            <VisualStateGroup x:Name="FilterBoxVisibility">
+                <VisualState x:Name="FilterBoxVisible" />
+                <VisualState x:Name="FilterBoxCollapsed">
+                    <VisualState.StateTriggers>
+                        <ui:IsEqualStateTrigger Value="{x:Bind ShowFilterBox, Mode=OneWay}" To="False" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="ContextFilterBox.Visibility" Value="Collapsed" />
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
             <VisualStateGroup x:Name="ContextMenuOrder">
                 <VisualState x:Name="FilterOnTop">
                     <VisualState.StateTriggers>

src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/ContextMenu.xaml.cs

@@ -23,6 +23,15 @@ public sealed partial class ContextMenu : UserControl,
     IRecipient<UpdateCommandBarMessage>,
     IRecipient<TryCommandKeybindingMessage>
 {
+    public static readonly DependencyProperty ShowFilterBoxProperty =
+        DependencyProperty.Register(nameof(ShowFilterBox), typeof(bool), typeof(ContextMenu), new PropertyMetadata(true));
+
+    public bool ShowFilterBox
+    {
+        get => (bool)GetValue(ShowFilterBoxProperty);
+        set => SetValue(ShowFilterBoxProperty, value);
+    }
+
     public ContextMenuViewModel ViewModel { get; }
 
     public ContextMenu()

src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/ScrollContainer.xaml

@@ -15,7 +15,8 @@
                 <Setter Property="Foreground" Value="{ThemeResource ButtonForeground}" />
                 <Setter Property="BorderBrush" Value="{ThemeResource FlipViewNextPreviousButtonBorderBrush}" />
                 <Setter Property="BorderThickness" Value="1" />
-                <Setter Property="Padding" Value="0" />
+                <Setter Property="Padding" Value="8,0,8,0" />
+                <Setter Property="Margin" Value="0" />
                 <Setter Property="HorizontalAlignment" Value="Left" />
                 <Setter Property="VerticalAlignment" Value="Center" />
                 <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
@@ -154,7 +155,7 @@
             <Button
                 x:Name="ScrollBackBtn"
                 Margin="8,0,0,0"
-                Padding="2,8,2,8"
+                Padding="4,8,4,8"
                 HorizontalAlignment="Left"
                 VerticalAlignment="Center"
                 AutomationProperties.Name="Scroll left"
@@ -169,8 +170,8 @@
             </Button>
             <Button
                 x:Name="ScrollForwardBtn"
-                Margin="0,0,8,0"
+                Margin="8,0,0,0"
-                Padding="2,8,2,8"
+                Padding="4,8,4,8"
                 HorizontalAlignment="Right"
                 VerticalAlignment="Center"
                 AutomationProperties.Name="Scroll right"
@@ -180,7 +181,7 @@
                 <FontIcon
                     x:Name="ScrollForwardIcon"
                     FontSize="{ThemeResource FlipViewButtonFontSize}"
-                    Glyph="&#xEDDA;" />
+                    Glyph="&#xE72A;" />
             </Button>
         </Grid>
 
@@ -192,14 +193,14 @@
                         <Setter Target="scroller.HorizontalScrollMode" Value="Enabled" />
                         <Setter Target="scroller.VerticalScrollBarVisibility" Value="Disabled" />
                         <Setter Target="scroller.VerticalScrollMode" Value="Disabled" />
-                        <Setter Target="ScrollBackBtn.Padding" Value="4,12,4,12" />
+                        <Setter Target="ScrollBackBtn.Padding" Value="4,8,4,8" />
                         <Setter Target="ScrollBackBtn.Margin" Value="8,0,0,0" />
                         <Setter Target="ScrollBackBtn.HorizontalAlignment" Value="Left" />
                         <Setter Target="ScrollBackBtn.VerticalAlignment" Value="Center" />
                         <Setter Target="ScrollBackBtn.(AutomationProperties.Name)" Value="Scroll left" />
                         <Setter Target="ScrollBackBtn.(ToolTipService.ToolTip)" Value="Scroll left" />
                         <Setter Target="ScrollBackIcon.Glyph" Value="&#xEDD9;" />
-                        <Setter Target="ScrollForwardBtn.Padding" Value="4,12,4,12" />
+                        <Setter Target="ScrollForwardBtn.Padding" Value="4,8,4,8" />
                         <Setter Target="ScrollForwardBtn.Margin" Value="0,0,8,0" />
                         <Setter Target="ScrollForwardBtn.HorizontalAlignment" Value="Right" />
                         <Setter Target="ScrollForwardBtn.VerticalAlignment" Value="Center" />
@@ -227,7 +228,7 @@
                         <Setter Target="ScrollForwardBtn.VerticalAlignment" Value="Bottom" />
                         <Setter Target="ScrollForwardBtn.(AutomationProperties.Name)" Value="Scroll down" />
                         <Setter Target="ScrollForwardBtn.(ToolTipService.ToolTip)" Value="Scroll down" />
-                        <Setter Target="ScrollForwardIcon.Glyph" Value="&#xEDDC;" />
+                        <Setter Target="ScrollForwardIcon.Glyph" Value="&#xE72A;" />
                     </VisualState.Setters>
                 </VisualState>
             </VisualStateGroup>

src/modules/cmdpal/Microsoft.CmdPal.UI/Dock/DockContentControl.xaml

@@ -0,0 +1,138 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<UserControl
+    x:Class="Microsoft.CmdPal.UI.Dock.DockContentControl"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:cpcontrols="using:Microsoft.CmdPal.UI.Controls"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:ui="using:CommunityToolkit.WinUI"
+    mc:Ignorable="d">
+
+    <Grid x:Name="ContentGrid" Background="Transparent">
+        <Grid.ColumnDefinitions>
+            <ColumnDefinition x:Name="StartColumn" Width="*" />
+            <ColumnDefinition x:Name="CenterColumn" Width="Auto" />
+            <ColumnDefinition x:Name="EndColumn" Width="*" />
+        </Grid.ColumnDefinitions>
+        <Grid.RowDefinitions>
+            <RowDefinition x:Name="StartRow" Height="*" />
+            <RowDefinition x:Name="CenterRow" Height="Auto" />
+            <RowDefinition x:Name="EndRow" Height="*" />
+        </Grid.RowDefinitions>
+
+        <cpcontrols:ScrollContainer
+            x:Name="StartScroller"
+            Grid.RowSpan="3"
+            HorizontalAlignment="Left"
+            VerticalAlignment="Stretch"
+            ActionButton="{x:Bind StartActionButton, Mode=OneWay}"
+            Source="{x:Bind StartSource, Mode=OneWay}" />
+
+        <cpcontrols:ScrollContainer
+            x:Name="CenterScroller"
+            Grid.RowSpan="3"
+            Grid.Column="1"
+            HorizontalAlignment="Center"
+            VerticalAlignment="Stretch"
+            ActionButton="{x:Bind CenterActionButton, Mode=OneWay}"
+            Source="{x:Bind CenterSource, Mode=OneWay}" />
+
+        <cpcontrols:ScrollContainer
+            x:Name="EndScroller"
+            Grid.RowSpan="3"
+            Grid.Column="2"
+            HorizontalAlignment="Right"
+            VerticalAlignment="Stretch"
+            ActionButton="{x:Bind EndActionButton, Mode=OneWay}"
+            ContentAlignment="End"
+            Source="{x:Bind EndSource, Mode=OneWay}" />
+
+        <VisualStateManager.VisualStateGroups>
+            <VisualStateGroup x:Name="OrientationStates">
+                <VisualState x:Name="HorizontalState" />
+                <VisualState x:Name="VerticalState">
+                    <VisualState.StateTriggers>
+                        <ui:IsEqualStateTrigger Value="{x:Bind Orientation, Mode=OneWay}" To="Vertical" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="StartColumn.Width" Value="*" />
+                        <Setter Target="CenterColumn.Width" Value="*" />
+                        <Setter Target="EndColumn.Width" Value="*" />
+
+                        <Setter Target="StartRow.Height" Value="*" />
+                        <Setter Target="CenterRow.Height" Value="Auto" />
+                        <Setter Target="EndRow.Height" Value="*" />
+
+                        <Setter Target="StartScroller.(Grid.Row)" Value="0" />
+                        <Setter Target="StartScroller.(Grid.RowSpan)" Value="1" />
+                        <Setter Target="StartScroller.(Grid.Column)" Value="0" />
+                        <Setter Target="StartScroller.(Grid.ColumnSpan)" Value="3" />
+                        <Setter Target="StartScroller.Orientation" Value="Vertical" />
+                        <Setter Target="StartScroller.HorizontalAlignment" Value="Stretch" />
+                        <Setter Target="StartScroller.VerticalAlignment" Value="Top" />
+
+                        <Setter Target="CenterScroller.(Grid.Row)" Value="1" />
+                        <Setter Target="CenterScroller.(Grid.RowSpan)" Value="1" />
+                        <Setter Target="CenterScroller.(Grid.Column)" Value="0" />
+                        <Setter Target="CenterScroller.(Grid.ColumnSpan)" Value="3" />
+                        <Setter Target="CenterScroller.Orientation" Value="Vertical" />
+                        <Setter Target="CenterScroller.HorizontalAlignment" Value="Stretch" />
+                        <Setter Target="CenterScroller.VerticalAlignment" Value="Center" />
+
+                        <Setter Target="EndScroller.(Grid.Row)" Value="2" />
+                        <Setter Target="EndScroller.(Grid.RowSpan)" Value="1" />
+                        <Setter Target="EndScroller.(Grid.Column)" Value="0" />
+                        <Setter Target="EndScroller.(Grid.ColumnSpan)" Value="3" />
+                        <Setter Target="EndScroller.Orientation" Value="Vertical" />
+                        <Setter Target="EndScroller.HorizontalAlignment" Value="Stretch" />
+                        <Setter Target="EndScroller.VerticalAlignment" Value="Bottom" />
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+
+            <VisualStateGroup x:Name="CenterVisibilityStates">
+                <VisualState x:Name="CenterVisibleState" />
+                <VisualState x:Name="CenterCollapsedState">
+                    <VisualState.StateTriggers>
+                        <ui:IsEqualStateTrigger Value="{x:Bind IsCenterVisible, Mode=OneWay}" To="False" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="CenterColumn.Width" Value="0" />
+                        <Setter Target="CenterRow.Height" Value="0" />
+                        <Setter Target="EndColumn.Width" Value="Auto" />
+                        <Setter Target="EndRow.Height" Value="Auto" />
+                        <Setter Target="CenterScroller.Visibility" Value="Collapsed" />
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+
+            <VisualStateGroup x:Name="EditModeStates">
+                <VisualState x:Name="EditModeOff" />
+                <VisualState x:Name="EditModeOn">
+                    <VisualState.StateTriggers>
+                        <ui:IsEqualStateTrigger Value="{x:Bind IsEditMode, Mode=OneWay}" To="True" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="CenterScroller.MinWidth" Value="48" />
+                        <Setter Target="StartScroller.BorderBrush" Value="{ThemeResource CardStrokeColorDefaultBrush}" />
+                        <Setter Target="StartScroller.Background" Value="{ThemeResource CardBackgroundFillColorDefaultBrush}" />
+                        <Setter Target="StartScroller.BorderThickness" Value="1" />
+                        <Setter Target="StartScroller.CornerRadius" Value="{StaticResource OverlayCornerRadius}" />
+                        <Setter Target="CenterScroller.BorderBrush" Value="{ThemeResource CardStrokeColorDefaultBrush}" />
+                        <Setter Target="CenterScroller.Background" Value="{ThemeResource CardBackgroundFillColorDefaultBrush}" />
+                        <Setter Target="CenterScroller.BorderThickness" Value="1" />
+                        <Setter Target="CenterScroller.CornerRadius" Value="{StaticResource OverlayCornerRadius}" />
+                        <Setter Target="EndScroller.BorderBrush" Value="{ThemeResource CardStrokeColorDefaultBrush}" />
+                        <Setter Target="EndScroller.Background" Value="{ThemeResource CardBackgroundFillColorDefaultBrush}" />
+                        <Setter Target="EndScroller.BorderThickness" Value="1" />
+                        <Setter Target="EndScroller.CornerRadius" Value="{StaticResource OverlayCornerRadius}" />
+                        <Setter Target="StartScroller.ActionButtonVisibility" Value="Visible" />
+                        <Setter Target="CenterScroller.ActionButtonVisibility" Value="Visible" />
+                        <Setter Target="EndScroller.ActionButtonVisibility" Value="Visible" />
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+        </VisualStateManager.VisualStateGroups>
+    </Grid>
+</UserControl>

src/modules/cmdpal/Microsoft.CmdPal.UI/Dock/DockContentControl.xaml.cs

@@ -0,0 +1,103 @@
+// 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;
+using Microsoft.UI.Xaml.Controls;
+
+namespace Microsoft.CmdPal.UI.Dock;
+
+/// <summary>
+/// A control that arranges Start, Center, and End sections in a dock layout
+/// with built-in ScrollContainers. When <see cref="IsCenterVisible"/> is false,
+/// the center is collapsed, the start section stretches, and the end section
+/// auto-sizes. Supports horizontal/vertical orientation and edit mode styling.
+/// </summary>
+public sealed partial class DockContentControl : UserControl
+{
+    public static readonly DependencyProperty OrientationProperty =
+        DependencyProperty.Register(nameof(Orientation), typeof(Orientation), typeof(DockContentControl), new PropertyMetadata(Orientation.Horizontal));
+
+    public Orientation Orientation
+    {
+        get => (Orientation)GetValue(OrientationProperty);
+        set => SetValue(OrientationProperty, value);
+    }
+
+    public static readonly DependencyProperty IsCenterVisibleProperty =
+        DependencyProperty.Register(nameof(IsCenterVisible), typeof(bool), typeof(DockContentControl), new PropertyMetadata(true));
+
+    public bool IsCenterVisible
+    {
+        get => (bool)GetValue(IsCenterVisibleProperty);
+        set => SetValue(IsCenterVisibleProperty, value);
+    }
+
+    public static readonly DependencyProperty IsEditModeProperty =
+        DependencyProperty.Register(nameof(IsEditMode), typeof(bool), typeof(DockContentControl), new PropertyMetadata(false));
+
+    public bool IsEditMode
+    {
+        get => (bool)GetValue(IsEditModeProperty);
+        set => SetValue(IsEditModeProperty, value);
+    }
+
+    public static readonly DependencyProperty StartSourceProperty =
+        DependencyProperty.Register(nameof(StartSource), typeof(object), typeof(DockContentControl), new PropertyMetadata(null));
+
+    public object StartSource
+    {
+        get => GetValue(StartSourceProperty);
+        set => SetValue(StartSourceProperty, value);
+    }
+
+    public static readonly DependencyProperty StartActionButtonProperty =
+        DependencyProperty.Register(nameof(StartActionButton), typeof(object), typeof(DockContentControl), new PropertyMetadata(null));
+
+    public object StartActionButton
+    {
+        get => GetValue(StartActionButtonProperty);
+        set => SetValue(StartActionButtonProperty, value);
+    }
+
+    public static readonly DependencyProperty CenterSourceProperty =
+        DependencyProperty.Register(nameof(CenterSource), typeof(object), typeof(DockContentControl), new PropertyMetadata(null));
+
+    public object CenterSource
+    {
+        get => GetValue(CenterSourceProperty);
+        set => SetValue(CenterSourceProperty, value);
+    }
+
+    public static readonly DependencyProperty CenterActionButtonProperty =
+        DependencyProperty.Register(nameof(CenterActionButton), typeof(object), typeof(DockContentControl), new PropertyMetadata(null));
+
+    public object CenterActionButton
+    {
+        get => GetValue(CenterActionButtonProperty);
+        set => SetValue(CenterActionButtonProperty, value);
+    }
+
+    public static readonly DependencyProperty EndSourceProperty =
+        DependencyProperty.Register(nameof(EndSource), typeof(object), typeof(DockContentControl), new PropertyMetadata(null));
+
+    public object EndSource
+    {
+        get => GetValue(EndSourceProperty);
+        set => SetValue(EndSourceProperty, value);
+    }
+
+    public static readonly DependencyProperty EndActionButtonProperty =
+        DependencyProperty.Register(nameof(EndActionButton), typeof(object), typeof(DockContentControl), new PropertyMetadata(null));
+
+    public object EndActionButton
+    {
+        get => GetValue(EndActionButtonProperty);
+        set => SetValue(EndActionButtonProperty, value);
+    }
+
+    public DockContentControl()
+    {
+        this.InitializeComponent();
+    }
+}

src/modules/cmdpal/Microsoft.CmdPal.UI/Dock/DockControl.xaml

@@ -184,159 +184,122 @@
         x:Name="RootGrid"
         BorderThickness="0,0,0,1"
         RightTapped="RootGrid_RightTapped">
-        <!--  Edit Mode Overlay - shown when in edit mode  -->
+        <!--  Dock content with Start / Center / End sections  -->
-        <Grid
+        <local:DockContentControl
             x:Name="ContentGrid"
             Margin="4"
             Padding="0,0,0,0"
             Background="Transparent"
+            IsEditMode="{x:Bind IsEditMode, Mode=OneWay}"
             RightTapped="RootGrid_RightTapped">
-            <Grid.ColumnDefinitions>
+            <local:DockContentControl.StartSource>
-                <ColumnDefinition Width="*" />
+                <ListView
-                <ColumnDefinition Width="Auto" />
+                    x:Name="StartListView"
-                <ColumnDefinition Width="*" />
+                    HorizontalAlignment="Stretch"
-            </Grid.ColumnDefinitions>
+                    DragItemsCompleted="BandListView_DragItemsCompleted"
-            <Grid.RowDefinitions>
+                    DragItemsStarting="BandListView_DragItemsStarting"
-                <RowDefinition Height="*" />
+                    DragOver="BandListView_DragOver"
-                <RowDefinition Height="Auto" />
+                    Drop="StartListView_Drop"
-                <RowDefinition Height="*" />
+                    ItemContainerStyle="{StaticResource DockBandListViewItemStyle}"
-            </Grid.RowDefinitions>
+                    ItemTemplate="{StaticResource DockBandTemplate}"
+                    ItemsPanel="{StaticResource HorizontalItemsPanel}"
+                    ItemsSource="{x:Bind ViewModel.StartItems, Mode=OneWay}"
+                    SelectionMode="None"
+                    Style="{StaticResource DockBandListViewStyle}" />
+            </local:DockContentControl.StartSource>
+            <local:DockContentControl.StartActionButton>
+                <Button
+                    x:Name="StartAddButton"
+                    Click="AddBandButton_Click"
+                    Style="{StaticResource SubtleButtonStyle}"
+                    Tag="Start"
+                    ToolTipService.ToolTip="Add band to Start">
+                    <FontIcon FontSize="12" Glyph="&#xE710;" />
+                </Button>
+            </local:DockContentControl.StartActionButton>
 
-            <cpcontrols:ScrollContainer
+            <local:DockContentControl.CenterSource>
-                x:Name="StartScroller"
+                <ListView
-                Grid.Row="0"
+                    x:Name="CenterListView"
-                Grid.RowSpan="3"
+                    HorizontalAlignment="Stretch"
-                HorizontalAlignment="Left"
+                    DragItemsCompleted="BandListView_DragItemsCompleted"
-                VerticalAlignment="Stretch">
+                    DragItemsStarting="BandListView_DragItemsStarting"
-                <cpcontrols:ScrollContainer.ActionButton>
+                    DragOver="BandListView_DragOver"
+                    Drop="CenterListView_Drop"
+                    ItemContainerStyle="{StaticResource DockBandListViewItemStyle}"
+                    ItemTemplate="{StaticResource DockBandTemplate}"
+                    ItemsPanel="{StaticResource HorizontalItemsPanel}"
+                    ItemsSource="{x:Bind ViewModel.CenterItems, Mode=OneWay}"
+                    SelectionMode="None"
+                    Style="{StaticResource DockBandListViewStyle}" />
+            </local:DockContentControl.CenterSource>
+            <local:DockContentControl.CenterActionButton>
+                <Button
+                    x:Name="CenterAddButton"
+                    Click="AddBandButton_Click"
+                    Style="{StaticResource SubtleButtonStyle}"
+                    Tag="Center"
+                    ToolTipService.ToolTip="Add band to Center">
+                    <FontIcon FontSize="12" Glyph="&#xE710;" />
+                </Button>
+            </local:DockContentControl.CenterActionButton>
+
+            <local:DockContentControl.EndSource>
+                <ListView
+                    x:Name="EndListView"
+                    DragItemsCompleted="BandListView_DragItemsCompleted"
+                    DragItemsStarting="BandListView_DragItemsStarting"
+                    DragOver="BandListView_DragOver"
+                    Drop="EndListView_Drop"
+                    ItemContainerStyle="{StaticResource DockBandListViewItemStyle}"
+                    ItemTemplate="{StaticResource DockBandTemplate}"
+                    ItemsPanel="{StaticResource HorizontalItemsPanel}"
+                    ItemsSource="{x:Bind ViewModel.EndItems, Mode=OneWay}"
+                    SelectionMode="None"
+                    Style="{StaticResource DockBandListViewStyle}">
+                    <ListView.ItemContainerTransitions>
+                        <TransitionCollection />
+                    </ListView.ItemContainerTransitions>
+                </ListView>
+            </local:DockContentControl.EndSource>
+            <local:DockContentControl.EndActionButton>
+                <Button
+                    x:Name="EndAddButton"
+                    Click="AddBandButton_Click"
+                    Style="{StaticResource SubtleButtonStyle}"
+                    Tag="End"
+                    ToolTipService.ToolTip="Add band to End">
+                    <FontIcon FontSize="12" Glyph="&#xE710;" />
+                </Button>
+            </local:DockContentControl.EndActionButton>
+        </local:DockContentControl>
+
+        <TeachingTip
+            x:Name="EditButtonsTeachingTip"
+            MinWidth="0"
+            PreferredPlacement="Bottom"
+            ShouldConstrainToRootBounds="False"
+            Style="{StaticResource TeachingTipWithoutCloseButtonStyle}"
+            Target="{x:Bind ContentGrid}">
+
+            <TeachingTip.Content>
+                <StackPanel
+                    x:Name="EditButtonsPanel"
+                    HorizontalAlignment="Stretch"
+                    Orientation="Vertical"
+                    Spacing="4">
                     <Button
-                        x:Name="StartAddButton"
-                        Click="AddBandButton_Click"
-                        Style="{StaticResource SubtleButtonStyle}"
-                        Tag="Start"
-                        ToolTipService.ToolTip="Add band to Start">
-                        <FontIcon FontSize="12" Glyph="&#xE710;" />
-                    </Button>
-                </cpcontrols:ScrollContainer.ActionButton>
-                <cpcontrols:ScrollContainer.Source>
-                    <ListView
-                        x:Name="StartListView"
                         HorizontalAlignment="Stretch"
-                        DragItemsCompleted="BandListView_DragItemsCompleted"
+                        Click="DoneEditingButton_Click"
-                        DragItemsStarting="BandListView_DragItemsStarting"
+                        Content="Save"
-                        DragOver="BandListView_DragOver"
+                        Style="{StaticResource AccentButtonStyle}" />
-                        Drop="StartListView_Drop"
-                        ItemContainerStyle="{StaticResource DockBandListViewItemStyle}"
-                        ItemTemplate="{StaticResource DockBandTemplate}"
-                        ItemsPanel="{StaticResource HorizontalItemsPanel}"
-                        ItemsSource="{x:Bind ViewModel.StartItems, Mode=OneWay}"
-                        SelectionMode="None"
-                        Style="{StaticResource DockBandListViewStyle}"
-                        TabIndex="0" />
-                </cpcontrols:ScrollContainer.Source>
-            </cpcontrols:ScrollContainer>
-
-            <cpcontrols:ScrollContainer
-                x:Name="CenterScroller"
-                Grid.Row="0"
-                Grid.RowSpan="3"
-                Grid.Column="1"
-                MinWidth="48"
-                HorizontalAlignment="Center"
-                VerticalAlignment="Stretch">
-                <cpcontrols:ScrollContainer.ActionButton>
                     <Button
-                        x:Name="CenterAddButton"
-                        Click="AddBandButton_Click"
-                        Style="{StaticResource SubtleButtonStyle}"
-                        Tag="Center"
-                        ToolTipService.ToolTip="Add band to Center">
-                        <FontIcon FontSize="12" Glyph="&#xE710;" />
-                    </Button>
-                </cpcontrols:ScrollContainer.ActionButton>
-                <cpcontrols:ScrollContainer.Source>
-                    <ListView
-                        x:Name="CenterListView"
                         HorizontalAlignment="Stretch"
-                        DragItemsCompleted="BandListView_DragItemsCompleted"
+                        Click="DiscardEditingButton_Click"
-                        DragItemsStarting="BandListView_DragItemsStarting"
+                        Content="Discard" />
-                        DragOver="BandListView_DragOver"
+                </StackPanel>
-                        Drop="CenterListView_Drop"
+            </TeachingTip.Content>
-                        ItemContainerStyle="{StaticResource DockBandListViewItemStyle}"
+        </TeachingTip>
-                        ItemTemplate="{StaticResource DockBandTemplate}"
-                        ItemsPanel="{StaticResource HorizontalItemsPanel}"
-                        ItemsSource="{x:Bind ViewModel.CenterItems, Mode=OneWay}"
-                        SelectionMode="None"
-                        Style="{StaticResource DockBandListViewStyle}"
-                        TabIndex="1" />
-                </cpcontrols:ScrollContainer.Source>
-            </cpcontrols:ScrollContainer>
-
-            <cpcontrols:ScrollContainer
-                x:Name="EndScroller"
-                Grid.Row="0"
-                Grid.RowSpan="3"
-                Grid.Column="2"
-                HorizontalAlignment="Right"
-                VerticalAlignment="Stretch"
-                ContentAlignment="End">
-                <cpcontrols:ScrollContainer.ActionButton>
-                    <Button
-                        x:Name="EndAddButton"
-                        Click="AddBandButton_Click"
-                        Style="{StaticResource SubtleButtonStyle}"
-                        Tag="End"
-                        ToolTipService.ToolTip="Add band to End">
-                        <FontIcon FontSize="12" Glyph="&#xE710;" />
-                    </Button>
-                </cpcontrols:ScrollContainer.ActionButton>
-                <cpcontrols:ScrollContainer.Source>
-                    <ListView
-                        x:Name="EndListView"
-                        DragItemsCompleted="BandListView_DragItemsCompleted"
-                        DragItemsStarting="BandListView_DragItemsStarting"
-                        DragOver="BandListView_DragOver"
-                        Drop="EndListView_Drop"
-                        ItemContainerStyle="{StaticResource DockBandListViewItemStyle}"
-                        ItemTemplate="{StaticResource DockBandTemplate}"
-                        ItemsPanel="{StaticResource HorizontalItemsPanel}"
-                        ItemsSource="{x:Bind ViewModel.EndItems, Mode=OneWay}"
-                        SelectionMode="None"
-                        Style="{StaticResource DockBandListViewStyle}"
-                        TabIndex="2">
-                        <ListView.ItemContainerTransitions>
-                            <TransitionCollection />
-                        </ListView.ItemContainerTransitions>
-                    </ListView>
-                </cpcontrols:ScrollContainer.Source>
-            </cpcontrols:ScrollContainer>
-            <TeachingTip
-                x:Name="EditButtonsTeachingTip"
-                MinWidth="0"
-                PreferredPlacement="Bottom"
-                ShouldConstrainToRootBounds="False"
-                Style="{StaticResource TeachingTipWithoutCloseButtonStyle}"
-                Target="{x:Bind ContentGrid}">
-
-                <TeachingTip.Content>
-                    <StackPanel
-                        x:Name="EditButtonsPanel"
-                        HorizontalAlignment="Stretch"
-                        Orientation="Vertical"
-                        Spacing="4">
-                        <Button
-                            HorizontalAlignment="Stretch"
-                            Click="DoneEditingButton_Click"
-                            Content="Save"
-                            Style="{StaticResource AccentButtonStyle}" />
-                        <Button
-                            HorizontalAlignment="Stretch"
-                            Click="DiscardEditingButton_Click"
-                            Content="Discard" />
-                    </StackPanel>
-                </TeachingTip.Content>
-            </TeachingTip>
-        </Grid>
         <VisualStateManager.VisualStateGroups>
             <VisualStateGroup x:Name="DockOrientation">
                 <VisualState x:Name="DockOnTop">
@@ -361,35 +324,10 @@
                         <ui:IsEqualStateTrigger Value="{x:Bind DockSide, Mode=OneWay}" To="Left" />
                     </VisualState.StateTriggers>
                     <VisualState.Setters>
-                        <Setter Target="StartScroller.(Grid.Row)" Value="0" />
+                        <Setter Target="ContentGrid.Orientation" Value="Vertical" />
-                        <Setter Target="StartScroller.(Grid.RowSpan)" Value="1" />
-                        <Setter Target="StartScroller.(Grid.Column)" Value="0" />
-                        <Setter Target="StartScroller.(Grid.ColumnSpan)" Value="3" />
-                        <Setter Target="StartScroller.Orientation" Value="Vertical" />
-                        <Setter Target="StartScroller.HorizontalAlignment" Value="Stretch" />
-                        <Setter Target="StartScroller.VerticalAlignment" Value="Top" />
-                        <Setter Target="StartScroller.Orientation" Value="Vertical" />
-
-                        <Setter Target="CenterScroller.(Grid.Row)" Value="1" />
-                        <Setter Target="CenterScroller.(Grid.RowSpan)" Value="1" />
-                        <Setter Target="CenterScroller.(Grid.Column)" Value="0" />
-                        <Setter Target="CenterScroller.(Grid.ColumnSpan)" Value="3" />
-                        <Setter Target="CenterScroller.Orientation" Value="Vertical" />
-                        <Setter Target="CenterScroller.HorizontalAlignment" Value="Stretch" />
-                        <Setter Target="CenterScroller.VerticalAlignment" Value="Center" />
-                        <Setter Target="CenterScroller.Orientation" Value="Vertical" />
-
-                        <Setter Target="EndScroller.Orientation" Value="Vertical" />
-                        <Setter Target="EndScroller.(Grid.Row)" Value="2" />
-                        <Setter Target="EndScroller.(Grid.RowSpan)" Value="1" />
-                        <Setter Target="EndScroller.(Grid.Column)" Value="0" />
-                        <Setter Target="EndScroller.(Grid.ColumnSpan)" Value="3" />
-                        <Setter Target="EndScroller.HorizontalAlignment" Value="Stretch" />
-                        <Setter Target="EndScroller.VerticalAlignment" Value="Bottom" />
                         <Setter Target="ContentGrid.Margin" Value="0,0,4,4" />
                         <Setter Target="ContentGrid.Padding" Value="0,0,4,8" />
                         <Setter Target="RootGrid.BorderThickness" Value="0,0,1,0" />
-
                         <Setter Target="StartListView.ItemsPanel" Value="{StaticResource VerticalItemsPanel}" />
                         <Setter Target="CenterListView.ItemsPanel" Value="{StaticResource VerticalItemsPanel}" />
                         <Setter Target="EndListView.ItemsPanel" Value="{StaticResource VerticalItemsPanel}" />
@@ -400,65 +338,16 @@
                         <ui:IsEqualStateTrigger Value="{x:Bind DockSide, Mode=OneWay}" To="Right" />
                     </VisualState.StateTriggers>
                     <VisualState.Setters>
-                        <Setter Target="StartScroller.(Grid.Row)" Value="0" />
+                        <Setter Target="ContentGrid.Orientation" Value="Vertical" />
-                        <Setter Target="StartScroller.(Grid.RowSpan)" Value="1" />
-                        <Setter Target="StartScroller.(Grid.Column)" Value="0" />
-                        <Setter Target="StartScroller.(Grid.ColumnSpan)" Value="3" />
-                        <Setter Target="StartScroller.Orientation" Value="Vertical" />
-                        <Setter Target="StartScroller.HorizontalAlignment" Value="Stretch" />
-                        <Setter Target="StartScroller.VerticalAlignment" Value="Top" />
-                        <Setter Target="StartScroller.Orientation" Value="Vertical" />
-
-                        <Setter Target="CenterScroller.(Grid.Row)" Value="1" />
-                        <Setter Target="CenterScroller.(Grid.RowSpan)" Value="1" />
-                        <Setter Target="CenterScroller.(Grid.Column)" Value="0" />
-                        <Setter Target="CenterScroller.(Grid.ColumnSpan)" Value="3" />
-                        <Setter Target="CenterScroller.Orientation" Value="Vertical" />
-                        <Setter Target="CenterScroller.HorizontalAlignment" Value="Stretch" />
-                        <Setter Target="CenterScroller.VerticalAlignment" Value="Center" />
-                        <Setter Target="CenterScroller.Orientation" Value="Vertical" />
-
-                        <Setter Target="EndScroller.Orientation" Value="Vertical" />
-                        <Setter Target="EndScroller.(Grid.Row)" Value="2" />
-                        <Setter Target="EndScroller.(Grid.RowSpan)" Value="1" />
-                        <Setter Target="EndScroller.(Grid.Column)" Value="0" />
-                        <Setter Target="EndScroller.(Grid.ColumnSpan)" Value="3" />
-                        <Setter Target="EndScroller.HorizontalAlignment" Value="Stretch" />
-                        <Setter Target="EndScroller.VerticalAlignment" Value="Bottom" />
                         <Setter Target="ContentGrid.Margin" Value="4,0,0,4" />
                         <Setter Target="ContentGrid.Padding" Value="4,0,0,8" />
                         <Setter Target="RootGrid.BorderThickness" Value="1,0,0,0" />
-
                         <Setter Target="StartListView.ItemsPanel" Value="{StaticResource VerticalItemsPanel}" />
                         <Setter Target="CenterListView.ItemsPanel" Value="{StaticResource VerticalItemsPanel}" />
                         <Setter Target="EndListView.ItemsPanel" Value="{StaticResource VerticalItemsPanel}" />
                     </VisualState.Setters>
                 </VisualState>
             </VisualStateGroup>
-
-            <!--  Edit Mode Visual States  -->
-            <VisualStateGroup x:Name="EditModeStates">
-                <VisualState x:Name="EditModeOff" />
-                <VisualState x:Name="EditModeOn">
-                    <VisualState.Setters>
-                        <Setter Target="StartScroller.BorderBrush" Value="{ThemeResource CardStrokeColorDefaultBrush}" />
-                        <Setter Target="StartScroller.Background" Value="{ThemeResource CardBackgroundFillColorDefaultBrush}" />
-                        <Setter Target="StartScroller.BorderThickness" Value="1" />
-                        <Setter Target="StartScroller.CornerRadius" Value="{StaticResource OverlayCornerRadius}" />
-                        <Setter Target="CenterScroller.BorderBrush" Value="{ThemeResource CardStrokeColorDefaultBrush}" />
-                        <Setter Target="CenterScroller.Background" Value="{ThemeResource CardBackgroundFillColorDefaultBrush}" />
-                        <Setter Target="CenterScroller.BorderThickness" Value="1" />
-                        <Setter Target="CenterScroller.CornerRadius" Value="{StaticResource OverlayCornerRadius}" />
-                        <Setter Target="EndScroller.BorderBrush" Value="{ThemeResource CardStrokeColorDefaultBrush}" />
-                        <Setter Target="EndScroller.Background" Value="{ThemeResource CardBackgroundFillColorDefaultBrush}" />
-                        <Setter Target="EndScroller.BorderThickness" Value="1" />
-                        <Setter Target="EndScroller.CornerRadius" Value="{StaticResource OverlayCornerRadius}" />
-                        <Setter Target="StartScroller.ActionButtonVisibility" Value="Visible" />
-                        <Setter Target="CenterScroller.ActionButtonVisibility" Value="Visible" />
-                        <Setter Target="EndScroller.ActionButtonVisibility" Value="Visible" />
-                    </VisualState.Setters>
-                </VisualState>
-            </VisualStateGroup>
         </VisualStateManager.VisualStateGroups>
     </Grid>
 </UserControl>

src/modules/cmdpal/Microsoft.CmdPal.UI/Dock/DockControl.xaml.cs

@@ -3,6 +3,7 @@
 // See the LICENSE file in the project root for more information.
 
 using System.Collections.ObjectModel;
+using System.Collections.Specialized;
 using System.Runtime.InteropServices;
 using CommunityToolkit.Mvvm.Messaging;
 using ManagedCommon;
@@ -69,10 +70,22 @@ public sealed partial class DockControl : UserControl, IRecipient<CloseContextMe
         WeakReferenceMessenger.Default.Register<CloseContextMenuMessage>(this);
         WeakReferenceMessenger.Default.Register<EnterDockEditModeMessage>(this);
 
+        ViewModel.CenterItems.CollectionChanged += CenterItems_CollectionChanged;
+
         // Start with edit mode disabled - normal click behavior
         UpdateEditMode(false);
     }
 
+    private void CenterItems_CollectionChanged(object? sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
+    {
+        UpdateCenterVisibility();
+    }
+
+    private void UpdateCenterVisibility()
+    {
+        ContentGrid.IsCenterVisible = IsEditMode || ViewModel.CenterItems.Count > 0;
+    }
+
     public void Receive(EnterDockEditModeMessage message)
     {
         // Message may arrive from a background thread, dispatch to UI thread
@@ -84,6 +97,9 @@ public sealed partial class DockControl : UserControl, IRecipient<CloseContextMe
 
     private void UpdateEditMode(bool isEditMode)
     {
+        // Update center visibility based on edit mode and center items
+        UpdateCenterVisibility();
+
         // Enable/disable drag-and-drop based on edit mode
         StartListView.CanDragItems = isEditMode;
         StartListView.CanReorderItems = isEditMode;
@@ -110,9 +126,6 @@ public sealed partial class DockControl : UserControl, IRecipient<CloseContextMe
         }
 
         EditButtonsTeachingTip.IsOpen = isEditMode;
-
-        // Update visual state
-        VisualStateManager.GoToState(this, isEditMode ? "EditModeOn" : "EditModeOff", true);
     }
 
     internal void EnterEditMode()
@@ -218,6 +231,7 @@ public sealed partial class DockControl : UserControl, IRecipient<CloseContextMe
             if (item.HasMoreCommands)
             {
                 ContextControl.ViewModel.SelectedItem = item;
+                ContextControl.ShowFilterBox = true;
                 ContextMenuFlyout.ShowAt(
                     dockItem,
                     new FlyoutShowOptions()
@@ -299,6 +313,7 @@ public sealed partial class DockControl : UserControl, IRecipient<CloseContextMe
         if (item.HasMoreCommands)
         {
             ContextControl.ViewModel.SelectedItem = item;
+            ContextControl.ShowFilterBox = false;
             ContextMenuFlyout.ShowAt(
             this.RootGrid,
             new FlyoutShowOptions()

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

@@ -46,34 +46,23 @@
                     <TextBlock x:Uid="DockAppearanceSettingsHeader" Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />
 
                     <!--  Dock Position  -->
-                    <controls:SettingsExpander x:Uid="DockAppearance_DockPosition_SettingsExpander" IsExpanded="True">
+                    <controls:SettingsCard x:Uid="DockAppearance_DockPosition_SettingsCard">
-                        <controls:SettingsExpander.HeaderIcon>
+                        <controls:SettingsCard.HeaderIcon>
                             <SymbolIcon Symbol="MoveToFolder" />
-                        </controls:SettingsExpander.HeaderIcon>
+                        </controls:SettingsCard.HeaderIcon>
                         <ComboBox
                             x:Name="DockPositionComboBox"
-                            MinWidth="120"
+                            MinWidth="{StaticResource SettingActionControlMinWidth}"
                             SelectedIndex="{x:Bind SelectedSideIndex, Mode=TwoWay}">
                             <ComboBoxItem x:Uid="DockAppearance_DockPosition_Left" />
                             <ComboBoxItem x:Uid="DockAppearance_DockPosition_Top" />
                             <ComboBoxItem x:Uid="DockAppearance_DockPosition_Right" />
                             <ComboBoxItem x:Uid="DockAppearance_DockPosition_Bottom" />
                         </ComboBox>
-                        <controls:SettingsExpander.Items>
+                    </controls:SettingsCard>
-
-                            <!--  Show Labels  -->
-                            <controls:SettingsCard ContentAlignment="Left">
-                                <ptcontrols:CheckBoxWithDescriptionControl x:Uid="DockAppearance_ShowLabels_CheckBox" IsChecked="{x:Bind ShowLabels, Mode=TwoWay}" />
-                            </controls:SettingsCard>
-                        </controls:SettingsExpander.Items>
-                    </controls:SettingsExpander>
-
-                    <!--  Theme Section  -->
-                    <TextBlock x:Uid="DockAppearance_ThemeSettingsHeader" Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />
 
                     <controls:SettingsCard x:Uid="DockAppearance_AppTheme_SettingsCard" HeaderIcon="{ui:FontIcon Glyph=&#xE793;}">
                         <ComboBox MinWidth="{StaticResource SettingActionControlMinWidth}" SelectedIndex="{x:Bind ViewModel.DockAppearance.ThemeIndex, Mode=TwoWay}">
-
                             <ComboBoxItem x:Uid="Settings_GeneralPage_AppTheme_Mode_System_Automation" Tag="Default">
                                 <StackPanel Orientation="Horizontal" Spacing="8">
                                     <FontIcon FontSize="16" Glyph="&#xE770;" />

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

@@ -763,9 +763,6 @@ Right-click to remove the key combination, thereby deactivating the shortcut.</v
   <data name="Settings_PageTitles_DockAppearancePage" xml:space="preserve">
     <value>Dock Appearance</value>
   </data>
-  <data name="DockAppearance_ThemeSettingsHeader.Text" xml:space="preserve">
-    <value>Theme</value>
-  </data>
   <data name="DockAppearance_AppTheme_SettingsCard.Header" xml:space="preserve">
     <value>Dock theme mode</value>
   </data>
@@ -891,8 +888,8 @@ Right-click to remove the key combination, thereby deactivating the shortcut.</v
   <data name="ConfigureShortcutText.Text" xml:space="preserve">
     <value>Assign shortcut</value>
   </data>
-  <data name="DockAppearance_DockPosition_SettingsExpander.Header" xml:space="preserve">
+  <data name="DockAppearance_DockPosition_SettingsCard.Header" xml:space="preserve">
-    <value>Dock position and appearance</value>
+    <value>Dock position</value>
   </data>
   <data name="DockAppearance_DockPosition_SettingsExpander.Description" xml:space="preserve">
     <value>Choose where the dock appears on your screen</value>