This post continues our series on the Actipro Themes being added for all our WPF controls in the upcoming 2011.2 version.
The previous post gave an introduction to Actipro Themes and discussed how we have implemented styles/templates for native WPF controls that look great with our custom WPF controls. In many cases, our styles/templates look the same as the related system theme. However in some cases such as menus, toolbars, statusbars, etc. we’ve spruced things up a bit to provide a more Visual Studio-ish look for the native controls. These customized styles/templates can be applied app-wide with a single line of code, or instead can be used on a case-by-case basis if desired.
Achieving Consistency
A main goal of Actipro Themes is to make native WPF controls in your apps look great when paired with any of Actipro’s custom controls, and when multiple Actipro products are used together.
In 2011.1 and past versions, each of our custom control products used to define their brush asset resources in their own assemblies. Since we have many product assemblies, over time this could of course lead to some inconsistent colors within a theme between multiple products.
There were cases where some brushes were duplicated such as for the non-glass Window brushes used by both Docking/MDI and Ribbon.
Finally, if Actipro products were set to use an Office theme, they would render great, however may not mix well next to native WPF controls since those would still be using the system theme.
The solution to all of these issues is to have a common asset pool.
Common Asset Pool
Our approach with Actipro Themes in 2011.2 was to consolidate all brush, thickness, etc. assets for a theme into a single place. We call this the common asset pool.
What we’ve done is have developed well over 800 asset resources for each of the system and Office themes we support. Then we made all of our custom control product styles/templates as well as our native WPF control styles/templates use those same assets. You can imagine that this took quite a while to do.
The benefits of using a single set of asset resources that were designed to look great together are:
- Actipro’s custom and native WPF control style/templates all share the same asset resources, meaning their styles, sizes, and colors will match. In the diagram above you can see how the EditBackgroundNormalBrushKey asset is used to reference the Brush that is applied as the default background for both a native WPF TextBox as well as for Actipro SyntaxEditor. If you now place a TextBox next to a single-line mode SyntaxEditor, you visually won’t see any difference.
- There is no more brush asset duplication since all assets are set in one place and reused among all Actipro products.
- Since Actipro’s styles/templates for native WPF controls use the common asset pool, now when an Office (or other) theme is set for an application, all native WPF controls will render in the theme alongside the Actipro controls.
- You can reuse any of the assets anywhere in your app to further extend the consistent themed look.
- You can redefine any assets globally or on a theme-by-theme basis, and those changes will flow into any styles/templates in your app that use the assets.
Reusing Assets
It’s easy to reuse any of our custom theme assets anywhere in your apps or custom controls. The syntax is like this:
1: <Border CornerRadius="4" BorderThickness="1" Padding="20"
2: Background="{DynamicResource {x:Static themes:AssetResourceKeys.ContainerMediumBackgroundNormalBrushKey}}"
3: BorderBrush="{DynamicResource {x:Static themes:AssetResourceKeys.ContainerBorderNormalBrushKey}}">
We’ve defined several additional helpful assets in each theme for things like container and workspace backgrounds. There are multiple variations of each (light, medium, dark).
You can choose which to use for various scenarios but regardless of which one you choose, everything will look great with the rest of the theme. Several styles for native controls are also included, allowing the X button in the screenshot above to easily render similar to a standard toolbar button.
Redefining Assets
It’s easy to redefine individual assets if you don’t like our pre-defined defaults. We have even built in a simple mechanism by which you can redefine assets only for specific themes so that if you only wanted to modify a particular asset for Office themes, you could do so.
Either way, these redefined assets can flow into all Actipro and native controls in your application.
Summary
You can see how having a common asset pool provides for visual consistency throughout your app, and we’ve further engineered things to make all assets reusable and customizable. You won’t find a better theming system anywhere.
In the next post, we’ll take a look at the updated look we’ve created for the Docking/MDI product.