TabStrip TabItem:selected style does not take effect

[Beautiful-blue-sky]

Describe the bug

The Avalonia version is 11.2.3.

I used a control called TabStrip, and to change the font color of the selected item, I customized a style file, but found it ineffective. See the animated GIF below for reference:

When switching to the TabControl control, similar style code works fine. See the animated GIF below for reference:

To find the cause, I tried running it to see the tree structure and found that TabStrip contains TabItem and TabStripItem, while TabStripItem also contains TabItem. After directly modifying the TextElement.Foreground of TabItem in TabStripItem, it took effect.

I am not sure if this is a bug or if there is an issue with my style setting. If it's my own problem, I apologize.

To Reproduce

Using the TabStrip control and setting the style to change the color when selected.

Expected behavior

No response

Avalonia version

11.2.3

OS

Windows

Additional context

No response

[stevemonaco]

You're somehow putting TabItems inside of a TabStrip. These should all be TabStripItem. You also don't need to target the ContentPresenter in this case. Please read the original ControlTheme for the control in whatever theme you're using when you get stuck in customizing. For Fluent theme, TabStripItem is the following:

Avalonia/src/Avalonia.Themes.Fluent/Controls/TabStripItem.xaml

Lines 57 to 60 in 7aff154

	<Style Selector="^:selected">
	<Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundSelected}" />
	<Setter Property="Foreground" Value="{DynamicResource TabItemHeaderForegroundSelected}" />
	</Style>

[Beautiful-blue-sky]

You're somehow putting TabItems inside of a TabStrip. These should all be TabStripItem. You also don't need to target the ContentPresenter in this case. Please read the original ControlTheme for the control in whatever theme you're using when you get stuck in customizing. For Fluent theme, TabStripItem is the following:

Avalonia/src/Avalonia.Themes.Fluent/Controls/TabStripItem.xaml

Lines 57 to 60 in 7aff154

	<Style Selector="^:selected">
	<Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundSelected}" />
	<Setter Property="Foreground" Value="{DynamicResource TabItemHeaderForegroundSelected}" />
	</Style>

I wrote this based on the examples in the documentation, as shown in the image below, and the address is:https://docs.avaloniaui.net/docs/reference/controls/tabstrip

Is it because the documentation version is old and there have been changes in the new version? If I use TabStripItem in my code, it prompts an error.

[stevemonaco]

Docs are simply wrong here. I'll try to PR a change later tonight or tomorrow.

In the event when docs are inaccurate or incomplete for the very basics, please check the ControlCatalog sample:
https://github.com/AvaloniaUI/Avalonia/blob/master/samples/ControlCatalog/Pages/TabStripPage.xaml

And then report to avalonia-docs repo.

Edit: I have submitted the PR AvaloniaUI/avalonia-docs#601