Introducing Windows 11 Themes for WPF Controls

New in the ComponentOne 2022 v2 release is our “System” theme for .NET 6 WPF applications. This theme is designed to use the user’s OS settings as much as possible. It includes sharp corners on Windows 10 or rounded corners on Windows 11, a new look for checkboxes on Windows 11, and other system colors set by the user, such as high-contrast colors. The system theme is a slight departure from our default fluent appearance in .NET 6.

Want to try out these themes? Download ComponentOne Today!

Here’s what the new System theme for WPF looks like on Windows 11:

Here’s what the high-contrast themes look like on Windows 11. These high-contrast themes are named Aquatic, Desert, Dusk, and Night Sky.

These themes are part of the C1.WPF.Themes.System package and available for .NET 6. You can see all other available themes for .NET Framework here.

How to Apply a ComponentOne WPF Theme

It’s very easy to apply a theme in WPF. You can apply a theme to an entire application or a single control.

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.C1ThemeSystem myTheme = new C1.WPF.Themes.C1ThemeSystem();
myTheme.Apply(this); // applies theme to entire window

That’s it! Alternatively, you can apply themes in XAML by wrapping your root element (or single control) in the theme tags.

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

If you’re new to ComponentOne or WPF, read more below to understand all of the custom styling options available.

Download the ComponentOne 2022 v2 update today.

Background on Styling WPF Controls

When styling controls in ComponentOne WPF Edition, you have several options.

First, 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. This makes it easy to customize a ComponentOne WPF control’s appearance without having to learn some other approach for creating themes. For example, you can create an implicit Style that makes all your FlexGrid’s red.

<Window.Resources>
    <Style TargetType="c1:FlexGrid">
        <Setter Property="Background" Value="Red" />
    </Style>
</Window.Resources>

Second, we went beyond what the standard controls could do when it came to simply setting brush properties like on a control. Have you ever tried to style the WPF Datagrid column headers? It’s not that simple - it requires you to modify the control template. But with ComponentOne WPF controls, you can set brush properties to style the control completely. This is due to our ClearStyle technology (read more about it here), which essentially resulted in numerous brush properties exposed for every part of the control so that you don’t have to customize complex XAML templates.

For example, you can quickly style FlexGrid’s column headers by just setting its ColumnHeaderBackground property to a solid brush, and the color is propagated through the layers (this is more impressive on a classic theme that uses gradients).

Third, we provide 20+ professional themes for .NET Framework and are in the process of adding more to .NET 6, starting with our System theme released in 2022 v2. Themes are a great way to quickly apply a specific look to an entire control or entire application with just one line of code.

And lastly, if themes and ClearStyle (numerous brush properties) aren't enough, we also provide all the style resources and templates, so you can customize them to meet your requirements if it’s absolutely necessary. All of the control templates and resource files are included with ComponentOne WPF Edition, and they can be imported into Expression Blend or Visual Studio. You can find these resources here: C:\Program Files (x86)\ComponentOne\WPF Edition\Resources.

Want to try out these themes? Download ComponentOne Today!