Registry Preview UI

[Jay-o-Way]

Summary of the Pull Request

• UI/code
• strings
• Dim the title bar when the window is inactive

PR Checklist

• Closes: Brush up UI for a few modules #27261
• Communication: I've discussed this with core contributors already. If 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 for new binaries
  • WXS for installer for new binaries and localization folder
  • YML for CI pipeline for new test projects
  • YML for signed pipeline
• Documentation updated: If checked, please file a pull request on our docs repo and link it here: #xxx

Validation Steps Performed

Visual Studio

[niels9001]

Thanks!!

Few things, should be easy fixes.

[niels9001]

Please put back the background color of the CommandBar.. this was per design specification.

[Jay-o-Way]

Can you elaborate or show the spec? Usually it's like a menubar. WinUI 3 Gallery and https://learn.microsoft.com/windows/apps/design/controls/command-bar (and pretty much every app that comes to mind) always show a clear commandbar.
(and honestly/personally I don't like the looks of it)

[niels9001]

We have design syncs with the design team where we discuss these things. They showed this as an example (Outlook):

[Jay-o-Way]

Oh I see... The Outlook family - and Office family - do have a different UI then most (MS Store) apps. But if you want me to add it back I will. You're saying this style is going to be applied to "all" other MS apps in the future?

[niels9001]

Please do. W11 introduced the notion of "cards" - and something that is part of the broader Fluent Design story.

For best practices, and the latest guidance, the Windows Visual Library in Figma is your best source: https://www.figma.com/community/file/1159947337437047524/Windows-UI-3

As a rule of thumb, the content there is the latest defined by the design team owning the W11 design language. Some of the content you will not find in, or might contradict, the documentation on MS Docs. Those articles sometimes refer to the UWP/W10 days, and are mostly targeting < WinUI 2.5 (before the design refresh)

[Jay-o-Way]

Detail: a commandbar is by default aligned to the right. Setting HorizontalAlignment="Left" will break the "stretch" property, and then an extra border is visible when the overflow menu is open. Still want to keep it left? Right?

[Jay-o-Way]

Ready.
@randyrants wadda ya think? :)

[randyrants]

I think I've been far too much time dealing with probate docs than compilers the last couple of weeks (and see no end of it in sight) - I defer to your paired expertise in the UX. Had a couple of comments on the resw file but nothing urgent or binding.

[niels9001]

Looking good.. one last thing:

Setting the RowSpacing to 12 causes this:

Note for later: once Toolkit 8.0 is out, we probably want to adopt the new GridSplitter that adopts a W11 design - https://github.com/CommunityToolkit/Windows/blob/main/components/Sizers/samples/GridSplitter.md

[Jay-o-Way]

Did it! 😄

[niels9001]

Looks good to me! Thanks!

[randyrants]

@Jay-o-Way late question, but my time has been shredded across too many things.

There are three buttons in the command bar in 0.72 that no longer have icons: that by design and if so, I'm wondering why, since all of the selected icons came under heavy review and feedback, seemingly landing in a place that made sense as part of the command bar work.

Not opposed to keeping them out if there's a reason and happy to put them back if it was accidental but this touches on a bigger problem: one of the reasons why I went after the additional icons for the buttons stemmed from a bug reported on using the Icon property in CommandBar: #25284

This led me to some docs that called out that we should be using AppButton.Icon and a FontIcon as that is deterministic in all languages while also allowing a larger collection of glyphs to leverage.

Sorry I missed it when it was active but just noticed it now.

[Jay-o-Way]

@randyrants no problem, fair question. Well, the reason for me was, that the icons used were just not specific enough. So for me it was like "if we can't find an icon good enough, might as wel omit it". But yes, that's a personal opinion.

The same applies to some places in the Settings pages. Maybe, one day, we can create icons ourself and add those?

I do agree that a command bar is good with icons, and that icons are good for any language. At least in general.

P.S. the linked issue was about a specific range of icon codes plus a specific UI situation (HongKong font).

[randyrants]

I agree, the icons are preference, but I don't think the Font issue is. It was reported report for Traditional Chinese but I believe I saw the same behavior in Japanese, then made the change to the code following the guidance of the MSFT documentation for best practice.

I'll file a bug and prepare a fix for it. Coin flip if I put the old not-good-enough icons or not. 🙂

PR: #27770