TabControl - Align TabItems correctly if free space dominates

Question

I have a customized TabControl:

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">

   <Window.Resources>
      <Style TargetType="TabControl">
         <Setter Property="Background" Value="Transparent" />
         <Setter Property="BorderThickness" Value="0" />
         <Setter Property="TabStripPlacement" Value="Bottom" />
         <Setter Property="Template">
            <Setter.Value>
               <ControlTemplate TargetType="TabControl">
                  <Grid>
                     <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                     </Grid.RowDefinitions>

                     <Grid Grid.Row="1" >
                        <Grid.ColumnDefinitions>
                           <ColumnDefinition Width="Auto"/>
                           <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>

                        <TabPanel Grid.Column="0" Panel.ZIndex="1" IsItemsHost="True" Background="Transparent" />

                        <ItemsControl Grid.Column="1">
                           <ItemsControl.Items>
                              <Button Height="50">DOMINATES</Button>
                           </ItemsControl.Items>
                        </ItemsControl>
                     </Grid>

                     <ContentPresenter Grid.Row="0"  ContentSource="SelectedContent" />
                  </Grid>
               </ControlTemplate>
            </Setter.Value>
         </Setter>
      </Style>

      <Style TargetType="{x:Type TabItem}">
         <Setter Property="Template">
            <Setter.Value>
               <ControlTemplate TargetType="{x:Type TabItem}">
                  <Border Background="LightCyan" Padding="20,0">
                     <TextBlock SnapsToDevicePixels="True" Text="{TemplateBinding Header}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
                  </Border>
               </ControlTemplate>
            </Setter.Value>
         </Setter>
      </Style>
   </Window.Resources>

   <TabControl>
      <TabItem Header="TEST 123">
         <TextBlock>1</TextBlock>
      </TabItem>
      <TabItem Header="TEST 456">
         <TextBlock>2</TextBlock>
      </TabItem>
   </TabControl>
</Window>

Beside the TabItems other controls are placed - which are much higher than the TabItems. How can i stretch the TabItems and place the TextBox in the middle (so that the fill the area)? Can i adjust the Padding dynamically?

http://goo.gl/xcYOY3 The red marked area should be filled and the TextBox centered. Is this possible?

Thx :)

Solution

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style TargetType="TabControl">
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="TabStripPlacement" Value="Bottom" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TabControl">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <ContentPresenter Grid.ColumnSpan="2" Grid.Column="0" Grid.Row="0" ContentSource="SelectedContent" />
                            <TabPanel Panel.ZIndex="1" Grid.Row="1"  Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsItemsHost="True" Background="Transparent" />
                            <ItemsControl Grid.Row="1" Grid.Column="1" VerticalAlignment="Bottom">
                                <ItemsControl.ItemContainerStyle>
                                    <Style TargetType="FrameworkElement">
                                        <Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
                                    </Style>
                                </ItemsControl.ItemContainerStyle>
                                <Button Background="LightGray" Height="70" BorderThickness="0">DOMINATES</Button>
                            </ItemsControl>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style TargetType="{x:Type TabItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Grid Background="LightCyan" Height="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabPanel}}, Path=ActualHeight}">
                            <TextBlock SnapsToDevicePixels="True" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="20,0" Text="{TemplateBinding Header}" ></TextBlock>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

    <TabControl>
        <TabItem Header="TEST 123">
            <TextBlock >1</TextBlock>
        </TabItem>
        <TabItem Header="TEST 456">
            <TextBlock >2</TextBlock>
        </TabItem>
    </TabControl>
</Window>

Answer 1

I have edited your template As per you image ..please run this xaml code separately.

<Window.Resources>
<Style TargetType="TabControl">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="TabStripPlacement" Value="Bottom" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="TabControl">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="50"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <ContentPresenter Grid.ColumnSpan="2" Height="50" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center"  ContentSource="SelectedContent" />
                        <Grid Grid.Row="1"  Grid.Column="0" Background="LightCyan">
                            <TabPanel Panel.ZIndex="1" HorizontalAlignment="Center" VerticalAlignment="Center" IsItemsHost="True" Background="Transparent" />
                        </Grid>
                        <ItemsControl Grid.Row="1"  VerticalAlignment="Bottom"  Grid.Column="1">
                            <ItemsControl.ItemContainerStyle>
                                <Style TargetType="FrameworkElement">
                                    <Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
                                    <Setter Property="Height" Value="50"></Setter>
                                </Style>
                            </ItemsControl.ItemContainerStyle>
                            <Button Background="LightGray"  BorderThickness="0">DOMINATES</Button>
                        </ItemsControl>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style TargetType="{x:Type TabItem}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Grid Background="LightCyan" >
                        <TextBlock SnapsToDevicePixels="True" Margin="5,0,5,0" >
                        <ContentPresenter x:Name="ContentSite"  HorizontalAlignment="Center" VerticalAlignment="Center"  ContentSource="Header"  RecognizesAccessKey="True"/>
                        </TextBlock>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

 <TabControl>
    <TabItem Header="TEST 123">
        <TextBlock >1</TextBlock>
    </TabItem>
    <TabItem Header="TEST 456">
        <TextBlock >2</TextBlock>
    </TabItem>
</TabControl>

and output from above code is http://prntscr.com/2yc51f

Update

<Style TargetType="TabControl">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="TabStripPlacement" Value="Bottom" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="TabControl">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="50"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <ContentPresenter Grid.ColumnSpan="2" Height="50" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center"  ContentSource="SelectedContent" />
                        <TabPanel Panel.ZIndex="1" Grid.Row="1"  Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" IsItemsHost="True" Background="Transparent" />
                        <ItemsControl Grid.Row="1"  VerticalAlignment="Bottom"  Grid.Column="1">
                            <ItemsControl.ItemContainerStyle>
                                <Style TargetType="FrameworkElement">
                                    <Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
                                    <Setter Property="Height" Value="50"></Setter>
                                </Style>
                            </ItemsControl.ItemContainerStyle>
                            <Button Background="LightGray"  BorderThickness="0">DOMINATES</Button>
                        </ItemsControl>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style TargetType="{x:Type TabItem}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Grid Background="LightCyan"  Height="50">
                        <TextBlock SnapsToDevicePixels="True" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5,0,5,0"  Text="{TemplateBinding Header}" ></TextBlock>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>