WPF: Limit the maximum size of width of header area in TabControl

Question

I'm using C#/WPF to make UI.

My UI has an buttons on header area of Tab Control for user's convenience.

The problem is, if many tabs are added, the last one (or if it has multi rows, one of them) can be covered by those buttons like the red rectangle in the attached picture:

Is there any way to limit the maximum width of header area of TabControl, but keeping the width of content area for TabItems?

Current XAML:

<Grid>
    <Grid HorizontalAlignment="Stretch">
        <TabControl BorderThickness="0,0,0,1" Margin="0,0,0,0">
             <TabItem MinWidth="130" Height="27" Content="Title" />
             <TabItem MinWidth="130" Height="27" Content="Title" />
             <TabItem MinWidth="130" Height="27" Content="Title" />
             <TabItem MinWidth="130" Height="27" Content="Title" />
             <TabItem MinWidth="130" Height="27" Content="Title" />
             <TabItem MinWidth="130" Height="27" Content="Title" />
             <TabItem MinWidth="130" Height="27" Content="Title" />
             <TabItem MinWidth="130" Height="27" Content="Title" />
        </TabControl>
    </Grid>
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
        <Button Margin="0,2,5,0" HorizontalAlignment="Left" Height="20" Width="22" VerticalAlignment="top" Content="+" />
        <Button Width="65" Height="25" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,0,1,1" Content="Close" />
    </StackPanel>
</Grid>

`

Note: On top of my mind, I might be able to use negative margin for TabItems in order to overflow the parent(TabControl)'s width, but it can be a bad workaround.

Please let me know what would be a good approach in this case.

Answer 1

You can define your own TabControl Style, or more specifically ControlTemplate, to insert a "ButtonPanel" like this:

<TabControl.Style>
                    <Style  TargetType="{x:Type TabControl}">
                        <Setter Property="OverridesDefaultStyle"
                                Value="True" />
                        <Setter Property="SnapsToDevicePixels"
                                Value="True" />
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type TabControl}">
                                    <Grid KeyboardNavigation.TabNavigation="Local">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto" />
                                            <RowDefinition Height="*" />
                                        </Grid.RowDefinitions>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>
                                        <VisualStateManager.VisualStateGroups>
                                            <VisualStateGroup x:Name="CommonStates">
                                                <VisualState x:Name="Disabled">
                                                    <Storyboard>
                                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                                                      Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
                                                            <EasingColorKeyFrame KeyTime="0"
                                                                                 Value="#FFAAAAAA" />
                                                        </ColorAnimationUsingKeyFrames>
                                                    </Storyboard>
                                                </VisualState>
                                            </VisualStateGroup>
                                        </VisualStateManager.VisualStateGroups>
                                        <TabPanel x:Name="HeaderPanel"
                                                  Grid.Row="0"
                                                  Panel.ZIndex="1"
                                                  Margin="0,0,4,-1"
                                                  IsItemsHost="True"
                                                  KeyboardNavigation.TabIndex="1"
                                                  Background="Transparent" />
                                        <StackPanel x:Name="ButtonPanel" Grid.Column="1" Orientation="Horizontal">
                                            <Button Margin="0,2,5,0"
                                                    HorizontalAlignment="Left"
                                                    Height="20"
                                                    Width="22"
                                                    VerticalAlignment="top"
                                                    Content="+" />
                                            <Button Width="65"
                                                    Height="25"
                                                    HorizontalAlignment="Right"
                                                    VerticalAlignment="Top"
                                                    Margin="0,0,1,1"
                                                    Content="Close" />
                                        </StackPanel>
                                        <Border x:Name="Border"
                                                Grid.Row="1"
                                                Grid.ColumnSpan="2"
                                                BorderThickness="1"
                                                CornerRadius="2"
                                                KeyboardNavigation.TabNavigation="Local"
                                                KeyboardNavigation.DirectionalNavigation="Contained"
                                                KeyboardNavigation.TabIndex="2">
                                            <Border.Background>
                                                <LinearGradientBrush EndPoint="0.5,1"
                                                                     StartPoint="0.5,0">
                                                    <GradientStop Color="{DynamicResource ContentAreaColorLight}"
                                                                  Offset="0" />
                                                    <GradientStop Color="{DynamicResource ContentAreaColorDark}"
                                                                  Offset="1" />
                                                </LinearGradientBrush>
                                            </Border.Background>
                                            <Border.BorderBrush>
                                                <SolidColorBrush Color="{DynamicResource BorderMediumColor}" />
                                            </Border.BorderBrush>
                                            <ContentPresenter x:Name="PART_SelectedContentHost"
                                                              Margin="4"
                                                              ContentSource="SelectedContent" />
                                        </Border>
                                    </Grid>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </TabControl.Style>