Always have two tab rows in WPF TabControl - wpf

Question

I have a TabControl in a WPF application and sometimes it has one tab row and other times it has two tab rows depending on the width of the parent control. This is certainly the expected behavior for a TabControl.
However I want there to always be two tab rows. Does anyone know how to do this?
Thanks.
<TabControl x:Name="StackOverflowTabControl" HorizontalAlignment="Stretch" Margin="10,10,10,0" VerticalAlignment="Stretch">
<TabItem>
<TabItem.Header>
<TextBlock Text="Hey" FontWeight="SemiBold" />
</TabItem.Header>
<DockPanel VerticalAlignment="Stretch">
<Label Content="Hey" />
</DockPanel>
</TabItem>
<TabItem HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<TabItem.Header>
<TextBlock Text="Blah" FontWeight="SemiBold" />
</TabItem.Header>
<DockPanel VerticalAlignment="Stretch" >
<Label Content="Hey 2" />
</DockPanel>
</TabItem>
<TabItem HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<TabItem.Header>
<TextBlock Text="Whatever" FontWeight="SemiBold" />
</TabItem.Header>
<DockPanel VerticalAlignment="Stretch" >
<Label Content="Whatever" />
</DockPanel>
</TabItem>
<TabItem HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<TabItem.Header>
<TextBlock Text="Info" FontWeight="SemiBold" />
</TabItem.Header>
<DockPanel VerticalAlignment="Stretch" >
<Label Content="Under Construction" HorizontalAlignment="Center" VerticalAlignment="Top" FontSize="24" />
</DockPanel>
</TabItem>
<TabItem HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<TabItem.Header>
<TextBlock Text="Something" FontWeight="SemiBold" />
</TabItem.Header>
<DockPanel VerticalAlignment="Stretch" >
<Label Content="Hey" />
</DockPanel>
</TabItem>
<TabItem HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<TabItem.Header>
<TextBlock Text="Nothing" FontWeight="SemiBold" />
</TabItem.Header>
<DockPanel VerticalAlignment="Stretch" >
<Label Content="Hey 3" />
</DockPanel>
</TabItem>
<TabItem HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<TabItem.Header>
<TextBlock Text="Forms" FontWeight="SemiBold" />
</TabItem.Header>
<DockPanel VerticalAlignment="Stretch" >
<Label Content="Under Construction" HorizontalAlignment="Center" VerticalAlignment="Top" FontSize="24" />
</DockPanel>
</TabItem>
</TabControl>

Answer 1

Right click the TabControl and select EditTemplate->Edit a Copy to get a copy of the template. Then find the TabPanel in the template and add HorizontalAlignment="Left" and MaxWidth=x, where x is the width at which you want the tab items to go to the next line.
Below is an example with a width of 200.
<Window.Resources>
<SolidColorBrush x:Key="TabItem.Selected.Background" Color="#FFFFFF"/>
<SolidColorBrush x:Key="TabItem.Selected.Border" Color="#ACACAC"/>
<Style x:Key="TabControlStyle1" 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" Width="0"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition x:Name="RowDefinition0" Height="Auto"/>
<RowDefinition x:Name="RowDefinition1" Height="*"/>
</Grid.RowDefinitions>
<TabPanel x:Name="headerPanel" Background="Transparent" Grid.Column="0" IsItemsHost="true" Margin="4,0,0,2" Grid.Row="0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1" MaxWidth="200" HorizontalAlignment="Left"/>
<Border x:Name="contentPanel" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" 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="Bottom">
<Setter Property="Grid.Row" TargetName="headerPanel" Value="1"/>
<Setter Property="Grid.Row" TargetName="contentPanel" Value="0"/>
<Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
<Setter Property="Height" TargetName="RowDefinition1" Value="Auto"/>
<Setter Property="Margin" TargetName="headerPanel" Value="2,0,2,2"/>
</Trigger>
<Trigger Property="TabStripPlacement" Value="Left">
<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="TabStripPlacement" Value="Right">
<Setter Property="Grid.Row" TargetName="headerPanel" Value="0"/>
<Setter Property="Grid.Row" TargetName="contentPanel" Value="0"/>
<Setter Property="Grid.Column" TargetName="headerPanel" Value="1"/>
<Setter Property="Grid.Column" TargetName="contentPanel" Value="0"/>
<Setter Property="Width" TargetName="ColumnDefinition0" Value="*"/>
<Setter Property="Width" TargetName="ColumnDefinition1" Value="Auto"/>
<Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
<Setter Property="Height" TargetName="RowDefinition1" Value="0"/>
<Setter Property="Margin" TargetName="headerPanel" Value="0,2,2,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>
</Window.Resources>