Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TabStrip TabItem:selected style does not take effect #17936

Closed
Beautiful-blue-sky opened this issue Jan 9, 2025 · 2 comments
Closed

TabStrip TabItem:selected style does not take effect #17936

Beautiful-blue-sky opened this issue Jan 9, 2025 · 2 comments
Labels

Comments

@Beautiful-blue-sky
Copy link

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:
TabStrip演示效果

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

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.
屏幕截图 2025-01-10 010609
演示效果

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

@Beautiful-blue-sky Beautiful-blue-sky changed the title TabStrip TabItem:selected style does not take effec TabStrip TabItem:selected style does not take effect Jan 9, 2025
@stevemonaco
Copy link
Contributor

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:

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

@timunie timunie added question and removed bug labels Jan 9, 2025
@Beautiful-blue-sky
Copy link
Author

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:

<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
image

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.

image

@AvaloniaUI AvaloniaUI locked and limited conversation to collaborators Jan 10, 2025
@maxkatz6 maxkatz6 converted this issue into discussion #17939 Jan 10, 2025

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Labels
Projects
None yet
Development

No branches or pull requests

3 participants