dotnet / dotnet/wpf

Fluent2 TabView change selected tab background color to accent color

Open
#10,356 8 comments 0 reactions 0 assignees View on GitHub
Win 11 Theming
Dominant language
C#
Stars
7.7k
Forks
1.3k
Avg merge
1d 11h
Merged PRs (30d)
61

Description

### Description

I have a .NET 9 WPF application that I want to style using the new fluent (Windows 11) theme. I need to style the background of the selected tab of the TabView to use the theme accent color.

### Reproduction Steps of the Problem
Find the sample repro that showcases the issue explained below here: https://github.com/johanneskopf/sample-selected-TabItem-background-override. Executing the sample shows this window (TabView on top, with a button inside the tab):

![Image](https://github.com/user-attachments/assets/94836feb-26a7-463e-8aa9-09cae6aaf6ce)

Now when changing the theme color from
![Image](https://github.com/user-attachments/assets/8819724c-a7e8-441b-88ef-d8a588d1fea4)
to
![Image](https://github.com/user-attachments/assets/9915ee3a-9622-4c0e-9932-978242033f01)

I get this result:
![Image](https://github.com/user-attachments/assets/cf22084b-459b-4743-8e07-6c2fd159e87c)

I need the TabView to reflect the changes of the Windows theme accent color here. Thus, when the theme color is changed to blue, the selected tab item background should be green as well. Currently this only works for the button with the default style, not for the TabView's selected tab background in my sample.

### Code explanation

I statically achieved what I want by doing the following, it is not reflected until the application is restarted though:

App.xaml:
```csharp








```

OverrideStyles.xaml:
```csharp



```

What I want to achieve is easily possible for buttons by the way. A button defined like this dynamically updates to the chosen theme color on-the-fly:
```csharp

```

As a reference, here is the dark default style of the fluent theme:
https://github.com/dotnet/wpf/blob/main/src/Microsoft.DotNet.Wpf/src/Themes/PresentationFramework.Fluent/Themes/Fluent.Dark.xaml

There, one can find those lines, which might be relevant:
```csharp

<Setter Property="Background" Value="{DynamicResource TabViewItemHeaderBackground}" />
...

```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.