Avalonia TabStrip样式问题：悬停背景消失与选中条位置异常

问题1：鼠标悬停Tab时背景消失、样式不生效 #

你在代码里犯了一个关键错误：在TabStrip.ItemTemplate中直接用TabItem作为内容容器。Avalonia的TabStrip会自动为每个项生成TabStripItem容器，内部的TabItem会干扰外层容器的样式继承，导致TabStripItem:pointerover选择器无法正确作用到目标元素。

修复思路： #

1. 移除ItemTemplate中的TabItem，直接把背景色绑定到TabStripItem上（通过样式的Setter实现绑定）
2. 悬停样式只调整透明度，保留原有健康状态的背景色，实现微妙的视觉变化

问题2：调整TabStripItem高度后选中条位置偏移 #

默认TabStripItem模板里的选中指示器位置依赖内部布局，缩小高度后会移位。需要重写TabStripItem的ControlTemplate，把选中条固定在控件底部。

完整修复后的AXAML代码 #

<TabStrip Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Margin="0" Padding="0"
           ItemsSource="{Binding History}" SelectedItem="{Binding SelectedHistoryItem, Mode=TwoWay}">
     
    <TabStrip.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Rows="1" />
        </ItemsPanelTemplate>
    </TabStrip.ItemsPanel>
     
    <TabStrip.Styles>
        <!-- 基础TabStripItem样式 -->
        <Style Selector="TabStripItem">
            <Setter Property="Padding" Value="2,0,0,0"/>
            <Setter Property="Margin" Value="0"/>
            <Setter Property="MinHeight" Value="0"/>
            <Setter Property="MaxHeight" Value="30"/> <!-- 可按需调整高度 -->
            <!-- 绑定背景色到数据项的Status属性 -->
            <Setter Property="Background" Value="{Binding Status, Converter={StaticResource ServiceHealthColorConverter}}"/>
            <!-- 重写ControlTemplate固定选中条位置 -->
            <Setter Property="Template">
                <ControlTemplate>
                    <Border Background="{TemplateBinding Background}"
                            Padding="{TemplateBinding Padding}"
                            Margin="{TemplateBinding Margin}">
                        <Grid>
                            <!-- 内容容器（无表头所以留空） -->
                            <ContentPresenter />
                            <!-- 选中条：固定在底部，高度可自定义 -->
                            <Rectangle Name="PART_SelectedIndicator"
                                       Height="2"
                                       VerticalAlignment="Bottom"
                                       Fill="{DynamicResource SystemAccentColor}"
                                       IsVisible="{TemplateBinding IsSelected}"/>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter>
        </Style>
        
        <!-- 悬停样式：仅调整透明度实现微妙效果 -->
        <Style Selector="TabStripItem:pointerover">
            <Setter Property="Opacity" Value="0.85" />
        </Style>

        <!-- 可选：选中时恢复完全不透明 -->
        <Style Selector="TabStripItem:selected">
            <Setter Property="Opacity" Value="1" />
        </Style>
    </TabStrip.Styles>
</TabStrip>

关键说明 #

• 移除了冗余的ItemTemplate和内部TabItem，让TabStripItem直接作为绑定载体，确保样式能正确作用
• 重写的ControlTemplate通过VerticalAlignment="Bottom"将选中条固定在底部，无论MaxHeight设为多少都不会移位
• 悬停样式只修改透明度，保留了健康状态的绿/橙/红背景色，符合需求的视觉反馈

内容的提问来源于stack exchange，提问作者CameO73