CmdPal: Improve readability and a11y of sections (#44556)

## Summary of the Pull Request

This PR improves visuals and a11y of sections:
- Changes section title color from disabled to secondary text fill.
- Removes separator line if the text is present and indents
- Changes gallery grid subtitle color from tertiary to secondary text
fill.

## Pictures? Pictures!

<img width="850" height="718" alt="image"
src="https://github.com/user-attachments/assets/2e0bffa2-045f-48d9-bff5-dcc561395c6a"
/>

<img width="850" height="773" alt="image"
src="https://github.com/user-attachments/assets/69081472-7f4b-489a-b0e5-5778894fef97"
/>

<img width="850" height="773" alt="image"
src="https://github.com/user-attachments/assets/aa3f0e73-def8-45cb-9f9a-6e9d7e0e6137"
/>

<img width="850" height="773" alt="image"
src="https://github.com/user-attachments/assets/cb8f6bdf-9288-4b6e-b8b8-94f8c83e3ffc"
/>



<!-- 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

src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/WrapPanelCustom/WrapPanel.cs

@@ -99,8 +99,6 @@ public sealed partial class WrapPanel : Panel
         set { SetValue(HorizontalSpacingProperty, value); }
     }
 
-    private bool IsSectionItem(UIElement element) => element is FrameworkElement fe && fe.DataContext is ListItemViewModel item && item.IsSectionOrSeparator;
-
     /// <summary>
     /// Identifies the <see cref="HorizontalSpacing"/> dependency property.
     /// </summary>
@@ -350,7 +348,7 @@ public sealed partial class WrapPanel : Panel
                 return;
             }
 
-            var isFullLine = IsSectionItem(child);
+            var isFullLine = GetIsFullLine(child);
             var desiredMeasure = new UvMeasure(Orientation, child.DesiredSize);
 
             if (isFullLine)

src/modules/cmdpal/Microsoft.CmdPal.UI/Converters/GridItemContainerStyleSelector.cs

@@ -18,8 +18,19 @@ internal sealed partial class GridItemContainerStyleSelector : StyleSelector
 
     public Style? Gallery { get; set; }
 
+    public Style? Section { get; set; }
+
+    public Style? Separator { get; set; }
+
     protected override Style? SelectStyleCore(object item, DependencyObject container)
     {
+        if (item is ListItemViewModel { IsSectionOrSeparator: true } listItem)
+        {
+            return string.IsNullOrWhiteSpace(listItem.Title)
+                ? Separator!
+                : Section;
+        }
+
         return GridProperties switch
         {
             SmallGridPropertiesViewModel => Small,

src/modules/cmdpal/Microsoft.CmdPal.UI/Converters/ListItemContainerStyleSelector.cs

@@ -0,0 +1,28 @@
+// 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.CmdPal.Core.ViewModels;
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+
+namespace Microsoft.CmdPal.UI;
+
+internal sealed partial class ListItemContainerStyleSelector : StyleSelector
+{
+    public Style? Default { get; set; }
+
+    public Style? Section { get; set; }
+
+    public Style? Separator { get; set; }
+
+    protected override Style? SelectStyleCore(object item, DependencyObject container)
+    {
+        return item switch
+        {
+            ListItemViewModel { IsSectionOrSeparator: true } listItemViewModel when string.IsNullOrWhiteSpace(listItemViewModel.Title) => Separator!,
+            ListItemViewModel { IsSectionOrSeparator: true } => Section,
+            _ => Default,
+        };
+    }
+}

src/modules/cmdpal/Microsoft.CmdPal.UI/ExtViews/ListPage.xaml

@@ -27,6 +27,10 @@
         <CornerRadius x:Key="SmallGridViewItemCornerRadius">8</CornerRadius>
         <CornerRadius x:Key="MediumGridViewItemCornerRadius">8</CornerRadius>
 
+        <x:Double x:Key="ListViewItemMinHeight">40</x:Double>
+        <x:Double x:Key="ListViewSectionMinHeight">0</x:Double>
+        <x:Double x:Key="ListViewSeparatorMinHeight">0</x:Double>
+
         <Style x:Key="IconGridViewItemStyle" TargetType="GridViewItem">
             <Setter Property="HorizontalContentAlignment" Value="Stretch" />
             <Setter Property="VerticalContentAlignment" Value="Center" />
@@ -94,6 +98,7 @@
         <Style x:Key="GalleryGridViewItemStyle" TargetType="GridViewItem">
             <Setter Property="HorizontalContentAlignment" Value="Stretch" />
             <Setter Property="VerticalContentAlignment" Value="Center" />
+            <Setter Property="Margin" Value="0" />
             <Setter Property="Template">
                 <Setter.Value>
                     <ControlTemplate TargetType="GridViewItem">
@@ -155,6 +160,70 @@
             </Setter>
         </Style>
 
+        <Style
+            x:Key="GridViewSectionItemStyle"
+            BasedOn="{StaticResource DefaultGridViewItemStyle}"
+            TargetType="GridViewItem">
+            <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="Margin" Value="0" />
+            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+            <Setter Property="VerticalContentAlignment" Value="Bottom" />
+            <Setter Property="MinHeight" Value="{StaticResource ListViewSectionMinHeight}" />
+            <Setter Property="cpcontrols:WrapPanel.IsFullLine" Value="True" />
+        </Style>
+
+        <Style
+            x:Key="GridViewSeparatorItemStyle"
+            BasedOn="{StaticResource DefaultGridViewItemStyle}"
+            TargetType="GridViewItem">
+            <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="Margin" Value="0" />
+            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+            <Setter Property="VerticalContentAlignment" Value="Center" />
+            <Setter Property="MinHeight" Value="{StaticResource ListViewSeparatorMinHeight}" />
+            <Setter Property="cpcontrols:WrapPanel.IsFullLine" Value="True" />
+        </Style>
+
+        <Style
+            x:Key="ListDefaultContainerStyle"
+            BasedOn="{StaticResource DefaultListViewItemStyle}"
+            TargetType="ListViewItem">
+            <Setter Property="MinHeight" Value="{StaticResource ListViewItemMinHeight}" />
+        </Style>
+
+        <Style
+            x:Key="ListSectionContainerStyle"
+            BasedOn="{StaticResource DefaultListViewItemStyle}"
+            TargetType="ListViewItem">
+            <Setter Property="IsHitTestVisible" Value="False" />
+            <Setter Property="IsTabStop" Value="False" />
+            <Setter Property="IsHoldingEnabled" Value="False" />
+            <Setter Property="Padding" Value="16,8,12,0" />
+            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+            <Setter Property="VerticalContentAlignment" Value="Bottom" />
+            <Setter Property="MinHeight" Value="{StaticResource ListViewSectionMinHeight}" />
+            <Setter Property="AllowDrop" Value="False" />
+        </Style>
+
+        <Style
+            x:Key="ListSeparatorContainerStyle"
+            BasedOn="{StaticResource DefaultListViewItemStyle}"
+            TargetType="ListViewItem">
+            <Setter Property="IsHitTestVisible" Value="False" />
+            <Setter Property="IsTabStop" Value="False" />
+            <Setter Property="IsHoldingEnabled" Value="False" />
+            <Setter Property="Padding" Value="16,4,12,4" />
+            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+            <Setter Property="VerticalContentAlignment" Value="Center" />
+            <Setter Property="MinHeight" Value="{StaticResource ListViewSeparatorMinHeight}" />
+        </Style>
+
         <DataTemplate x:Key="TagTemplate" x:DataType="coreViewModels:TagViewModel">
             <cpcontrols:Tag
                 AutomationProperties.Name="{x:Bind Text, Mode=OneWay}"
@@ -166,16 +235,6 @@
                 ToolTipService.ToolTip="{x:Bind ToolTip, Mode=OneWay}" />
         </DataTemplate>
 
-        <cmdpalUI:GridItemTemplateSelector
-            x:Key="GridItemTemplateSelector"
-            x:DataType="coreViewModels:ListItemViewModel"
-            Gallery="{StaticResource GalleryGridItemViewModelTemplate}"
-            GridProperties="{x:Bind ViewModel.GridProperties, Mode=OneWay}"
-            Medium="{StaticResource MediumGridItemViewModelTemplate}"
-            Section="{StaticResource ListSectionViewModelTemplate}"
-            Separator="{StaticResource ListSeparatorViewModelTemplate}"
-            Small="{StaticResource SmallGridItemViewModelTemplate}" />
-
         <cmdpalUI:ListItemTemplateSelector
             x:Key="ListItemTemplateSelector"
             x:DataType="coreViewModels:ListItemViewModel"
@@ -183,11 +242,29 @@
             Section="{StaticResource ListSectionViewModelTemplate}"
             Separator="{StaticResource ListSeparatorViewModelTemplate}" />
 
+        <cmdpalUI:ListItemContainerStyleSelector
+            x:Key="ListItemContainerStyleSelector"
+            Default="{StaticResource ListDefaultContainerStyle}"
+            Section="{StaticResource ListSectionContainerStyle}"
+            Separator="{StaticResource ListSeparatorContainerStyle}" />
+
+        <cmdpalUI:GridItemTemplateSelector
+            x:Key="GridItemTemplateSelector"
+            x:DataType="coreViewModels:ListItemViewModel"
+            Gallery="{StaticResource GalleryGridItemViewModelTemplate}"
+            GridProperties="{x:Bind ViewModel.GridProperties, Mode=OneWay}"
+            Medium="{StaticResource MediumGridItemViewModelTemplate}"
+            Section="{StaticResource ListSectionViewModelTemplate}"
+            Separator="{StaticResource GridSeparatorViewModelTemplate}"
+            Small="{StaticResource SmallGridItemViewModelTemplate}" />
+
         <cmdpalUI:GridItemContainerStyleSelector
             x:Key="GridItemContainerStyleSelector"
             Gallery="{StaticResource GalleryGridViewItemStyle}"
             GridProperties="{x:Bind ViewModel.GridProperties, Mode=OneWay}"
             Medium="{StaticResource IconGridViewItemStyle}"
+            Section="{StaticResource GridViewSectionItemStyle}"
+            Separator="{StaticResource GridViewSeparatorItemStyle}"
             Small="{StaticResource IconGridViewItemStyle}" />
 
         <!--  https://learn.microsoft.com/windows/apps/design/controls/itemsview#specify-the-look-of-the-items  -->
@@ -255,21 +332,21 @@
         </DataTemplate>
 
         <DataTemplate x:Key="ListSeparatorViewModelTemplate" x:DataType="coreViewModels:ListItemViewModel">
-            <Grid>
+            <Grid ColumnSpacing="12">
                 <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="28" />
                     <ColumnDefinition Width="*" />
                 </Grid.ColumnDefinitions>
                 <Rectangle
                     Grid.Column="1"
                     Height="1"
-                    Margin="0,2,0,2"
                     Fill="{ThemeResource DividerStrokeColorDefaultBrush}" />
             </Grid>
         </DataTemplate>
 
         <DataTemplate x:Key="ListSectionViewModelTemplate" x:DataType="coreViewModels:ListItemViewModel">
             <Grid
-                Margin="0"
+                Margin="0,8,0,0"
                 VerticalAlignment="Center"
                 cpcontrols:WrapPanel.IsFullLine="True"
                 ColumnSpacing="8"
@@ -281,13 +358,9 @@
                 </Grid.ColumnDefinitions>
                 <TextBlock
                     Grid.Column="0"
-                    Foreground="{ThemeResource TextFillColorDisabled}"
+                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                     Style="{ThemeResource CaptionTextBlockStyle}"
                     Text="{x:Bind Section}" />
-                <Rectangle
-                    Grid.Column="1"
-                    Height="1"
-                    Fill="{ThemeResource DividerStrokeColorDefaultBrush}" />
             </Grid>
         </DataTemplate>
 
@@ -414,7 +487,7 @@
                         VerticalAlignment="Center"
                         CharacterSpacing="11"
                         FontSize="11"
-                        Foreground="{ThemeResource TextFillColorTertiary}"
+                        Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                         Text="{x:Bind Subtitle, Mode=OneWay}"
                         TextAlignment="Center"
                         TextTrimming="WordEllipsis"
@@ -423,6 +496,10 @@
                 </StackPanel>
             </StackPanel>
         </DataTemplate>
+
+        <DataTemplate x:Key="GridSeparatorViewModelTemplate" x:DataType="coreViewModels:ListItemViewModel">
+            <Rectangle Height="1" Fill="{ThemeResource DividerStrokeColorDefaultBrush}" />
+        </DataTemplate>
     </Page.Resources>
 
     <Grid>
@@ -448,6 +525,7 @@
                             IsDoubleTapEnabled="True"
                             IsItemClickEnabled="True"
                             ItemClick="Items_ItemClick"
+                            ItemContainerStyleSelector="{StaticResource ListItemContainerStyleSelector}"
                             ItemTemplateSelector="{StaticResource ListItemTemplateSelector}"
                             ItemsSource="{x:Bind ViewModel.FilteredItems, Mode=OneWay}"
                             RightTapped="Items_RightTapped"
@@ -460,7 +538,7 @@
                     <controls:Case Value="True">
                         <GridView
                             x:Name="ItemsGrid"
-                            Padding="16,0"
+                            Padding="16,16"
                             CanDragItems="True"
                             ContextCanceled="Items_OnContextCanceled"
                             ContextRequested="Items_OnContextRequested"

src/modules/cmdpal/ext/SamplePagesExtension/Pages/SectionsPages/SectionsIndexPage.cs

@@ -35,6 +35,10 @@ internal sealed partial class SectionsIndexPage : ListPage
                {
                    Title = "A Gallery grid page with sections",
                },
+               new ListItem(new SampleListPageWithSections(new GalleryGridLayout() { ShowTitle = false, ShowSubtitle = false }))
+               {
+                   Title = "A Gallery grid page without labels with sections",
+               },
             ];
     }
 }