WPF如何在TabControl标签栏上方添加UI元素且不影响内容

要实现这个需求，核心是自定义TabControl的ControlTemplate，把Expander、TextBlock这类元素嵌入到标签栏的上方区域，而非直接修改TabControl的外部尺寸。这样既能添加自定义元素，又不会干扰下方的标签内容显示。

以下是完整的实现代码，保留了你原有的TabControl和TabItem样式：

<TabControl Background="Transparent" BorderThickness="0" BorderBrush="{x:Null}" Padding="0">
    <!-- 自定义TabControl模板 -->
    <TabControl.Template>
        <ControlTemplate TargetType="{x:Type TabControl}">
            <Grid>
                <!-- 第一行：放置右对齐的Expander和TextBlock -->
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/> <!-- 自动适配顶部元素高度 -->
                    <RowDefinition Height="*"/> <!-- 剩余空间给标签栏和内容区域 -->
                </Grid.RowDefinitions>

                <!-- 顶部元素容器，用DockPanel实现右对齐 -->
                <DockPanel Grid.Row="0" Margin="0 5 10 5" LastChildFill="False">
                    <TextBlock Text="当前状态:" FontSize="14" VerticalAlignment="Center" DockPanel.Dock="Right" Margin="0 0 10 0"/>
                    <Expander Header="设置" Width="100" VerticalAlignment="Center" DockPanel.Dock="Right"/>
                </DockPanel>

                <!-- 第二行：原TabControl的标签栏和内容区域 -->
                <Grid Grid.Row="1">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>

                    <!-- 标签栏 -->
                    <TabPanel x:Name="HeaderPanel" 
                              Grid.Row="0"
                              Panel.ZIndex="1" 
                              Margin="0,0,4,-1" 
                              IsItemsHost="True" 
                              Background="Transparent"/>

                    <!-- 内容区域 -->
                    <Border x:Name="ContentPanel" 
                            Grid.Row="1"
                            BorderThickness="0" 
                            Background="{TemplateBinding Background}">
                        <ContentPresenter x:Name="PART_SelectedContentHost"
                                          Margin="{TemplateBinding Padding}"
                                          ContentSource="SelectedContent"/>
                    </Border>
                </Grid>
            </Grid>
        </ControlTemplate>
    </TabControl.Template>

    <!-- 你的原有TabItem -->
    <TabItem Width="100" Header="Home" Background="Transparent" FontSize="20" BorderThickness="0" BorderBrush="{x:Null}">
        <!-- 这里放Home标签的内容 -->
        <TextBlock Text="Home页面内容"/>
    </TabItem>
    <TabItem Width="120" Header="Support" Background="Transparent" FontSize="20" BorderThickness="0" BorderBrush="{x:Null}">
        <TextBlock Text="Support页面内容"/>
    </TabItem>
    <TabItem Width="100" Header="Help" Background="Transparent" FontSize="20" BorderThickness="0" BorderBrush="{x:Null}">
        <TextBlock Text="Help页面内容"/>
    </TabItem>
</TabControl>

关键细节说明： #

• 用Grid拆分TabControl的模板为两行，第一行专门放顶部自定义元素，高度设为Auto，只会占用自身所需空间，不会挤压下方区域。
• 顶部用DockPanel实现右对齐，设置LastChildFill="False"，确保元素都靠右排列，不会占满整行。
• 原有的标签栏（TabPanel）和内容区域（ContentPresenter）被放在第二行，高度设为*，会自动占满剩余空间，完全不受顶部元素影响。
• 保留了你原有的TabControl和TabItem的透明背景、无边框等样式，不会破坏原有视觉效果。

如果需要调整顶部元素的间距、样式，直接修改DockPanel内的元素属性即可，完全不会影响标签内容的显示区域。

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