在WPF中使用UniformGrid设置TabControl的Header高度

要实现垂直布局下TabItem Header均匀填充高度且随窗口动态调整，核心是替换默认的TabPanel为UniformGrid（它能自动均分子元素空间），同时给TabItem设置MinHeight保证最小高度。

修改后的TabControl模板 #

<Style TargetType="{x:Type TabControl}">
    <Setter Property="Padding" Value="2"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Background" Value="{StaticResource TabItem.Selected.Background}"/>
    <Setter Property="BorderBrush" Value="{StaticResource TabItem.Selected.Border}"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabControl}">
                <Grid x:Name="templateRoot" ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition x:Name="ColumnDefinition0"/>
                        <ColumnDefinition x:Name="ColumnDefinition1"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition x:Name="RowDefinition0" Height="Auto"/>
                        <RowDefinition x:Name="RowDefinition1" Height="*"/>
                    </Grid.RowDefinitions>
                    <!-- 替换TabPanel为UniformGrid，自动均分高度 -->
                    <UniformGrid x:Name="headerPanel" Background="Transparent" Grid.Column="0" 
                                 IsItemsHost="true" Margin="2,2,2,0" Grid.Row="0" 
                                 KeyboardNavigation.TabIndex="1" Panel.ZIndex="1" Columns="1"/>
                    <Border x:Name="contentPanel" Background="{TemplateBinding Background}" 
                            BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" 
                            Grid.Column="0" KeyboardNavigation.DirectionalNavigation="Contained" Grid.Row="1" 
                            KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local">
                        <ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" 
                                          Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="TabStripPlacement" Value="Left">
                        <Setter Property="Width" TargetName="headerPanel" Value="80"/>
                        <Setter Property="Grid.Row" TargetName="headerPanel" Value="0"/>
                        <Setter Property="Grid.Row" TargetName="contentPanel" Value="0"/>
                        <Setter Property="Grid.Column" TargetName="headerPanel" Value="0"/>
                        <Setter Property="Grid.Column" TargetName="contentPanel" Value="1"/>
                        <Setter Property="Width" TargetName="ColumnDefinition0" Value="Auto"/>
                        <Setter Property="Width" TargetName="ColumnDefinition1" Value="*"/>
                        <Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
                        <Setter Property="Height" TargetName="RowDefinition1" Value="0"/>
                        <Setter Property="Margin" TargetName="headerPanel" Value="2,2,0,2"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

配套TabItem样式（设置最小高度） #

给TabItem添加MinHeight，确保每个Header按钮不会低于设定的最小高度：

<Style TargetType="{x:Type TabItem}">
    <Setter Property="MinHeight" Value="60"/> <!-- 可根据需求调整最小高度 -->
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabItem}">
                <Border x:Name="border" Background="{TemplateBinding Background}" 
                        BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"
                        Padding="{TemplateBinding Padding}">
                    <ContentPresenter x:Name="contentPresenter" ContentSource="Header" 
                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                      SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="true">
                        <Setter Property="Background" TargetName="border" Value="{StaticResource TabItem.Selected.Background}"/>
                        <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TabItem.Selected.Border}"/>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter Property="Background" TargetName="border" Value="{StaticResource TabItem.MouseOver.Background}"/>
                        <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TabItem.MouseOver.Border}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

关键修改说明 #

• 替换TabPanel为UniformGrid：TabPanel是流式布局，无法自动均分高度；UniformGrid设置Columns="1"后，所有TabItem会纵向排列，自动均分所在容器的可用高度，窗口尺寸变化时会自动调整。
• 设置TabItem的MinHeight：防止窗口高度过小时，Header按钮被挤压变形，保证交互区域的最小尺寸。
• 保留原布局触发器：维持TabStripPlacement为Left时的行列布局逻辑，确保Header和内容区域的位置正确。

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