Extending Themes.UseVsTheme to support additional controls

[awschristou]

Themes.UseVsTheme is a great toggle for making the UI of an extension visually match Visual Studio. What is the ideal approach for extending this to other controls like PasswordBox?

Here are the thoughts I had:

• Wrap Themes.UseVsTheme in my extension
  • Create a similar UseVsTheme dependency property in my extension, which calls Themes.UseVsTheme, but also merges and adds resources to Theme controls not supported by the Toolkit.
    • Pro: Lean Toolkit, provides basic assistance for theme related fidelity
    • Con: Duplicated efforts (The Themes class in the Toolbox and extension would be very similar). Could hooks be provided to help here?
• Define styles for additional controls in Community Toolkit
  • Start a ResourceDictionary in the project that contains styles for additional controls, providing a consistent look and feel. Merge these styles in with Themes.BuildThemeResources
    • Pro: Extensions can leverage more Theme control from the Toolkit
    • Cons:
      • Potential Toolkit bloat if many control styles are added
      • Problems retrieving the ResourceDictionary from a non-WPF class library? (I was experimenting with this and wasn't successful - maybe I missed something)

[madskristensen]

I'd like the toolkit to provide full theming support to make it as easy for extension authors as possible.

@reduckted what do you think?

[reduckted]

Supporting more controls sounds like a great idea. Looking at the standard controls, I think we can add styles for these ones:

• ProgressBar ✔️
• PasswordBox ✔️
• Separator
• Slider
• ToggleButton

[reduckted]

I've implemented the PasswordBox style in #128.

[reduckted]

The ProgressBar is probably better replaced with Microsoft.VisualStudio.PlatformUI.SmoothProgressBar, which is themed by default. I've created #130 to add it to the demo window and added a theme you can use to give it a thicker height.

[awschristou]

I was successful in creating an inline themed style for PasswordBox, however I hit an issue where I don't know how to load it in from a xaml-based ResourceDictionary. I have posted my progress in a branch in case you have any hints. Here is where my loading is unsuccessful (I'm not sure if it has to do with the project type and "ProjectTypeGuids" that relate to WPF).

[bluetarpmedia]

Does anyone have a method they use for design-time styling to preview how the Xaml would look with real Visual Studio themes? I came up with my own method but I've no idea if there's something better.

I have some complex UI with lots of custom controls which UseVSTheme can't handle, so my custom controls have lots of references to VS colors/brushes directly. The round-tripping going from Xaml editing to firing up the VS experimental instance just to see how the control would look was super tedious.

My solution is a bit like a facade. At design-time the custom controls reference the colors/brushes from a special resource dictionary but at runtime the controls grab the real colors/brushes from what's available in VS. The design-time resource dictionary is a copy of what's in VS and I have one each for Dark, Light, and Blue themes that I can toggle between.