如何让带ScrollViewer的自定义TabControl的TabItem Header网格水平拉伸？

我有一个自定义了ItemTemplate的TabControl（已添加ScrollViewer功能），现在想让带颜色（绿色/红色）的Grid水平拉伸填满整个宽度。我试过在Grid、ScrollViewer或TabPanel中设置各种HorizontalAlignment或HorizontalContentAlignment属性，但都没解决。

原代码如下：

<TabControl Grid.Row="1" TabStripPlacement="Left" ItemsSource="{Binding ViewModel.Collection}" SelectedIndex="0">
    <!-- Vertical TabItems with ScrollViewer -->
    <TabControl.Template>
        <ControlTemplate TargetType="{x:Type TabControl}">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <ScrollViewer Grid.Column="0" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Visible">
                    <TabPanel x:Name="HeaderPanel" IsItemsHost="True" Margin="0,4,0,0"/>
                </ScrollViewer>
                <ContentPresenter Grid.Column="1" x:Name="PART_SelectedContentHost" Margin="4" ContentSource="SelectedContent"/>
            </Grid>
        </ControlTemplate>
    </TabControl.Template>
    <!-- Define TabItem Header -->
    <TabControl.ItemTemplate>
        <DataTemplate>
            <Grid x:Name="Grid">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <TextBlock Grid.Row="0" Text="{Binding Path=Name}"/>
                <TextBlock Grid.Row="1">
                    <Run Text="{Binding Path=Header.Page}"/>
                    <Run Text="/"/>
                    <Run Text="{Binding Path=Header.PageEnd}"/>
                    <Run Text=" - "/>
                    <Run Text="{Binding Path=Header.ProjectNumber}"/>
                </TextBlock>
            </Grid>
            <DataTemplate.Triggers>
                <DataTrigger Binding="{Binding Path=CheckResult.CheckStatus}" Value="{x:Static macros:ECheckStatus.Unchecked}">
                    <Setter TargetName="Grid" Property="Background" Value="Transparent"/>
                </DataTrigger>
                <DataTrigger Binding="{Binding Path=CheckResult.CheckStatus}" Value="{x:Static macros:ECheckStatus.Io}">
                    <Setter TargetName="Grid" Property="Background" Value="LightGreen"/>
                </DataTrigger>
                <DataTrigger Binding="{Binding Path=CheckResult.CheckStatus}" Value="{x:Static macros:ECheckStatus.Warning}">
                    <Setter TargetName="Grid" Property="Background" Value="Orange"/>
                </DataTrigger>
                <DataTrigger Binding="{Binding Path=CheckResult.CheckStatus}" Value="{x:Static macros:ECheckStatus.Error}">
                    <Setter TargetName="Grid" Property="Background" Value="Red"/>
                </DataTrigger>
            </DataTemplate.Triggers>
        </DataTemplate>
    </TabControl.ItemTemplate>
</TabControl>

问题原因 #

核心问题在于TabItem的默认样式：默认情况下，TabItem的Header容器不会自动拉伸，TabPanel只会根据子项的固有尺寸布局，不会强制子项占满ScrollViewer的可用宽度。单纯设置Grid的HorizontalAlignment没用，因为TabItem本身没给它足够的空间。

解决方案 #

需要给TabItem添加自定义样式，强制其Header区域水平拉伸，同时确保TabPanel允许子项占满宽度。

修改后的完整代码 #

<TabControl Grid.Row="1" TabStripPlacement="Left" ItemsSource="{Binding ViewModel.Collection}" SelectedIndex="0">
    <!-- Vertical TabItems with ScrollViewer -->
    <TabControl.Template>
        <ControlTemplate TargetType="{x:Type TabControl}">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <ScrollViewer Grid.Column="0" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Visible">
                    <!-- 设置TabPanel水平拉伸，让子项有可用宽度 -->
                    <TabPanel x:Name="HeaderPanel" IsItemsHost="True" Margin="0,4,0,0" HorizontalAlignment="Stretch"/>
                </ScrollViewer>
                <ContentPresenter Grid.Column="1" x:Name="PART_SelectedContentHost" Margin="4" ContentSource="SelectedContent"/>
            </Grid>
        </ControlTemplate>
    </TabControl.Template>
    <!-- 自定义TabItem样式，强制Header拉伸 -->
    <TabControl.ItemContainerStyle>
        <Style TargetType="{x:Type TabItem}">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Border x:Name="Border" Background="Transparent" BorderThickness="1" Margin="0">
                            <ContentPresenter x:Name="ContentSite"
                                              ContentSource="Header"
                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                              Margin="8,4"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter TargetName="Border" Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </TabControl.ItemContainerStyle>
    <!-- Define TabItem Header -->
    <TabControl.ItemTemplate>
        <DataTemplate>
            <!-- 给Grid设置HorizontalAlignment为Stretch -->
            <Grid x:Name="Grid" HorizontalAlignment="Stretch">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <TextBlock Grid.Row="0" Text="{Binding Path=Name}"/>
                <TextBlock Grid.Row="1">
                    <Run Text="{Binding Path=Header.Page}"/>
                    <Run Text="/"/>
                    <Run Text="{Binding Path=Header.PageEnd}"/>
                    <Run Text=" - "/>
                    <Run Text="{Binding Path=Header.ProjectNumber}"/>
                </TextBlock>
            </Grid>
            <DataTemplate.Triggers>
                <DataTrigger Binding="{Binding Path=CheckResult.CheckStatus}" Value="{x:Static macros:ECheckStatus.Unchecked}">
                    <Setter TargetName="Grid" Property="Background" Value="Transparent"/>
                </DataTrigger>
                <DataTrigger Binding="{Binding Path=CheckResult.CheckStatus}" Value="{x:Static macros:ECheckStatus.Io}">
                    <Setter TargetName="Grid" Property="Background" Value="LightGreen"/>
                </DataTrigger>
                <DataTrigger Binding="{Binding Path=CheckResult.CheckStatus}" Value="{x:Static macros:ECheckStatus.Warning}">
                    <Setter TargetName="Grid" Property="Background" Value="Orange"/>
                </DataTrigger>
                <DataTrigger Binding="{Binding Path=CheckResult.CheckStatus}" Value="{x:Static macros:ECheckStatus.Error}">
                    <Setter TargetName="Grid" Property="Background" Value="Red"/>
                </DataTrigger>
            </DataTemplate.Triggers>
        </DataTemplate>
    </TabControl.ItemTemplate>
</TabControl>

关键修改点 #

1. TabPanel设置HorizontalAlignment="Stretch"：让TabPanel占满ScrollViewer的宽度，为子项提供拉伸空间。
2. 添加TabItem的ItemContainerStyle：
   • 设置HorizontalContentAlignment="Stretch"，让TabItem的内容区域拉伸。
   • 重写TabItem的模板，确保ContentPresenter的HorizontalAlignment绑定到TabItem的HorizontalContentAlignment，这样Header内容会填满TabItem的宽度。
3. Grid设置HorizontalAlignment="Stretch"：确保Grid本身在可用空间内拉伸。

这样修改后，带颜色的Grid就会自动水平拉伸，填满TabItem的整个宽度，也就是ScrollViewer的可用宽度。

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