Question: Is there any documentation about resources (brushes, colors, ...) that are default/standard and are the ones you should use and when?

[Cybrosys]

Hello,

I just started my journey with XAML, Win UI and Fluent design. But the journey just ran into a wall, sort of. I can't seem to find any documentation or resources about what brushes, colors or similar to use in order to achieve the default/standard look & feel of what Windows has, for example the Start menu, Store and many other apps.

I find myself changing Background bindings hoping to achieve the desired result of, for example, just wanting my GridView to have a light grey background and another corresponding color in dark mode.

My hope is to be able to focus on my app and style it with default brushes and colors that I feel safe to use because they are compatible with light, dark and high contrast mode. But up until now I've been spending the majority of my time trying to find information about what brushes and colors existing components are using in order to be able to even start building my own UI.

Perhaps I have just missed something and the information is available somewhere?

[michael-hawker]

🦙 I think the theme resource document and color guidance are supposed to be those documents, but agree they're a bit hard to parse as a dev and figuring out which specific resources to use where within a control/ui.

[Cybrosys]

🦙 I think the theme resource document and color guidance are supposed to be those documents, but agree they're a bit hard to parse as a dev and figuring out which specific resources to use where within a control/ui.

There's also inconsistency as some resources does not even exist for me. For example perusing the listed font styles, I see BodyTextBlockStyle which exists, but BodyStrongTextBlockStyle does not exist for me. Am I missing a dependency or are the styles not available in WinUI 3 (WinUI 2 is mentioned)?

Last night I just took a Grid and used hot reload to bind the Background to various "System* and "SystemChrome*" colors. Some were almost identical, there's no information or explanation as to what they are, if/when you're supposed to use them or how to use them. Some have color information while others merely play with the alpha. All the while also toggling between Light and Dark mode in Windows.

I get really hung up on how things look, feel & behave and my OCD is killing me at the moment. Another thing, also related, is that the focus highlighting on mouse over is not the same in WinUI 3 as on for example the Start Menu or other WPF/UWP applications. Buttons, borders, highlights move with the mouse cursor in UWP/WPF apps, the start menu, basically it's the default visual feedback in Windows 10. Yet WinUI 3 which is supposed to be just that, the default look & feel for Windows, does not have that same visual feedback. Why?

Sorry about the rant but this is so common when starting working with a new tech. You have certain expectations based on how the tech is portrayed and you build up expectations of what your new app is going to look like, feel & behave. For example the W10 start menu with the beautiful shades, visual feedback, responsiveness and then you get something that just draws a blue border around an item you click. "This isn't how it's supposed to look...". It's like when starting a new Android app and you run it expecting it to have the material design look, but what you get is an app that looks like things looked when Android 1.0 was released. Then you spend time trying to find information on how you have to change base class, add certain style documents, change base style of your styles, etc etc etc. You're fighting the technology.

Sorry about the rant, it just means I care.

WinUI 3 is portrayed as the tech to use for building modern Windows desktop applications (as .NET MAUI is still in preview). And as such I also would want (expect) anything that I build to by default have that look & feel of Windows 10 and the default apps like Start menu, calculator. There should be information and recommendations for colors, brushes, styles, etc.. How to alter/tweak them to achieve desired results. Which ones to use and why. The focus for new developers and their energy should be on building their app, not fighting & googling styling/theming because things are not behaving or looking how they should.

[seven-mile]

🦙 I think the theme resource document and color guidance are supposed to be those documents, but agree they're a bit hard to parse as a dev and figuring out which specific resources to use where within a control/ui.

Does WinUI3 has an alternative of these common ThemeResources? I think most of them can be migrated directly into WinUI3, just except some Win11 new styles.

[StephenLPeters]

@alejo4000 @chigy @MikeHillberg FYI

[Cybrosys]

Added as a question for the next community call:
#5858 (comment)_

[llothar]

The focus for new developers and their energy should be on building their app, not fighting & googling styling/theming because things are not behaving or looking how they should.

Welcome to the modern world of agile release often, release early and cut any cost for technical writing as it gets outdated immediately because management is not about stability anymore at all. Kenny Kerr (who wrote the fundamental C++ WinRT layer answered once to me that i should not expect anything to happen from Microsofts side on this topic).

[gregwoo-microsoft]

@Cybrosys please look at the new WinUI 3 Gallery update https://aka.ms/winui3/gallery. We have a new Colors page that aims to address those problems. Hope this helps!