The Windows Presentation Foundation (WPF) is a Desktop UI Framework that is part of .NET. Microsoft uses it to build Visual Studio. WPF got some nice new features with .NET 9:

• Windows 11 Theming
• Accent Colors
• Hyphen-based ligatures

In a little series of blog posts, let’s take a look at these features. Let’s start in this blog post with Windows 11 Theming.

Windows 11 Theming

When you build a new WPF application and run it on Windows 11, it looks not really modern, as it doesn’t use Windows 11’s Fluent theme. But with .NET 9, you get the Windows 11 Fluent theme styles for WPF, and you can use them if you want. Let’s take a look at an example.

Default Look of a WPF app

Let’s create a new WPF project that targets .NET 9. I give it the name WpfApp. In the MainWindow.xaml file I replace the Grid with the one below, so that we have a user interface with some elements:

<Grid TextElement.FontSize="20">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <Label Content="Firstname" VerticalAlignment="Center" Margin="10"/>
    <TextBox Grid.Column="1" Text="Thomas Claudius" Margin="10"/>

    <Label Grid.Row="1" Content="Lastname" VerticalAlignment="Center" Margin="10"/>
    <TextBox Grid.Row="1" Grid.Column="1" Text="Huber" Margin="10"/>

    <CheckBox Grid.Row="2" Grid.Column="1" 
    Content="Is developer"
    IsChecked="True"
    Margin="10"/>

    <StackPanel Grid.Row="3"
    Grid.ColumnSpan="2" 
    Orientation="Horizontal" 
    VerticalAlignment="Bottom" Margin="10">
        <Button Content="Save" Width="100" Margin="5"/>
        <Button Content="Cancel" Width="100" Margin="5"/>
    </StackPanel>
</Grid>

When you run the WPF application, it looks like below. No Windows 11 theming by default. But we have now enough user interface elements to see the theming in action in the next section.

Turn on Windows 11 Theming

As you’ve seen in the previous section, Windows 11 Theming is not turned on by default. Instead, you have to explicitly turn it on. There are two ways to do this:

1. Reference the Fluent Theme resource dictionary
2. Use the ThemeMode property (experimental with .NET 9) on the Application object or on any Window object

Let’s take a look at both approaches.

1. Reference the Fluent Theme resource dictionary

To reference the Fluent Theme resource dictonary, you set in the App.xaml file the Application.Resources property like in the code snippet below.

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="pack://application:,,,/PresentationFramework.Fluent;component/Themes/Fluent.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

To set the Source property of the inner ResourceDictionary, the so-called PACK URI syntax is used. It grabs in this case the assembly PresentationFramework.Fluent.dll. This is a new assembly introduced with .NET 9. From that assembly, the file component/Themes/Fluent.xaml is loaded. The component keyword describes the root of the assembly, which means that the assembly contains a Themes folder with a Fluent.xaml file.

That Fluent.xaml file is a resource dictionary that contains the Windows 11 Fluent theme styles. As these styles are loaded now into the application-wide resources of our WPF app, the controls will automatically pick up these styles.

When you start the application again, it looks like below. It uses now the Windows 11 Fluent Design. With the new styles, the WPF TextBox got also some additional UX: When it has the focus, it shows a little cross on the right side that a user can click to empty it. You see the cross below on the focused TextBox for the firstname.

When you go to the Settings in Windows 11, you can navigate to Personalization->Colors. There you can choose your mode like in the screenshot below. As you can see, my mode is set to Dark.

When you switch the mode in the settings from Dark to Light, the WPF app dynamically adjusts its look to that new mode. Below you see what the WPF app looks like when the light mode is selected.

So, using the new styles for the Windows 11 Fluent Theme is super easy. You adjust the App.xaml file to load the Fluent.xaml resource dictionary, that’s it! Instead of this approach, you can also use the ThemeMode property.

2. Use the ThemeMode property

Instead of activating the Windows 11 Fluent Theme styles for your WPF app via application resources, you can also use the new ThemeMode property. It is available on the Application class and also on the Window class. This means you can set it application-wide and also define different values on individual windows. You can assign one of these four values to the ThemeMode property:

• Light – the Light Fluent theme will be used
• Dark – the Dark Fluent theme will be used
• System – Either Light or Dark Fluent theme will be used, depending on the user’s Windows settings.
• None – the default value. Means the Areo2 Theme is used, which leads to the default WPF look and feel.

The code snippet below shows how the ThemeMode property is set on the Application object to Dark. This is all you need to start your application with the dark theme.

<Application x:Class="WpfApp2.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:WpfApp2"
             StartupUri="MainWindow.xaml"
             ThemeMode="Dark">
    <Application.Resources>
         
    </Application.Resources>
</Application>

The ThemeMode property can be changed dynamically at runtime. The code snippet below shows a Click event handler for a Button that does this. It switches the theme of the application dynamically from Dark to Light and vice versa. If the application’s ThemeMode property contains the value Dark, the code sets the ThemeMode property to Light, and else it sets it to Dark. As the ThemeMode property is marked as experimental in .NET 9 with the Experimental attribute, you have to include a #pragma directive in your C# code like below to compile your code without errors.

private void Button_Click(object sender, RoutedEventArgs e)
{
#pragma warning disable WPF0001 
    App.Current.ThemeMode =
        App.Current.ThemeMode == ThemeMode.Dark
        ? ThemeMode.Light
        : ThemeMode.Dark;
#pragma warning restore WPF0001 
}

So, you see, using the ThemeMode property is an easy alternative to referencing the Fluent Theme resource dictionary in the application resources. But, as you’ve seen in this section, it’s still experimental, which means it can be changed or removed in a future .NET version.

You can use the ThemeMode property in XAML without a #pragma directive. This is because when you set properties in XAML, the Experimental attribute is not checked. Behind the scenes, WPF creates a binary file from your XAML file with the extension .baml. At runtime, that file is loaded to set the corresponding properties. This means in other words that there is no compile-time check for the Experimental attribute. Maybe this compile-time check for experimental properties set in XAML will come with a future version of WPF.

Where is the PresenationFramework.Fluent.dll?

The Styles for the Fluent Theme are included in a new theme-specific assembly, which is called PresentationFramework.Fluent.dll. When you expand the WPF framework in the Solution Explorer of Visual Studio like below, you cannot see that assembly there. But you can see the other theme-specific assemblies like PresentationFramework.Aero or PresentationFramework.Classic.

The fact that the PresentationFramework.Fluent.dll is not shown in the Solution Explorer seems to be a display bug. On the file system, you can find this new .dll in the .NET 9 installation folder. It is located in the path C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App\9.x. Below you see a screenshot with that path opened in File Explorer, and there is the PresentationFramework.Fluent.dll.

Explore the WPF Gallery App

If you want to see all the Fluent Theme styles in action for the different WPF controls, you can install the WPF Gallery app from the Microsoft Store. There you can explore all the different WPF controls with their latest Windows 11 styles.

By the way, the code of the WPF Gallery app is open source, you can find it in the WPF Samples repository here on GitHub.

Summary

WIth the new Windows 11 Fluent Theme styles for WPF, you can build modern looking applications for Windows. As you’ve seen in this blog post, there are two ways to turn the Windows 11 Theming on:

• Reference the Fluent theme resource dictionary in the App.xaml file
• Use the experimental ThemeMode property on the Application class and/or on the Window class

In my opinion, Windows 11 theming is a fantastic new feature that helps you modernizing your WPF applications, so that they look and feel modern.

Thanks for reading,
Thomas