From 15cad8ca186a9a048bc23b761b4cace8d3ddf2b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ji=C5=99=C3=AD=20Pol=C3=A1=C5=A1ek?= <me@jiripolasek.com>
Date: Tue, 24 Feb 2026 03:46:09 +0100
Subject: [PATCH] CmdPal: Single-row list items (#45763)

## Summary of the Pull Request

This PR changes default style of list items to a single-row. As a flyby
it also ensures that all item containers have a constant height.

<img width="848" height="509" alt="image"
src="https://github.com/user-attachments/assets/832db0dd-d270-4745-b83a-c8ad2ec12c02"
/>

<img width="828" height="515" alt="image"
src="https://github.com/user-attachments/assets/6596a6ae-9056-4177-bafa-47df7d39ad3e"
/>


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

- [x] Related to: #44407
- [x] Closes: #45091
<!-- - [ ] 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
---
 .../ExtViews/ListPage.xaml                    | 73 ++++++++++++-------
 1 file changed, 48 insertions(+), 25 deletions(-)

diff --git a/src/modules/cmdpal/Microsoft.CmdPal.UI/ExtViews/ListPage.xaml b/src/modules/cmdpal/Microsoft.CmdPal.UI/ExtViews/ListPage.xaml
index 3e25a70ecc..1cea1b8b8c 100644
--- a/src/modules/cmdpal/Microsoft.CmdPal.UI/ExtViews/ListPage.xaml
+++ b/src/modules/cmdpal/Microsoft.CmdPal.UI/ExtViews/ListPage.xaml
@@ -32,9 +32,13 @@
         <x:Double x:Key="MediumGridContainerSize">100</x:Double>
         <x:Double x:Key="GalleryGridSize">160</x:Double>
 
-        <x:Double x:Key="ListViewItemMinHeight">40</x:Double>
-        <x:Double x:Key="ListViewSectionMinHeight">0</x:Double>
-        <x:Double x:Key="ListViewSeparatorMinHeight">0</x:Double>
+        <!--
+            BEAR LOADING: The list view is virtualized and the item container style is set to a fixed height
+            to ensure the virtualization works correctly.
+        -->
+        <x:Double x:Key="SingleRowListViewItemHeight">44</x:Double>
+        <x:Double x:Key="ListViewSectionHeight">28</x:Double>
+        <x:Double x:Key="ListViewSeparatorHeight">28</x:Double>
 
         <Style x:Key="IconGridViewItemStyle" TargetType="GridViewItem">
             <Setter Property="HorizontalContentAlignment" Value="Stretch" />
@@ -172,11 +176,12 @@
             <Setter Property="IsHitTestVisible" Value="False" />
             <Setter Property="IsTabStop" Value="False" />
             <Setter Property="IsHoldingEnabled" Value="False" />
-            <Setter Property="Padding" Value="4,8,12,0" />
+            <Setter Property="Padding" Value="4,0,12,0" />
             <Setter Property="Margin" Value="0" />
             <Setter Property="HorizontalContentAlignment" Value="Stretch" />
             <Setter Property="VerticalContentAlignment" Value="Bottom" />
-            <Setter Property="MinHeight" Value="{StaticResource ListViewSectionMinHeight}" />
+            <Setter Property="MinHeight" Value="{StaticResource ListViewSectionHeight}" />
+            <Setter Property="Height" Value="{StaticResource ListViewSectionHeight}" />
             <Setter Property="cpcontrols:WrapPanel.IsFullLine" Value="True" />
         </Style>
 
@@ -187,11 +192,12 @@
             <Setter Property="IsHitTestVisible" Value="False" />
             <Setter Property="IsTabStop" Value="False" />
             <Setter Property="IsHoldingEnabled" Value="False" />
-            <Setter Property="Padding" Value="4,4,12,4" />
+            <Setter Property="Padding" Value="4,0,12,0" />
             <Setter Property="Margin" Value="0" />
             <Setter Property="HorizontalContentAlignment" Value="Stretch" />
             <Setter Property="VerticalContentAlignment" Value="Center" />
-            <Setter Property="MinHeight" Value="{StaticResource ListViewSeparatorMinHeight}" />
+            <Setter Property="MinHeight" Value="{StaticResource ListViewSeparatorHeight}" />
+            <Setter Property="Height" Value="{StaticResource ListViewSeparatorHeight}" />
             <Setter Property="cpcontrols:WrapPanel.IsFullLine" Value="True" />
         </Style>
 
@@ -199,7 +205,8 @@
             x:Key="ListDefaultContainerStyle"
             BasedOn="{StaticResource DefaultListViewItemStyle}"
             TargetType="ListViewItem">
-            <Setter Property="MinHeight" Value="{StaticResource ListViewItemMinHeight}" />
+            <Setter Property="MinHeight" Value="{StaticResource SingleRowListViewItemHeight}" />
+            <Setter Property="Height" Value="{StaticResource SingleRowListViewItemHeight}" />
         </Style>
 
         <Style
@@ -213,10 +220,11 @@
             <Setter Property="IsTabStop" Value="False" />
             <Setter Property="IsHoldingEnabled" Value="False" />
             <Setter Property="AllowDrop" Value="False" />
-            <Setter Property="Padding" Value="16,8,12,0" />
+            <Setter Property="Padding" Value="16,0,12,0" />
             <Setter Property="HorizontalContentAlignment" Value="Stretch" />
             <Setter Property="VerticalContentAlignment" Value="Bottom" />
-            <Setter Property="MinHeight" Value="{StaticResource ListViewSectionMinHeight}" />
+            <Setter Property="MinHeight" Value="{StaticResource ListViewSectionHeight}" />
+            <Setter Property="Height" Value="{StaticResource ListViewSectionHeight}" />
         </Style>
 
         <Style
@@ -230,10 +238,11 @@
             <Setter Property="IsTabStop" Value="False" />
             <Setter Property="IsHoldingEnabled" Value="False" />
             <Setter Property="AllowDrop" Value="False" />
-            <Setter Property="Padding" Value="16,4,12,4" />
+            <Setter Property="Padding" Value="16,0,12,0" />
             <Setter Property="HorizontalContentAlignment" Value="Stretch" />
             <Setter Property="VerticalContentAlignment" Value="Center" />
-            <Setter Property="MinHeight" Value="{StaticResource ListViewSeparatorMinHeight}" />
+            <Setter Property="MinHeight" Value="{StaticResource ListViewSeparatorHeight}" />
+            <Setter Property="Height" Value="{StaticResource ListViewSeparatorHeight}" />
         </Style>
 
         <DataTemplate x:Key="TagTemplate" x:DataType="viewModels:TagViewModel">
@@ -250,7 +259,7 @@
         <cmdpalUI:ListItemTemplateSelector
             x:Key="ListItemTemplateSelector"
             x:DataType="viewModels:ListItemViewModel"
-            ListItem="{StaticResource ListItemViewModelTemplate}"
+            ListItem="{StaticResource ListItemSingleRowViewModelTemplate}"
             Section="{StaticResource ListSectionViewModelTemplate}"
             Separator="{StaticResource ListSeparatorViewModelTemplate}" />
 
@@ -279,12 +288,8 @@
             Separator="{StaticResource GridViewSeparatorItemStyle}"
             Small="{StaticResource IconGridViewItemStyle}" />
 
-        <!--  https://learn.microsoft.com/windows/apps/design/controls/itemsview#specify-the-look-of-the-items  -->
-        <DataTemplate x:Key="ListItemViewModelTemplate" x:DataType="viewModels:ListItemViewModel">
-            <Grid
-                Padding="0,12,0,12"
-                AutomationProperties.Name="{x:Bind Title, Mode=OneWay}"
-                ColumnSpacing="12">
+        <DataTemplate x:Key="ListItemSingleRowViewModelTemplate" x:DataType="viewModels:ListItemViewModel">
+            <Grid AutomationProperties.Name="{x:Bind Title, Mode=OneWay}" ColumnSpacing="12">
                 <Grid.ColumnDefinitions>
                     <ColumnDefinition Width="28" />
                     <ColumnDefinition Width="*" />
@@ -296,36 +301,54 @@
                     Grid.Column="0"
                     Width="20"
                     Height="20"
-                    Margin="4,0,4,0"
                     AutomationProperties.AccessibilityView="Raw"
                     Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                     SourceKey="{x:Bind Icon, Mode=OneWay}"
                     SourceRequested="{x:Bind help:IconCacheProvider.SourceRequested20}" />
 
-                <StackPanel
+                <!--
+                    Title and subtitle are intentionally in a nested Grid instead in the outer container,
+                    to avoid pushing the following element (tags) out of bounds.
+                -->
+                <Grid
                     Grid.Column="1"
                     VerticalAlignment="Center"
-                    Orientation="Vertical"
-                    Spacing="1">
+                    ColumnSpacing="12">
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="Auto" />
+                        <ColumnDefinition Width="*" />
+                    </Grid.ColumnDefinitions>
+
                     <TextBlock
+                        Grid.Column="0"
                         VerticalAlignment="Center"
                         CharacterSpacing="12"
                         FontSize="14"
+                        MaxLines="1"
+                        Style="{StaticResource CaptionTextBlockStyle}"
                         Text="{x:Bind Title, Mode=OneWay}"
                         TextTrimming="CharacterEllipsis"
                         TextWrapping="NoWrap" />
+
                     <TextBlock
+                        Grid.Column="1"
                         VerticalAlignment="Center"
+                        CharacterSpacing="12"
+                        FontSize="14"
                         Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                        MaxLines="1"
                         Style="{StaticResource CaptionTextBlockStyle}"
                         Text="{x:Bind Subtitle, Mode=OneWay}"
                         TextTrimming="CharacterEllipsis"
                         TextWrapping="NoWrap"
                         Visibility="{x:Bind ShowSubtitle, Mode=OneWay}" />
-                </StackPanel>
+                </Grid>
 
+                <!--
+                    8px right margin is added to visually match the spacing between then icon,
+                    and the left margin of the list, as there's
+                -->
                 <ItemsControl
-                    Grid.RowSpan="2"
                     Grid.Column="2"
                     Margin="0,0,8,0"
                     VerticalAlignment="Center"