winui-3

How to change tab color of TabView based on its state?


I try to change in a WinUI3 C# project, the color of a tab based on its state (if selected, the background color must be blue otherwise red). I use the following code but I have weird behavior

SolidColorBrush red = new SolidColorBrush(Colors.Red);
SolidColorBrush blue = new SolidColorBrush(Colors.Blue);

TabViewItem newTab = new TabViewItem
{
    Header = "Tab Name"    
};

newTab.Resources = new()
{
    { "TabViewItemHeaderBackground", red},
    { "TabViewItemHeaderBackgroundSelected", blue}
};

TabView.TabItems.Add(newTab);
TabView.SelectedItem = newTab;
newTab.Background = blue;

When a tab is created the background color is red and not blue (it changes to blue when I switch to another tab) and I have a border at the top of the red tab.

Initial tab created in red Red dark border at top

Do you have any idea?

Thanks


Solution

  • The Background will be changed based on the VisualStates.

    You can see the VisualStates for the TabViewItemHeader in the control's generic.xaml file.

    For example, these changes will be applied when the item is selected.

    <VisualState x:Name="Selected">
        <VisualState.Setters>
            <Setter Target="BottomBorderLine.Visibility" Value="Collapsed" />
            <Setter Target="RightRadiusRenderArc.Visibility" Value="Visible" />
            <Setter Target="LeftRadiusRenderArc.Visibility" Value="Visible" />
            <Setter Target="SelectedBackgroundPath.Visibility" Value="Visible" />
    
            <!--  "TabViewItemHeaderBackgroundSelected" will be used on a Path.  -->
            <Setter Target="SelectedBackgroundPath.Fill" Value="{ThemeResource TabViewItemHeaderBackgroundSelected}" />
            <!--  "TabViewItemHeaderBackground" will be used on the Background.  -->
            <Setter Target="TabContainer.Background" Value="{ThemeResource TabViewItemHeaderBackground}" />
    
            <Setter Target="TabContainer.Margin" Value="{ThemeResource TabViewSelectedItemHeaderMargin}" />
            <Setter Target="TabContainer.BorderBrush" Value="{ThemeResource TabViewSelectedItemBorderBrush}" />
            <Setter Target="TabContainer.BorderThickness" Value="{ThemeResource TabViewSelectedItemBorderThickness}" />
            <Setter Target="TabContainer.Padding" Value="{ThemeResource TabViewSelectedItemHeaderPadding}" />
            <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundSelected}" />
            <Setter Target="IconControl.Foreground" Value="{ThemeResource TabViewItemIconForegroundSelected}" />
            <Setter Target="CloseButton.Background" Value="{ThemeResource TabViewItemHeaderSelectedCloseButtonBackground}" />
            <Setter Target="CloseButton.Foreground" Value="{ThemeResource TabViewItemHeaderSelectedCloseButtonForeground}" />
            <Setter Target="LayoutRoot.Background" Value="Transparent" />
            <Setter Target="ContentPresenter.FontWeight" Value="SemiBold" />
    
        </VisualState.Setters>
    </VisualState>