Skip to content

Refactoring KeyVisual#40904

Merged
niels9001 merged 2 commits intoniels9001/new-dashboard-uxfrom
niels9001/keyvisual-tweaks
Jul 31, 2025
Merged

Refactoring KeyVisual#40904
niels9001 merged 2 commits intoniels9001/new-dashboard-uxfrom
niels9001/keyvisual-tweaks

Conversation

@niels9001
Copy link
Collaborator

@niels9001 niels9001 commented Jul 31, 2025

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)
image image

AI Summary

This pull request refactors the implementation of the KeyVisual control in the Settings UI by introducing a new KeyCharPresenter control and reorganizing related XAML resources. The changes improve modularity and maintainability, and update the visual structure and styling of key representations.

Key changes include:

Refactoring and Code Organization:

  • The code-behind for KeyVisual (KeyVisual.xaml.cs) has been removed, and its logic is now handled through XAML templating and the new KeyCharPresenter control.
  • The KeyVisual.xaml file has been moved to the KeyVisual subfolder and updated to reference the new KeyCharPresenter for displaying key content. [1] [2]

Introduction of KeyCharPresenter:

  • Added a new KeyCharPresenter control (KeyCharPresenter.xaml and KeyCharPresenter.xaml.cs) for rendering key characters and glyphs with dedicated styles for default, Windows key, and glyph keys. [1] [2]
  • Registered the new XAML resource and code-behind in the project and included it in the application resource dictionary. [1] [2] [3]

UI and Style Updates:

  • Updated the KeyVisual control template to use a Grid containing KeyCharPresenter, improving layout flexibility and separation of concerns.
  • Adjusted default styling for KeyVisual, such as padding, font size, and accessibility properties.
  • Removed the hardcoded Windows logo path data from App.xaml, as the new approach handles this via styles.

Overall, these changes modernize the way key visuals are rendered and styled, making the codebase cleaner and easier to extend in the future.

@niels9001 niels9001 requested a review from Jaylyn-Barbee July 31, 2025 13:12
@niels9001 niels9001 merged commit 8a62b76 into niels9001/new-dashboard-ux Jul 31, 2025
12 checks passed
@yeelam-gordon yeelam-gordon added this to the PowerToys 0.93 milestone Aug 8, 2025
@yeelam-gordon yeelam-gordon added the Product-Settings The standalone PowerToys Settings application label Aug 8, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Product-Settings The standalone PowerToys Settings application

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants