[CmdPal] Visual dock tweaks (#45954)

## Summary of the Pull Request

- Changes the Dock height to 38px (from 32) to avoid item and app
clipping.
- Localization
- Removing dead code
- If the tooltip string is null or empty, the tooltip will not be shown
- Adding hyperlinks on the General and Dock pages in Settings (to be
updated to the corresponding docs via aka.ms)
- The droptarget for an empty listview is now wider, and has a
highlight-color to communicate an item can be dropped:
<img width="371" height="142" alt="image"
src="https://github.com/user-attachments/assets/6863ca5a-cdd4-450b-ab57-d03d83170cf8"
/>



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

- [ ] Closes: #xxx
<!-- - [ ] Closes: #yyy (add separate lines for additional resolved
issues) -->
- [ ] **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
This commit is contained in:
Niels Laute
2026-03-06 22:27:23 +01:00
committed by GitHub
parent 02062dd023
commit 8c4ff37a50
10 changed files with 146 additions and 66 deletions

View File

@@ -484,7 +484,7 @@ namespace Microsoft.CmdPal.UI.ViewModels.Properties {
}
/// <summary>
/// Looks up a localized string similar to Edit dock.
/// Looks up a localized string similar to Edit Dock.
/// </summary>
public static string dock_edit_dock_name {
get {
@@ -511,7 +511,7 @@ namespace Microsoft.CmdPal.UI.ViewModels.Properties {
}
/// <summary>
/// Looks up a localized string similar to Dock settings.
/// Looks up a localized string similar to Settings.
/// </summary>
public static string dock_settings_name {
get {

View File

@@ -277,11 +277,11 @@
<value>Fallbacks</value>
</data>
<data name="dock_edit_dock_name" xml:space="preserve">
<value>Edit dock</value>
<value>Edit Dock</value>
<comment>Command name for editing the dock</comment>
</data>
<data name="dock_settings_name" xml:space="preserve">
<value>Dock settings</value>
<value>Settings</value>
<comment>Command name for opening dock settings</comment>
</data>
<data name="ShowDetailsCommand" xml:space="preserve">

View File

@@ -1,4 +1,4 @@
<?xml version="1.0" encoding="utf-8" ?>
<?xml version="1.0" encoding="utf-8" ?>
<UserControl
x:Class="Microsoft.CmdPal.UI.Dock.DockControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
@@ -108,24 +108,24 @@
<!-- Edit mode context menu for dock bands -->
<MenuFlyout x:Name="EditModeContextMenu" ShouldConstrainToRootBounds="False">
<MenuFlyoutSubItem x:Name="LabelsSubMenu" Text="Labels">
<MenuFlyoutSubItem x:Name="LabelsSubMenu" x:Uid="Dock_EditMode_Labels">
<MenuFlyoutSubItem.Icon>
<FontIcon Glyph="&#xE8EC;" />
</MenuFlyoutSubItem.Icon>
<ToggleMenuFlyoutItem
x:Name="ShowTitlesMenuItem"
Click="ShowTitlesMenuItem_Click"
Text="Show titles" />
x:Uid="Dock_EditMode_ShowTitles"
Click="ShowTitlesMenuItem_Click" />
<ToggleMenuFlyoutItem
x:Name="ShowSubtitlesMenuItem"
Click="ShowSubtitlesMenuItem_Click"
Text="Show subtitles" />
x:Uid="Dock_EditMode_ShowSubtitles"
Click="ShowSubtitlesMenuItem_Click" />
</MenuFlyoutSubItem>
<MenuFlyoutSeparator />
<MenuFlyoutItem
x:Name="UnpinBandMenuItem"
Click="UnpinBandMenuItem_Click"
Text="Unpin">
x:Uid="Dock_EditMode_Unpin"
Click="UnpinBandMenuItem_Click">
<MenuFlyoutItem.Icon>
<FontIcon Glyph="&#xE77A;" />
</MenuFlyoutItem.Icon>
@@ -140,9 +140,9 @@
<StackPanel Width="320">
<TextBlock
x:Name="NoAvailableBandsText"
x:Uid="Dock_AddBand_NoCommandsAvailable"
Padding="12"
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
Text="No commands available to pin"
TextAlignment="Center"
Visibility="Collapsed" />
<ListView
@@ -188,16 +188,18 @@
<local:DockContentControl
x:Name="ContentGrid"
Margin="4"
Padding="0,0,0,0"
Background="Transparent"
IsEditMode="{x:Bind IsEditMode, Mode=OneWay}"
RightTapped="RootGrid_RightTapped">
<local:DockContentControl.StartSource>
<ListView
x:Name="StartListView"
MinWidth="48"
HorizontalAlignment="Stretch"
DragEnter="BandListView_DragEnter"
DragItemsCompleted="BandListView_DragItemsCompleted"
DragItemsStarting="BandListView_DragItemsStarting"
DragLeave="BandListView_DragLeave"
DragOver="BandListView_DragOver"
Drop="StartListView_Drop"
ItemContainerStyle="{StaticResource DockBandListViewItemStyle}"
@@ -210,10 +212,11 @@
<local:DockContentControl.StartActionButton>
<Button
x:Name="StartAddButton"
x:Uid="Dock_AddBand_StartTooltip"
MinHeight="30"
Click="AddBandButton_Click"
Style="{StaticResource SubtleButtonStyle}"
Tag="Start"
ToolTipService.ToolTip="Add band to Start">
Tag="Start">
<FontIcon FontSize="12" Glyph="&#xE710;" />
</Button>
</local:DockContentControl.StartActionButton>
@@ -221,9 +224,12 @@
<local:DockContentControl.CenterSource>
<ListView
x:Name="CenterListView"
MinWidth="48"
HorizontalAlignment="Stretch"
DragEnter="BandListView_DragEnter"
DragItemsCompleted="BandListView_DragItemsCompleted"
DragItemsStarting="BandListView_DragItemsStarting"
DragLeave="BandListView_DragLeave"
DragOver="BandListView_DragOver"
Drop="CenterListView_Drop"
ItemContainerStyle="{StaticResource DockBandListViewItemStyle}"
@@ -236,10 +242,11 @@
<local:DockContentControl.CenterActionButton>
<Button
x:Name="CenterAddButton"
x:Uid="Dock_AddBand_CenterTooltip"
MinHeight="30"
Click="AddBandButton_Click"
Style="{StaticResource SubtleButtonStyle}"
Tag="Center"
ToolTipService.ToolTip="Add band to Center">
Tag="Center">
<FontIcon FontSize="12" Glyph="&#xE710;" />
</Button>
</local:DockContentControl.CenterActionButton>
@@ -247,8 +254,11 @@
<local:DockContentControl.EndSource>
<ListView
x:Name="EndListView"
MinWidth="48"
DragEnter="BandListView_DragEnter"
DragItemsCompleted="BandListView_DragItemsCompleted"
DragItemsStarting="BandListView_DragItemsStarting"
DragLeave="BandListView_DragLeave"
DragOver="BandListView_DragOver"
Drop="EndListView_Drop"
ItemContainerStyle="{StaticResource DockBandListViewItemStyle}"
@@ -265,10 +275,11 @@
<local:DockContentControl.EndActionButton>
<Button
x:Name="EndAddButton"
x:Uid="Dock_AddBand_EndTooltip"
MinHeight="30"
Click="AddBandButton_Click"
Style="{StaticResource SubtleButtonStyle}"
Tag="End"
ToolTipService.ToolTip="Add band to End">
Tag="End">
<FontIcon FontSize="12" Glyph="&#xE710;" />
</Button>
</local:DockContentControl.EndActionButton>
@@ -281,7 +292,6 @@
ShouldConstrainToRootBounds="False"
Style="{StaticResource TeachingTipWithoutCloseButtonStyle}"
Target="{x:Bind ContentGrid}">
<TeachingTip.Content>
<StackPanel
x:Name="EditButtonsPanel"
@@ -289,14 +299,14 @@
Orientation="Vertical"
Spacing="4">
<Button
x:Uid="Dock_EditMode_Save"
HorizontalAlignment="Stretch"
Click="DoneEditingButton_Click"
Content="Save"
Style="{StaticResource AccentButtonStyle}" />
<Button
x:Uid="Dock_EditMode_Discard"
HorizontalAlignment="Stretch"
Click="DiscardEditingButton_Click"
Content="Discard" />
Click="DiscardEditingButton_Click" />
</StackPanel>
</TeachingTip.Content>
</TeachingTip>
@@ -328,6 +338,9 @@
<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.MinHeight" Value="48" />
<Setter Target="CenterListView.MinHeight" Value="48" />
<Setter Target="EndListView.MinHeight" Value="48" />
<Setter Target="StartListView.ItemsPanel" Value="{StaticResource VerticalItemsPanel}" />
<Setter Target="CenterListView.ItemsPanel" Value="{StaticResource VerticalItemsPanel}" />
<Setter Target="EndListView.ItemsPanel" Value="{StaticResource VerticalItemsPanel}" />
@@ -342,6 +355,9 @@
<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.MinHeight" Value="48" />
<Setter Target="CenterListView.MinHeight" Value="48" />
<Setter Target="EndListView.MinHeight" Value="48" />
<Setter Target="StartListView.ItemsPanel" Value="{StaticResource VerticalItemsPanel}" />
<Setter Target="CenterListView.ItemsPanel" Value="{StaticResource VerticalItemsPanel}" />
<Setter Target="EndListView.ItemsPanel" Value="{StaticResource VerticalItemsPanel}" />

View File

@@ -76,7 +76,7 @@ public sealed partial class DockControl : UserControl, IRecipient<CloseContextMe
UpdateEditMode(false);
}
private void CenterItems_CollectionChanged(object? sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
private void CenterItems_CollectionChanged(object? sender, NotifyCollectionChangedEventArgs e)
{
UpdateCenterVisibility();
}
@@ -308,6 +308,12 @@ public sealed partial class DockControl : UserControl, IRecipient<CloseContextMe
private void RootGrid_RightTapped(object sender, Microsoft.UI.Xaml.Input.RightTappedRoutedEventArgs e)
{
// Don't show the dock context menu while in edit mode
if (IsEditMode)
{
return;
}
var pos = e.GetPosition(null);
var item = this.ViewModel.GetContextMenuForDock();
if (item.HasMoreCommands)
@@ -384,16 +390,19 @@ public sealed partial class DockControl : UserControl, IRecipient<CloseContextMe
private void StartListView_Drop(object sender, DragEventArgs e)
{
HandleCrossListDrop(DockPinSide.Start, e);
ResetListViewState(sender);
}
private void CenterListView_Drop(object sender, DragEventArgs e)
{
HandleCrossListDrop(DockPinSide.Center, e);
ResetListViewState(sender);
}
private void EndListView_Drop(object sender, DragEventArgs e)
{
HandleCrossListDrop(DockPinSide.End, e);
ResetListViewState(sender);
}
private void HandleCrossListDrop(DockPinSide targetSide, DragEventArgs e)
@@ -522,4 +531,27 @@ public sealed partial class DockControl : UserControl, IRecipient<CloseContextMe
AddBandFlyout.Hide();
}
}
private void BandListView_DragEnter(object sender, DragEventArgs e)
{
if (sender is ListView view)
{
view.Background = Application.Current.Resources["ControlAltFillColorQuarternaryBrush"] as SolidColorBrush;
e.DragUIOverride.IsGlyphVisible = false;
e.DragUIOverride.IsCaptionVisible = false;
}
}
private void BandListView_DragLeave(object sender, DragEventArgs e)
{
ResetListViewState(sender);
}
private void ResetListViewState(object sender)
{
if (sender is ListView listView)
{
listView.Background = new SolidColorBrush(Colors.Transparent);
}
}
}

View File

@@ -60,10 +60,7 @@
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:DockItemControl">
<Grid
x:Name="PART_HitTestGrid"
Background="Transparent"
ToolTipService.ToolTip="{TemplateBinding ToolTip}">
<Grid x:Name="PART_HitTestGrid" Background="Transparent">
<Grid
x:Name="PART_RootGrid"
MinWidth="32"
@@ -112,7 +109,7 @@
<TextBlock
x:Name="SubtitleText"
MaxWidth="100"
Margin="0,-4,0,0"
Margin="0,-2,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
FontFamily="Segoe UI"

View File

@@ -23,7 +23,7 @@ public sealed partial class DockItemControl : Control
}
public static readonly DependencyProperty ToolTipProperty =
DependencyProperty.Register(nameof(ToolTip), typeof(string), typeof(DockItemControl), new PropertyMetadata(null));
DependencyProperty.Register(nameof(ToolTip), typeof(string), typeof(DockItemControl), new PropertyMetadata(null, OnToolTipPropertyChanged));
public string ToolTip
{
@@ -31,6 +31,17 @@ public sealed partial class DockItemControl : Control
set => SetValue(ToolTipProperty, value);
}
private static void OnToolTipPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
if (d is DockItemControl control)
{
// Collapse the tooltip when the string is null or empty so an
// empty tooltip bubble doesn't appear on hover.
var text = e.NewValue as string;
ToolTipService.SetToolTip(control, string.IsNullOrEmpty(text) ? null : text);
}
}
public static readonly DependencyProperty TitleProperty =
DependencyProperty.Register(nameof(Title), typeof(string), typeof(DockItemControl), new PropertyMetadata(null, OnTextPropertyChanged));

View File

@@ -25,24 +25,13 @@ internal static class DockSettingsToViews
{
return size switch
{
DockSize.Small => 32,
DockSize.Small => 38,
DockSize.Medium => 54,
DockSize.Large => 76,
_ => throw new NotImplementedException(),
};
}
public static double IconSizeForSize(DockSize size)
{
return size switch
{
DockSize.Small => 32 / 2,
DockSize.Medium => 54 / 2,
DockSize.Large => 76 / 2,
_ => throw new NotImplementedException(),
};
}
public static Microsoft.UI.Xaml.Media.SystemBackdrop? GetSystemBackdrop(DockBackdrop backdrop)
{
return backdrop switch

View File

@@ -21,7 +21,7 @@
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="1">
<Grid Padding="16">
<Grid Padding="16,0,16,16">
<StackPanel
MaxWidth="1000"
HorizontalAlignment="Stretch"
@@ -37,6 +37,12 @@
<RepositionThemeTransition IsStaggeringEnabled="False" />
</StackPanel.ChildrenTransitions>-->
<HyperlinkButton
x:Uid="CmdPalDock_LearnMore"
Margin="0,0,0,36"
Padding="0"
FontWeight="SemiBold"
NavigateUri="https://aka.ms/cmdpal-dock" />
<!-- Enable Dock -->
<controls:SettingsCard x:Uid="Settings_GeneralPage_EnableDock_SettingsCard" HeaderIcon="{ui:FontIcon Glyph=&#xF596;}">
<ToggleSwitch IsOn="{x:Bind ViewModel.EnableDock, Mode=TwoWay}" />

View File

@@ -19,7 +19,7 @@
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="1">
<Grid Padding="16">
<Grid Padding="16,0,16,16">
<StackPanel
MaxWidth="1000"
HorizontalAlignment="Stretch"
@@ -36,6 +36,11 @@
</StackPanel.ChildrenTransitions>-->
<!-- 'Activation' section -->
<HyperlinkButton
x:Uid="CmdPal_LearnMore"
Padding="0"
FontWeight="SemiBold"
NavigateUri="https://aka.ms/cmdpal" />
<TextBlock x:Uid="ActivationSettingsHeader" Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />
<controls:SettingsExpander

View File

@@ -428,7 +428,7 @@ Right-click to remove the key combination, thereby deactivating the shortcut.</v
<data name="Settings_GeneralPage_DisableAnimations_SettingsCard.Description" xml:space="preserve">
<value>Disable animations when switching between pages</value>
</data>
<data name="Settings_GeneralPage_EnableDock_SettingsCard.Header" xml:space="preserve">
<data name="Settings_GeneralPage_EnableDock_SettingsCard.Header" xml:space="preserve">
<value>Enable Dock</value>
</data>
<data name="Settings_GeneralPage_EnableDock_SettingsCard.Description" xml:space="preserve">
@@ -757,23 +757,17 @@ Right-click to remove the key combination, thereby deactivating the shortcut.</v
<data name="Settings_GeneralPage_VersionNo" xml:space="preserve">
<value>Version {0}</value>
</data>
<data name="Settings_NavigationViewItem_DockAppearance.Content" xml:space="preserve">
<value>Dock Appearance</value>
</data>
<data name="Settings_PageTitles_DockAppearancePage" xml:space="preserve">
<value>Dock Appearance</value>
</data>
<data name="DockAppearance_AppTheme_SettingsCard.Header" xml:space="preserve">
<value>Dock theme mode</value>
<value>Theme mode</value>
</data>
<data name="DockAppearance_AppTheme_SettingsCard.Description" xml:space="preserve">
<value>Select which theme to display for the dock</value>
<value>Select which theme to display</value>
</data>
<data name="DockAppearance_Backdrop_SettingsCard.Header" xml:space="preserve">
<value>Material</value>
</data>
<data name="DockAppearance_Backdrop_SettingsCard.Description" xml:space="preserve">
<value>Select the visual material used for the dock</value>
<value>Select the visual material</value>
</data>
<data name="DockAppearance_Backdrop_Mica.Content" xml:space="preserve">
<value>Mica</value>
@@ -882,17 +876,17 @@ Right-click to remove the key combination, thereby deactivating the shortcut.</v
<value>K</value>
<comment>Keyboard key</comment>
</data>
<data name="ConfigureShortcut" xml:space="preserve">
<data name="ConfigureShortcut" xml:space="preserve">
<value>Configure shortcut</value>
</data>
<data name="ConfigureShortcutText.Text" xml:space="preserve">
<value>Assign shortcut</value>
</data>
<data name="DockAppearance_DockPosition_SettingsCard.Header" xml:space="preserve">
<value>Dock position</value>
<value>Position</value>
</data>
<data name="DockAppearance_DockPosition_SettingsExpander.Description" xml:space="preserve">
<value>Choose where the dock appears on your screen</value>
<value>Choose where the Dock appears on your screen</value>
</data>
<data name="DockAppearance_DockPosition_Left.Content" xml:space="preserve">
<value>Left</value>
@@ -906,12 +900,6 @@ Right-click to remove the key combination, thereby deactivating the shortcut.</v
<data name="DockAppearance_DockPosition_Bottom.Content" xml:space="preserve">
<value>Bottom</value>
</data>
<data name="DockAppearance_ShowLabels_CheckBox.Header" xml:space="preserve">
<value>Show labels</value>
</data>
<data name="DockAppearance_ShowLabels_CheckBox.Description" xml:space="preserve">
<value>Show labels for dock items by default</value>
</data>
<data name="top_level_pin_command_name" xml:space="preserve">
<value>Pin to home</value>
<comment>Command name for pinning an item to the top level list of commands</comment>
@@ -921,11 +909,11 @@ Right-click to remove the key combination, thereby deactivating the shortcut.</v
<comment>Command name for unpinning an item from the top level list of commands</comment>
</data>
<data name="dock_pin_command_name" xml:space="preserve">
<value>Pin to dock</value>
<value>Pin to Dock</value>
<comment>Command name for pinning an item to the dock</comment>
</data>
<data name="dock_unpin_command_name" xml:space="preserve">
<value>Unpin from dock</value>
<value>Unpin from Dock</value>
<comment>Command name for unpinning an item from the dock</comment>
</data>
<data name="FiltersDropDown.[using:Microsoft.UI.Xaml.Automation]AutomationProperties.Name" xml:space="preserve">
@@ -949,4 +937,40 @@ Right-click to remove the key combination, thereby deactivating the shortcut.</v
<data name="FiltersDropDown_NoResults.Text" xml:space="preserve">
<value>No results</value>
</data>
<data name="Dock_EditMode_Labels.Text" xml:space="preserve">
<value>Labels</value>
</data>
<data name="Dock_EditMode_ShowTitles.Text" xml:space="preserve">
<value>Show titles</value>
</data>
<data name="Dock_EditMode_ShowSubtitles.Text" xml:space="preserve">
<value>Show subtitles</value>
</data>
<data name="Dock_EditMode_Unpin.Text" xml:space="preserve">
<value>Unpin</value>
</data>
<data name="Dock_AddBand_NoCommandsAvailable.Text" xml:space="preserve">
<value>No commands available to pin</value>
</data>
<data name="Dock_AddBand_StartTooltip.[using:Microsoft.UI.Xaml.Controls]ToolTipService.ToolTip" xml:space="preserve">
<value>Add band to start</value>
</data>
<data name="Dock_AddBand_CenterTooltip.[using:Microsoft.UI.Xaml.Controls]ToolTipService.ToolTip" xml:space="preserve">
<value>Add band to center</value>
</data>
<data name="Dock_AddBand_EndTooltip.[using:Microsoft.UI.Xaml.Controls]ToolTipService.ToolTip" xml:space="preserve">
<value>Add band to end</value>
</data>
<data name="Dock_EditMode_Save.Content" xml:space="preserve">
<value>Save</value>
</data>
<data name="Dock_EditMode_Discard.Content" xml:space="preserve">
<value>Discard</value>
</data>
<data name="CmdPal_LearnMore.Content" xml:space="preserve">
<value>Learn more about Command Palette</value>
</data>
<data name="CmdPalDock_LearnMore.Content" xml:space="preserve">
<value>Learn more about Command Palette Dock</value>
</data>
</root>