[UX] New dashboard & refactored KeyVisual #40214

niels9001 · 2025-06-24T14:48:51Z

Summary of the Pull Request

New dashboard UX

Dashboard.mp4

Update available:

No update available:

Updated `KeyVisual` and `Shortcut` control

Refactoring KeyVisual to remove redundant properties and UI elements, and using Styles for better customization.
Shortcut control now shows a "Configure shortcut" label when there's no shortcut configured.

Other changes

Consolidated converters that were used across pages in App.xaml.cs with consistent naming.
Renamed templated controls (from .cs to .xaml.cs) and moving those to the Controls root folder vs. individual folders for a better overview.

PR Checklist

Detailed Description of the Pull Request / Additional comments

Validation Steps Performed

Eliminated the DashboardModuleKBMItem, its template, and associated logic from the dashboard. This simplifies the DashboardViewModel and DashboardPage.xaml by removing the display and dynamic updating of Keyboard Manager remappings.

… be reused

crutkas · 2025-07-08T03:30:58Z

/azp run

azure-pipelines · 2025-07-08T03:31:08Z

Azure Pipelines successfully started running 1 pipeline(s).

… to describe opening something per guidelines

Jaylyn-Barbee · 2025-07-17T19:09:38Z

There is one last a11y issue that will be fixed when this is merged and we update CommunityToolkit/Windows#702

src/settings-ui/Settings.UI/SettingsXAML/Controls/KeyVisual.xaml.cs

src/settings-ui/Settings.UI/SettingsXAML/Controls/Dashboard/ShortcutConflictControl.xaml

src/settings-ui/Settings.UI/SettingsXAML/Controls/Dashboard/ShortcutConflictControl.xaml.cs

src/settings-ui/Settings.UI/SettingsXAML/Controls/SettingsPageControl/SettingsPageControl.xaml

src/settings-ui/Settings.UI/SettingsXAML/Controls/KeyVisual.xaml.cs

src/settings-ui/Settings.UI/SettingsXAML/Flyout/AppsListPage.xaml

src/settings-ui/Settings.UI/SettingsXAML/Views/DashboardPage.xaml.cs

DHowett · 2025-07-30T22:07:28Z

src/settings-ui/Settings.UI/SettingsXAML/Views/MouseUtilsPage.xaml

                        IsOpen="True"
                        Severity="Informational"
-                        Visibility="{x:Bind ViewModel.IsAnimationEnabledBySystem, Mode=OneWay, Converter={StaticResource BoolToInvertedVisibilityConverter}}">
+                        Visibility="{x:Bind ViewModel.IsAnimationEnabledBySystem, Mode=OneWay, Converter={StaticResource BoolToReverseVisibilityConverter}}">


Good catch. Same question on review.

src/settings-ui/Settings.UI/SettingsXAML/Controls/KeyVisual.xaml.cs

We had 2 issues with the refactoring of KeyVisual that happened in #40214: - We had little control over the pixel perfection of the Windows + text + glyph KeyVisual templates, which resulted into subpar vertical alignments. - When changing theme, the Windows key foreground brush was not updating. With this PR - a new control with dedicated templates is introduced; this allows us to have full control over the individual templates, and doing all of the styling in XAML vs in C#. - I've removed setting the accessible names because those should be set on the parent container, as Narrator is supposed to announce these shortcuts in its totality vs individual keys. - A new property `RenderKeyAsGlyph` has been introduced to render a key as an icon (to save space in certain scenarios) or to show the full text (default) <img width="133" height="147" alt="image" src="https://github.com/user-attachments/assets/66a342da-fdcf-4c97-80b6-93b9955ebdd3" /> <img width="242" height="58" alt="image" src="https://github.com/user-attachments/assets/0b41cfee-8a7d-409a-83b4-72d13e0b131c" />

Copilot

Pull Request Overview

This PR introduces a new dashboard UX design and refactors the KeyVisual component for better customization. The changes focus on improving the user experience by replacing the old module layout with an organized dashboard featuring separate sections for quick access actions and shortcuts overview, while also updating the KeyVisual control to use a more flexible style-based approach.

New dashboard UX with organized sections for actions and shortcuts
Refactored KeyVisual component to remove redundant properties and enable style-based customization
Consolidated converters and updated resource references for consistency

Reviewed Changes

Copilot reviewed 36 out of 43 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
src/settings-ui/Settings.UI/ViewModels/DashboardViewModel.cs	Refactored to support new dashboard layout with separate collections for shortcuts and actions
src/settings-ui/Settings.UI/ViewModels/DashboardModuleItem.cs	Replaced complex KBM item with simpler activation item model
src/settings-ui/Settings.UI/SettingsXAML/Views/DashboardPage.xaml	Complete redesign of dashboard layout with card-based sections
src/settings-ui/Settings.UI/SettingsXAML/Controls/KeyVisual/*	Refactored KeyVisual control with new templating system and styles
src/settings-ui/Settings.UI/Strings/en-us/Resources.resw	Updated UI strings to match new dashboard terminology

Copilot · 2025-08-05T05:24:18Z

src/settings-ui/Settings.UI/ViewModels/DashboardViewModel.cs

            var list = new List<DashboardModuleItem>
            {
-                new DashboardModuleButtonItem() { ButtonTitle = resourceLoader.GetString("EnvironmentVariables_LaunchButtonControl/Header"), IsButtonDescriptionVisible = true, ButtonDescription = resourceLoader.GetString("EnvironmentVariables_LaunchButtonControl/Description"), ButtonGlyph = "\uEA37", ButtonClickHandler = EnvironmentVariablesLaunchClicked },
+                new DashboardModuleButtonItem() { ButtonTitle = resourceLoader.GetString("EnvironmentVariables_LaunchButtonControl/Header"), IsButtonDescriptionVisible = true, ButtonDescription = resourceLoader.GetString("EnvironmentVariables_LaunchButtonControl/Description"), ButtonGlyph = "ms-appx:///Assets/Settings/Icons/EnvironmentVariables.png", ButtonClickHandler = EnvironmentVariablesLaunchClicked },


This line is extremely long and difficult to read. Consider breaking it into multiple lines for better readability.

Suggested change

new DashboardModuleButtonItem() { ButtonTitle = resourceLoader.GetString("EnvironmentVariables_LaunchButtonControl/Header"), IsButtonDescriptionVisible = true, ButtonDescription = resourceLoader.GetString("EnvironmentVariables_LaunchButtonControl/Description"), ButtonGlyph = "ms-appx:///Assets/Settings/Icons/EnvironmentVariables.png", ButtonClickHandler = EnvironmentVariablesLaunchClicked },

new DashboardModuleButtonItem()

{

ButtonTitle = resourceLoader.GetString("EnvironmentVariables_LaunchButtonControl/Header"),

IsButtonDescriptionVisible = true,

ButtonDescription = resourceLoader.GetString("EnvironmentVariables_LaunchButtonControl/Description"),

ButtonGlyph = "ms-appx:///Assets/Settings/Icons/EnvironmentVariables.png",

ButtonClickHandler = EnvironmentVariablesLaunchClicked

},

Copilot · 2025-08-05T05:24:18Z

src/settings-ui/Settings.UI/SettingsXAML/Controls/KeyVisual/KeyVisual.xaml.cs

+            if (this != null)
+            {
+                if (IsInvalid)
+                {
+                    VisualStateManager.GoToState(this, InvalidState, true);
+                }
+                else if (!IsEnabled)
+                {
+                    VisualStateManager.GoToState(this, DisabledState, true);
+                }
+                else
+                {
+                    VisualStateManager.GoToState(this, NormalState, true);
+                }
+            }


The condition 'if (this != null)' is redundant since 'this' can never be null within an instance method. This check should be removed.

Suggested change

if (this != null)

{

if (IsInvalid)

{

VisualStateManager.GoToState(this, InvalidState, true);

}

else if (!IsEnabled)

{

VisualStateManager.GoToState(this, DisabledState, true);

}

else

{

VisualStateManager.GoToState(this, NormalState, true);

}

}

if (IsInvalid)

{

VisualStateManager.GoToState(this, InvalidState, true);

}

else if (!IsEnabled)

{

VisualStateManager.GoToState(this, DisabledState, true);

}

else

{

VisualStateManager.GoToState(this, NormalState, true);

}

Copilot · 2025-08-05T05:24:18Z

src/settings-ui/Settings.UI/SettingsXAML/Controls/KeyVisual/KeyVisual.xaml.cs

+        }
+
+        private void Update()
+        {


The Update method checks if Content is null but doesn't handle the case where _keyPresenter is null, which could cause a NullReferenceException when trying to set properties on it.

Suggested change

{

{

if (_keyPresenter == null)

{

return;

}

Copilot · 2025-08-05T05:24:19Z

src/settings-ui/Settings.UI/SettingsXAML/Controls/ShortcutControl/ShortcutControl.xaml.cs


        public static readonly DependencyProperty AllowDisableProperty = DependencyProperty.Register("AllowDisable", typeof(bool), typeof(ShortcutControl), new PropertyMetadata(false, OnAllowDisableChanged));

+        private static ResourceLoader resourceLoader = Helpers.ResourceLoaderInstance.ResourceLoader;


Static field should be readonly since it's never reassigned after initialization. Consider making it 'private static readonly ResourceLoader resourceLoader'.

Suggested change

private static ResourceLoader resourceLoader = Helpers.ResourceLoaderInstance.ResourceLoader;

private static readonly ResourceLoader resourceLoader = Helpers.ResourceLoaderInstance.ResourceLoader;

Copilot · 2025-08-05T05:24:19Z

src/settings-ui/Settings.UI/SettingsXAML/Controls/Dashboard/CheckUpdateControl.xaml.cs

+{
+    public sealed partial class CheckUpdateControl : UserControl
+    {
+        public bool UpdateAvailable { get; set; }


Property UpdateAvailable should be readonly since it's only set in the constructor. Consider using a private setter or making it a get-only property.

Suggested change

public bool UpdateAvailable { get; set; }

public bool UpdateAvailable { get; }

## Summary of the Pull Request Fix a crash in settings page due to not found converter  ## AI Summary This pull request makes a small update to the `MouseUtilsPage.xaml` file to use the correct resource for converting boolean values to visibility states in the UI. - Updated the `Visibility` binding on an `InfoBar` to use the `ReverseBoolToVisibilityConverter` instead of the incorrect `BoolToReverseVisibilityConverter` resource. ## 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 Regression caused by #40214  ## Validation Steps Performed <img width="1983" height="1072" alt="image" src="https://github.com/user-attachments/assets/13c806c3-e7af-4615-a649-6d58d8fe877b" />

## Summary of the Pull Request Fixed toggle switch not working issue. ## AI Summary This pull request refactors how `DashboardListItem` objects are created and added to collections in the `DashboardViewModel`. The main improvement is to separate the instantiation of each `DashboardListItem` from the assignment of its `EnabledChangedCallback` property, which is now set after the object is added to the relevant collection. This change improves clarity and may help prevent issues related to object initialization order. Refactoring of `DashboardListItem` creation and initialization: * In the `AddDashboardListItem` method, the `DashboardListItem` object is now created and added to `AllModules` before its `EnabledChangedCallback` property is set, instead of setting this property during object initialization. * In the `GetShortcutModules` method, both `ShortcutModules` and `ActionModules` collections now receive `DashboardListItem` objects that are instantiated first, added to the collection, and then have their `EnabledChangedCallback` property set. This replaces the previous pattern of setting the callback during object creation. [[1]](diffhunk://#diff-aea3404667e7a3de2750bf9ab7ee8ff5e717892caa68ee1de86713cf8e21b44cL123-R136) [[2]](diffhunk://#diff-aea3404667e7a3de2750bf9ab7ee8ff5e717892caa68ee1de86713cf8e21b44cL144-R159) *  ## PR Checklist - [x] Closes: #41046 - [ ] **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 It is an regression from #40214  ## Validation Steps Performed --------- Signed-off-by: Shuai Yuan <[email protected]>

niels9001 added 13 commits June 20, 2025 16:02

Cleaning up Controls folder

72f62c5

Adding Card control

e1bcf62

Dashboard changes

faab625

Remove KBM dashboard item and related code

d28ebcd

Eliminated the DashboardModuleKBMItem, its template, and associated logic from the dashboard. This simplifies the DashboardViewModel and DashboardPage.xaml by removing the display and dynamic updating of Keyboard Manager remappings.

Adding shortcuts view

0aff642

More shortcuts

1d43842

Refactor KeyVisual for better UX customization

ef51252

Updating shortcut strings

f162449

Enabling resizing

e08ef9c

Adding icons to the quick actions

5457b27

CI fixes

c1564db

More shortcut visual refactoring

40fc456

More changes

ab58418

niels9001 changed the title ~~[UX] New dashboard~~ [UX] New dashboard & refactored KeyVisual Jun 27, 2025

Merge branch 'main' into niels9001/new-dashboard-ux

cb3afc7

This was linked to issues Jun 28, 2025

Dashboard/Feature overview #39520

Closed

[Setting > Shortcut control] Show red info text on empty shortcut #32944

Closed

niels9001 added 5 commits July 1, 2025 10:57

Add missing tag

3e14b3a

Moving Update and ShortcutConflicts to dedicated controls so they can…

dbd2ea5

… be reused

Fix

d1e702c

Bringing back the icon for the shortcut control

5f748f8

Styles refactor

2dcf202

niels9001 marked this pull request as ready for review July 2, 2025 17:28

Update SettingsPageControl.xaml

6c933f3

This comment has been minimized.

Sign in to view

niels9001 added 2 commits July 4, 2025 12:23

Merge branch 'main' into niels9001/new-dashboard-ux

48b782a

Update App.xaml

2dc6bdb

This comment has been minimized.

Sign in to view

Jaylyn-Barbee added 4 commits July 17, 2025 10:18

spelling issue + xaml formatting

4b7b48d

ran xaml formatter on unfomratted file

93a1e65

Replace the word 'launch' with 'open' since we shouldn't use 'launch'…

7e6c6d8

… to describe opening something per guidelines

fixed a11y issue with glyphs in keyvisual + removed unneeded line

011fc69

Fixed dashboard page styling

2064325

ghost1372 reviewed Jul 17, 2025

View reviewed changes

src/settings-ui/Settings.UI/SettingsXAML/Controls/KeyVisual.xaml.cs Outdated Show resolved Hide resolved

Jaylyn-Barbee added 4 commits July 18, 2025 11:39

fixed AOT issue with windows logo in keyvisual

5cd8337

xaml formatting

32ed3db

Added back string for 'Update Available'

b42e39b

fixed wrap layout issue

4c38bab

cinnamon-msft added the In for .93 label Jul 28, 2025

DHowett requested changes Jul 30, 2025

View reviewed changes

niels9001 added 2 commits July 31, 2025 11:56

Address comments

fb611a7

Cleaning up and loccing KeyVisual

47401f2

Jay-o-Way reviewed Jul 31, 2025

View reviewed changes

src/settings-ui/Settings.UI/SettingsXAML/Controls/KeyVisual.xaml.cs Outdated Show resolved Hide resolved

niels9001 mentioned this pull request Jul 31, 2025

Refactoring KeyVisual #40904

Merged

DHowett approved these changes Jul 31, 2025

View reviewed changes

niels9001 mentioned this pull request Aug 4, 2025

[Feature] PowerToys hotkey conflict detection #40457

Closed

DHowett merged commit c91bef1 into main Aug 4, 2025
14 checks passed

yeelam-gordon requested a review from Copilot August 5, 2025 04:28

This comment was marked as outdated.

Sign in to view

yeelam-gordon requested a review from Copilot August 5, 2025 05:23

Copilot AI reviewed Aug 5, 2025

View reviewed changes

This was referenced Aug 8, 2025

Settings: Mouse utils setting crash #41050

Merged

Fixed toggle switch not working issue. #41049

Merged

-        {
+        {
+            if (_keyPresenter == null)
+            {
+                return;
+            }


		public static readonly DependencyProperty AllowDisableProperty = DependencyProperty.Register("AllowDisable", typeof(bool), typeof(ShortcutControl), new PropertyMetadata(false, OnAllowDisableChanged));

		private static ResourceLoader resourceLoader = Helpers.ResourceLoaderInstance.ResourceLoader;

	private static ResourceLoader resourceLoader = Helpers.ResourceLoaderInstance.ResourceLoader;
	private static readonly ResourceLoader resourceLoader = Helpers.ResourceLoaderInstance.ResourceLoader;

	public bool UpdateAvailable { get; set; }
	public bool UpdateAvailable { get; }

[UX] New dashboard & refactored KeyVisual #40214

[UX] New dashboard & refactored KeyVisual #40214

Uh oh!

Conversation

niels9001 commented Jun 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary of the Pull Request

New dashboard UX

Updated KeyVisual and Shortcut control

Other changes

PR Checklist

Detailed Description of the Pull Request / Additional comments

Validation Steps Performed

Uh oh!

This comment has been minimized.

This comment has been minimized.

crutkas commented Jul 8, 2025

Uh oh!

azure-pipelines bot commented Jul 8, 2025

Uh oh!

This comment has been minimized.

Jaylyn-Barbee commented Jul 17, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

DHowett Jul 30, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

This comment was marked as outdated.

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Aug 5, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 5, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 5, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 5, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 5, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

9 participants

niels9001 commented Jun 24, 2025 •

edited

Loading

Updated `KeyVisual` and `Shortcut` control