How to change tabviewitem header backgroud color in winui 3?

Question

<TabView x:Name="tabView" AddTabButtonClick="TabView_AddTabButtonClick" TabCloseRequested="TabView_TabCloseRequested" 
        SelectionChanged="TabView_SelectionChanged"
        HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
    <TabView.TabItemTemplate>
        <DataTemplate x:DataType="local:MyTabItem">
            <TabViewItem Header="{x:Bind HeaderName, Mode=OneWay}" IconSource="{x:Bind IconSource, Mode=OneWay}" Content="{x:Bind Content}">
                <TabViewItem.HeaderTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding}"></TextBlock>
                    </DataTemplate>
                </TabViewItem.HeaderTemplate>
            </TabViewItem>
        </DataTemplate>
    </TabView.TabItemTemplate>
</TabView>

I want to change the background color of TabViewItem header, however, there is no property named HeaderBackground in TabViewItem

Answer 1

You can define TabViewItemHeaderBackgroundSelected and TabViewItemHeaderBackground in Resources.

There are more header properties that can be changed here.

microsoft-ui-xaml/TabView_themeresources.xaml

• TabViewItemHeaderBackground
• TabViewItemHeaderBackgroundSelected
• TabViewItemHeaderBackgroundPointerOver
• TabViewItemHeaderBackgroundPressed
• TabViewItemHeaderBackgroundDisabled

---

<TabView.Resources>
    <ResourceDictionary>
          <SolidColorBrush x:Key="TabViewItemHeaderBackgroundSelected" Color="Red"/>
          <SolidColorBrush x:Key="TabViewItemHeaderBackground" Color="Red"/>
    </ResourceDictionary>
</TabView.Resources>