System colors in WinRT/XAML
Windows apps have always adapted to the Windows color settings. But over time, Microsoft has made this progressively harder.
In WinForms, you had SystemColors and SystemBrushes, which were well-documented and easy to use. In WPF, you had a new flavor of SystemColors, which were fairly well-documented, but using them required a lengthy incantation involving DynamicResource. In HTML Metro (WinJS), you can expand out the references in Solution Explorer and read the theme CSS files, which is less discoverable than anything before, but is still a little like documentation.
But in XAML Metro (WinRT/XAML), the system colors are buried in theme resources that you can’t even see. If you want to use one of the system colors, you can find them in the visual designer’s Properties page, but you can’t find them in the documentation. This bugs me, since I’m a coder and tend not to bother much with the designer.
So I went ahead and wrote the documentation myself. I now have a metro.excastle.com subdomain, which contains documentation for the system brush resources in WinRT/XAML. I even show color swatches for both the Dark and Light themes. (I recommend you use a modern browser that understands CSS alpha transparency.)
(BTW, if anyone can suggest a better algorithm for deciding whether a semi-transparent color’s RGB code should be shown in black or white for best contrast, I’m all ears. I admit I didn’t spend a lot of time on that part.)
If you have suggestions for other content or links I could add to metro.excastle.com, leave a comment here or drop me a line.
October 3rd, 2012 at 10:41 pm
Hi Tim,
Thanks for this great post.
It said that these resources were defined implicitly by Windows runtime. I am curious to know whether it is possible to expose our own custom control theme brushes in the same way, so that users can easily use it anywhere in App or they could overwrite the value in App.xaml.
Thanks,