我来帮你搞定这个问题！要把TabControl的标签移到左侧同时保持内容区域大小不变，关键是调整标签栏的布局逻辑，避免它挤占内容区域的空间。结合你的现有代码，我给你整理了完整的解决方案：

核心思路 #

1. 先通过TabStripPlacement把标签栏移到左侧
2. 自定义TabControl的模板，用Grid拆分布局，让内容区域自动占满剩余空间
3. 可选：固定标签宽度，避免标签文字过长影响内容区域

修改后的完整代码示例 #

<controls:TabControl Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3" 
                     x:Name="MyTabControl" 
                     BorderBrush="Transparent" 
                     BorderThickness="0" 
                     Padding="0"
                     TabStripPlacement="Left"> <!-- 核心：把标签移到左侧 -->
    <controls:TabControl.Resources>
        <!-- 你的可关闭标签模板（补全了关闭按钮的基础逻辑） -->
        <DataTemplate x:Key="ClosableTabItem">
            <StackPanel Orientation="Horizontal">
                <TextBlock x:Name="textBlockName" VerticalAlignment="Center" Text="{Binding}"/>
                <Hyperlink x:Name="closeLink" Click="CloseTab_Click" Margin="5,0,0,0">
                    <TextBlock Text="✕"/>
                </Hyperlink>
            </StackPanel>
        </DataTemplate>

        <!-- 自定义TabItem样式，控制标签外观和宽度 -->
        <Style TargetType="{x:Type controls:TabItem}">
            <Setter Property="HeaderTemplate" Value="{StaticResource ClosableTabItem}"/>
            <Setter Property="Width" Value="120"/> <!-- 固定标签宽度，防止内容区域被压缩 -->
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type controls:TabItem}">
                        <Border x:Name="Border" 
                                Background="Transparent" 
                                BorderBrush="#E0E0E0" 
                                BorderThickness="0,0,1,1"
                                Margin="0">
                            <ContentPresenter x:Name="ContentSite"
                                              VerticalAlignment="Center"
                                              HorizontalAlignment="Left"
                                              ContentSource="Header"
                                              Margin="10,5"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter TargetName="Border" Property="Background" Value="White"/>
                                <Setter TargetName="Border" Property="BorderThickness" Value="0,0,0,1"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!-- 自定义TabControl模板，确保内容区域占满空间 -->
        <Style TargetType="{x:Type controls:TabControl}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabControl}">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/> <!-- 标签栏自适应宽度 -->
                                <ColumnDefinition Width="*"/> <!-- 内容区域占满剩余所有空间 -->
                            </Grid.ColumnDefinitions>
                            <TabPanel x:Name="HeaderPanel"
                                      Grid.Column="0"
                                      Panel.ZIndex="1"
                                      Margin="0"
                                      IsItemsHost="True"
                                      Background="#F5F5F5"/>
                            <Border x:Name="Border"
                                    Grid.Column="1"
                                    Background="White"
                                    BorderBrush="#E0E0E0"
                                    BorderThickness="1,0,1,1">
                                <ContentPresenter x:Name="PART_SelectedContentHost"
                                                  Margin="0"
                                                  ContentSource="SelectedContent"/>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </controls:TabControl.Resources>

    <!-- 示例TabItem -->
    <controls:TabItem Header="标签1">
        <Grid Background="#F9F9F9">
            <TextBlock Text="这是标签1的内容区域，大小不会受左侧标签影响" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Grid>
    </controls:TabItem>
    <controls:TabItem Header="标签2（长标题测试）">
        <Grid Background="#F9F9F9">
            <TextBlock Text="标签2的内容区域同样保持最大可用空间" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Grid>
    </controls:TabItem>
</controls:TabControl>

关键细节说明 #

• TabStripPlacement="Left"：直接将标签栏定位到左侧
• TabControl模板的Grid布局：用Auto宽度放标签栏，*宽度放内容区域，确保内容区域始终占满剩余空间
• 固定TabItem宽度：避免标签文字过长导致标签栏变宽，如果你希望标签宽度自适应，可以去掉<Setter Property="Width" Value="120"/>这行
• 自定义TabItem模板：优化选中状态的视觉效果，让标签栏和内容区域的边框衔接更自然

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