Question: What is the best architecture of a theme engine?

[BorzillaR]

Hello!

In our components, we want to have the ability to change themes. The main requirements which we want to fit are:

• Themes could change the entire style of the component, but not only its brushes or colors.
• Each theme should be separated from the main app. For-example, it could be a separate file on a drive (or in a cloud), which the end user can copy (download) and apply without reinstalling the application.
• Themes should be changed as fast as possible.
• Themes should affect native components also (Textbox, ComboBox, AppBar, NavibationView and so on) to be consistent appearance with all of our components.
• Each theme could have several customizations which are the dictionary of the brushes, colors, paddings, margins and other resources which do not affect the visual tree nodes.
• The end-user should have the ability to use our brushes to make their custom controls consistent with our themes.
• The end-user could override some of our brushes to customize appearance.

Could you suggest the best approach to solve this? Which way to go?

[wjk]

Hey there! The best way to accomplish this would be to implement the themes as XAML ResourceDictionary instances (which can contain both simple resources like colors and full-blown templates that completely redesign the control). Normally, these files are parts of the app’s source code and are compiled into non-editable XBF files during the build process. However, there is the XamlReader class. This allows an app to load XAML content from a text string at runtime, using the exact same syntax you would write in Visual Studio. The documentation gives the example of loading an Ellipse instance, but I suppose that the same would work for a ResourceDictionary. Once that is done, you would insert the new ResourceDictionary into Application.Resources.MergedDictionaries (removing any older dictionaries inserted in the same way first).

As to how to create a visual designer that edits colors on these themes, you would have to read in the theme XAML from a file, and then either make changes to the string in memory before it is loaded (very powerful, but difficult), or to change out the resources in the dictionary after loading them but before inserting it into Application.Resources. To use this second technique, you would need to create a list of resources that can be changed at runtime after loading the XAML file, and maintain it separately (possibly as part of the app’s code). Changes made by the user will be applied by replacing resources in the loaded ResourceDictionary by their x:Key.

Please be aware that I’ve never tried this technique myself, so I have no idea if it will work or not, or what tradeoffs there would be. In particular, I don’t know how to force the controls currently onscreen to redraw themselves using the new resources; you may need to perform the above technique only during the app startup sequence, before any windows are created, for it to work. Good luck!

[BorzillaR]

Thank you, @wjk! I will try to use the approach suggested by you.