How to Add WPF Themes to Style Your Desktop Applications

Themes allow you to quickly style your entire application with a professional, cohesive look. With just one line of code, you can apply any ComponentOne WPF Theme to your entire desktop application. Or just drop the theme component into your XAML.

ComponentOne WPF Edition ships with 22 professional themes. Here you can explore our available WPF themes, including styles inspired by Microsoft Office, Material design, and Windows 11.

Microsoft Office White Theme

Three Ways to Apply a ComponentOne WPF Theme

Applying a theme in WPF is very easy, and there are three different approaches. The easiest way to theme a window is to wrap your XAML root element in the C1 theme tags.

<c1:C1ThemeMaterial xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml">
    <!-- Content -->
</c1:C1ThemeMaterial>

You can also apply a theme by code. For example, in your MainWindow.xaml.cs, you can instantiate the theme and use the Apply method to theme any specific FrameworkElement (i.e., a single control) or the entire Window using the code below.

C1.WPF.Themes.C1ThemeCosmopolitan myTheme = new C1.WPF.Themes.C1ThemeCosmopolitan();
myTheme.Apply(this); // applies theme to entire window

Or, you can even apply a theme seamlessly to your entire application by adding it to your application’s merged dictionary resources.

Application.Current.Resources.MergedDictionaries.  
    Add(C1.WPF.Theming.C1Theme.GetCurrentThemeResources(new C1.WPF.Theming.BureauBlack.C1ThemeBureauBlack()));  

Note that this method works only when you apply a theme for the first time. If you change to another theme at run-time, you should first remove the previous theme from the Merged Dictionaries.

Steps to Add a ComponentOne WPF Theme by XAML

You can download the C1.WPF.Themes packages from NuGet or install the libraries using the C1ControlPanel to get the samples. Please note that the ComponentOne WPF Themes do not install to the toolbox, but you can still create them pretty easily in XAML. Here are the steps:

1. Open your WPF application containing ComponentOne controls.

2. Add a reference to the C1.WPF.Theming package — this includes the common theme-related logic.

3. Add a reference to at least one specific theme package, such as C1.WPF.Theming.ExpressionDark. You can browse the different themes here.

4. In your XAML page, make sure the XML namespace for ComponentOne is defined. If not, add it to the top of the page (this only needs to be defined once per page for all ComponentOne controls).

xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"

5. Create a parent tag around your root element, such as a Grid, and enter the tag as such:

<c1:C1ThemeExpressionDark> ... </c1:C1ThemeExpressionDark>

How to Customize a ComponentOne WPF Theme

Our WPF controls follow the same implicit style management as the standard .NET controls. This means you can define common Styles and reuse them across your application. You can apply a Style over top of a theme depending on how the theme was applied. The best way to customize a theme is to set the theme at the application level through the Merged Dictionaries, as described earlier. Then, your Styles defined locally on certain pages will be applied afterward.

This approach makes it easy to customize a ComponentOne WPF theme without having to create an entirely new theme from scratch, or having to learn some new approach styling controls. For example, you can modify any theme applied to C1DockControl by defining a new implicit Style that applies your changes.

<UserControl.Resources>
    <Style TargetType="c1:C1DockControl">
        <Setter Property="HeaderBackground" Value="Red" />
        <Setter Property="TabControlBackground" Value="Maroon" />
    </Style>
</UserControl.Resources>

For most common scenarios, you can re-theme the entire control with Style setters like the above. With ComponentOne WPF controls, we expose numerous brush properties for every part of the control so that you don’t have to customize complex XAML templates.

If you want to create your own theme for ComponentOne controls from scratch, you can start by importing all of the generic .xaml files for each control you need, and then directly edit the XAML elements or create Styles. You can obtain the XAML resources files by installing the full WPF Edition and finding them at C:\Program Files (x86)\ComponentOne\WPF Edition\Resources.

Want to Customize Your Own WPF Theme? Download ComponentOne Today!

Originally published at https://www.developer.mescius.com on November 4, 2022.