Dock: dock visual nits and bits (#45873)

## Summary of the Pull Request

- Improves vertical (left/right) dock layout:
  - Dock items are not clipped;
  - Items with label(s) are stretched to full width;
  - Items without label(s) are centered.
- Top button is in the absolute corner to make clicking to it easier.
- Dock items now have a min width and height 32px.
- Removes a duplicate "No background" label in the expander body on the
Dock settings page.

## Pictures? Pictures!
Vertical layout:
<img width="175" height="1439" alt="image"
src="https://github.com/user-attachments/assets/4f11d9e9-405f-4d9a-8dee-4c8912b88c7c"
/>

Horizontal layout:
<img width="5119" height="49" alt="image"
src="https://github.com/user-attachments/assets/8420ef26-575e-4427-8db8-f9793e3b3572"
/>



<!-- 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:
Jiří Polášek
2026-03-01 20:06:42 +01:00
committed by GitHub
parent 637b58b136
commit cc3c3c0367
5 changed files with 15 additions and 15 deletions

View File

@@ -141,10 +141,10 @@
Grid.Column="1"> Grid.Column="1">
<ScrollViewer <ScrollViewer
x:Name="scroller" x:Name="scroller"
HorizontalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Disabled"
HorizontalScrollMode="Enabled" HorizontalScrollMode="Enabled"
SizeChanged="Scroller_SizeChanged" SizeChanged="Scroller_SizeChanged"
VerticalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Disabled"
VerticalScrollMode="Disabled" VerticalScrollMode="Disabled"
ViewChanging="Scroller_ViewChanging"> ViewChanging="Scroller_ViewChanging">
<Grid x:Name="ContentGrid"> <Grid x:Name="ContentGrid">
@@ -188,9 +188,9 @@
<VisualStateGroup x:Name="OrientationStates"> <VisualStateGroup x:Name="OrientationStates">
<VisualState x:Name="HorizontalState"> <VisualState x:Name="HorizontalState">
<VisualState.Setters> <VisualState.Setters>
<Setter Target="scroller.HorizontalScrollBarVisibility" Value="Hidden" /> <Setter Target="scroller.HorizontalScrollBarVisibility" Value="Disabled" />
<Setter Target="scroller.HorizontalScrollMode" Value="Enabled" /> <Setter Target="scroller.HorizontalScrollMode" Value="Enabled" />
<Setter Target="scroller.VerticalScrollBarVisibility" Value="Hidden" /> <Setter Target="scroller.VerticalScrollBarVisibility" Value="Disabled" />
<Setter Target="scroller.VerticalScrollMode" Value="Disabled" /> <Setter Target="scroller.VerticalScrollMode" Value="Disabled" />
<Setter Target="ScrollBackBtn.Padding" Value="4,12,4,12" /> <Setter Target="ScrollBackBtn.Padding" Value="4,12,4,12" />
<Setter Target="ScrollBackBtn.Margin" Value="8,0,0,0" /> <Setter Target="ScrollBackBtn.Margin" Value="8,0,0,0" />
@@ -210,9 +210,9 @@
</VisualState> </VisualState>
<VisualState x:Name="VerticalState"> <VisualState x:Name="VerticalState">
<VisualState.Setters> <VisualState.Setters>
<Setter Target="scroller.HorizontalScrollBarVisibility" Value="Hidden" /> <Setter Target="scroller.HorizontalScrollBarVisibility" Value="Disabled" />
<Setter Target="scroller.HorizontalScrollMode" Value="Disabled" /> <Setter Target="scroller.HorizontalScrollMode" Value="Disabled" />
<Setter Target="scroller.VerticalScrollBarVisibility" Value="Hidden" /> <Setter Target="scroller.VerticalScrollBarVisibility" Value="Disabled" />
<Setter Target="scroller.VerticalScrollMode" Value="Enabled" /> <Setter Target="scroller.VerticalScrollMode" Value="Enabled" />
<Setter Target="ScrollBackBtn.Padding" Value="12,4,12,4" /> <Setter Target="ScrollBackBtn.Padding" Value="12,4,12,4" />
<Setter Target="ScrollBackBtn.Margin" Value="0,8,0,0" /> <Setter Target="ScrollBackBtn.Margin" Value="0,8,0,0" />

View File

@@ -386,8 +386,8 @@
<Setter Target="EndScroller.(Grid.ColumnSpan)" Value="3" /> <Setter Target="EndScroller.(Grid.ColumnSpan)" Value="3" />
<Setter Target="EndScroller.HorizontalAlignment" Value="Stretch" /> <Setter Target="EndScroller.HorizontalAlignment" Value="Stretch" />
<Setter Target="EndScroller.VerticalAlignment" Value="Bottom" /> <Setter Target="EndScroller.VerticalAlignment" Value="Bottom" />
<Setter Target="ContentGrid.Margin" Value="0,4,4,4" /> <Setter Target="ContentGrid.Margin" Value="0,0,4,4" />
<Setter Target="ContentGrid.Padding" Value="0,8,4,8" /> <Setter Target="ContentGrid.Padding" Value="0,0,4,8" />
<Setter Target="RootGrid.BorderThickness" Value="0,0,1,0" /> <Setter Target="RootGrid.BorderThickness" Value="0,0,1,0" />
<Setter Target="StartListView.ItemsPanel" Value="{StaticResource VerticalItemsPanel}" /> <Setter Target="StartListView.ItemsPanel" Value="{StaticResource VerticalItemsPanel}" />
@@ -425,8 +425,8 @@
<Setter Target="EndScroller.(Grid.ColumnSpan)" Value="3" /> <Setter Target="EndScroller.(Grid.ColumnSpan)" Value="3" />
<Setter Target="EndScroller.HorizontalAlignment" Value="Stretch" /> <Setter Target="EndScroller.HorizontalAlignment" Value="Stretch" />
<Setter Target="EndScroller.VerticalAlignment" Value="Bottom" /> <Setter Target="EndScroller.VerticalAlignment" Value="Bottom" />
<Setter Target="ContentGrid.Margin" Value="4,4,0,4" /> <Setter Target="ContentGrid.Margin" Value="4,0,0,4" />
<Setter Target="ContentGrid.Padding" Value="4,8,0,8" /> <Setter Target="ContentGrid.Padding" Value="4,0,0,8" />
<Setter Target="RootGrid.BorderThickness" Value="1,0,0,0" /> <Setter Target="RootGrid.BorderThickness" Value="1,0,0,0" />
<Setter Target="StartListView.ItemsPanel" Value="{StaticResource VerticalItemsPanel}" /> <Setter Target="StartListView.ItemsPanel" Value="{StaticResource VerticalItemsPanel}" />

View File

@@ -66,6 +66,8 @@
ToolTipService.ToolTip="{TemplateBinding ToolTip}"> ToolTipService.ToolTip="{TemplateBinding ToolTip}">
<Grid <Grid
x:Name="PART_RootGrid" x:Name="PART_RootGrid"
MinWidth="32"
MinHeight="30"
Margin="{TemplateBinding InnerMargin}" Margin="{TemplateBinding InnerMargin}"
Padding="{TemplateBinding Padding}" Padding="{TemplateBinding Padding}"
VerticalAlignment="Stretch" VerticalAlignment="Stretch"
@@ -80,7 +82,7 @@
ColumnSpacing="8"> ColumnSpacing="8">
<Grid.ColumnDefinitions> <Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" /> <ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" />
</Grid.ColumnDefinitions> </Grid.ColumnDefinitions>
<!-- Icon --> <!-- Icon -->
@@ -164,6 +166,7 @@
<VisualState x:Name="TextHidden"> <VisualState x:Name="TextHidden">
<VisualState.Setters> <VisualState.Setters>
<Setter Target="ContentGrid.ColumnSpacing" Value="0" /> <Setter Target="ContentGrid.ColumnSpacing" Value="0" />
<Setter Target="ContentGrid.HorizontalAlignment" Value="Center" />
<Setter Target="TextPanel.Visibility" Value="Collapsed" /> <Setter Target="TextPanel.Visibility" Value="Collapsed" />
</VisualState.Setters> </VisualState.Setters>
</VisualState> </VisualState>

View File

@@ -170,7 +170,7 @@ public sealed partial class DockItemControl : Control
} }
} }
HorizontalAlignment = HorizontalAlignment.Center; HorizontalAlignment = HorizontalAlignment.Stretch;
} }
private void UpdateAllVisibility() private void UpdateAllVisibility()

View File

@@ -796,9 +796,6 @@ Right-click to remove the key combination, thereby deactivating the shortcut.</v
<data name="DockAppearance_ColorizationMode.Header" xml:space="preserve"> <data name="DockAppearance_ColorizationMode.Header" xml:space="preserve">
<value>Colorization mode</value> <value>Colorization mode</value>
</data> </data>
<data name="DockAppearance_NoBackground_SettingsCard.Header" xml:space="preserve">
<value>No background</value>
</data>
<data name="DockAppearance_NoBackground_DescriptionTextBlock.Text" xml:space="preserve"> <data name="DockAppearance_NoBackground_DescriptionTextBlock.Text" xml:space="preserve">
<value>No settings</value> <value>No settings</value>
</data> </data>