From d48338bad32f87483227efe7cd48938364a5f6f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ji=C5=99=C3=AD=20Pol=C3=A1=C5=A1ek?= Date: Thu, 8 Jan 2026 21:23:38 +0100 Subject: [PATCH] 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! image image image image ## PR Checklist - [ ] Closes: #xxx - [ ] **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 ## Detailed Description of the Pull Request / Additional comments ## Validation Steps Performed --- .../Controls/WrapPanelCustom/WrapPanel.cs | 4 +- .../GridItemContainerStyleSelector.cs | 11 ++ .../ListItemContainerStyleSelector.cs | 28 +++++ .../ExtViews/ListPage.xaml | 118 +++++++++++++++--- .../Pages/SectionsPages/SectionsIndexPage.cs | 4 + 5 files changed, 142 insertions(+), 23 deletions(-) create mode 100644 src/modules/cmdpal/Microsoft.CmdPal.UI/Converters/ListItemContainerStyleSelector.cs diff --git a/src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/WrapPanelCustom/WrapPanel.cs b/src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/WrapPanelCustom/WrapPanel.cs index 61fa42202e..24aa437f18 100644 --- a/src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/WrapPanelCustom/WrapPanel.cs +++ b/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; - /// /// Identifies the dependency property. /// @@ -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) diff --git a/src/modules/cmdpal/Microsoft.CmdPal.UI/Converters/GridItemContainerStyleSelector.cs b/src/modules/cmdpal/Microsoft.CmdPal.UI/Converters/GridItemContainerStyleSelector.cs index 5d45592ef1..ae585e7f11 100644 --- a/src/modules/cmdpal/Microsoft.CmdPal.UI/Converters/GridItemContainerStyleSelector.cs +++ b/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, diff --git a/src/modules/cmdpal/Microsoft.CmdPal.UI/Converters/ListItemContainerStyleSelector.cs b/src/modules/cmdpal/Microsoft.CmdPal.UI/Converters/ListItemContainerStyleSelector.cs new file mode 100644 index 0000000000..45a785c2b4 --- /dev/null +++ b/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, + }; + } +} diff --git a/src/modules/cmdpal/Microsoft.CmdPal.UI/ExtViews/ListPage.xaml b/src/modules/cmdpal/Microsoft.CmdPal.UI/ExtViews/ListPage.xaml index d18896af12..c0edf83390 100644 --- a/src/modules/cmdpal/Microsoft.CmdPal.UI/ExtViews/ListPage.xaml +++ b/src/modules/cmdpal/Microsoft.CmdPal.UI/ExtViews/ListPage.xaml @@ -27,6 +27,10 @@ 8 8 + 40 + 0 + 0 + + + + + + + + + + + - - + + + + @@ -255,21 +332,21 @@ - + + - @@ -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 @@ + + + + @@ -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 @@