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.
Do you have any idea?
Thanks
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>