Datatemplate for Tabitem doesn't cover all the tabitem space (WPF Tabcontrol)

Question

i have a datatemplate for a tabitem in a tab control. The datatemplate doesn't cover all the Tabitem control, the beckground is a gray or white, control default color.

enter image description here

The Datatemplate of the TabItem:

<DataTemplate x:Key="ClosableTabItemTemplate">
            <Border BorderThickness="1" BorderBrush="Transparent" CornerRadius="4">
                <!--Border to make the tab item gap from the content-->
                <Border x:Name="InsideBorder" BorderThickness="3" BorderBrush="#D6EAFF" CornerRadius="4">
                    <!--Border for the rounded corners-->
                    <!--TabItem Content Grid-->
                    <Grid x:Name="tabItemGrid" ShowGridLines="True" Margin="0" Background="#D6EAFF">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="25"/>
                            <!--Icon Column-->
                            <ColumnDefinition Width="1*"/>
                            <!--Title Column-->
                            <ColumnDefinition Width="20"/>
                            <!--Close Button Column-->
                        </Grid.ColumnDefinitions>

                        <!--Icon of tab Item-->
                        <Image Grid.Column="0" Grid.Row="1" Height="18" HorizontalAlignment="Left" Source="Images/tab1.jpg"/>

                        <!--Title of tab Item-->
                        <Label Name="TabText" Grid.Column="1" Grid.Row="1" Content="TabItem"  Height="23"  HorizontalAlignment="Left" 
                                           Margin="4,1,0,0"  VerticalAlignment="Top" FontFamily="Courier" FontSize="12" />

                        <!--Close button of tab Item-->
                        <Button Style="{DynamicResource TabButton}"
                                            Name="button_close" Content="x"
                                            Command="{Binding Path=CloseCommand}"
                                            Grid.Column="2" Grid.Row="1" 
                                            Height="20" Width="20" 
                                            Margin="0,0,0,2" VerticalAlignment="Center" HorizontalAlignment="Right"
                                            FontFamily="Courier" FontStretch="Normal" FontWeight="Bold" FontSize="14" 
                                            Visibility="Visible" ToolTip="Close" 
                                            BorderBrush="Transparent" BorderThickness="0" Background="Transparent" Padding="0,0,0,0"
                                            >
                        </Button>
                    </Grid>
                </Border>
            </Border>



            <DataTemplate.Triggers>

                <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type TabItem}},Path=IsSelected}" Value="True">
                    <Setter TargetName="tabItemGrid" Property="Background" Value="#D6EAFF" />
                </DataTrigger>

                <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type TabItem}},Path=IsSelected}" Value="False">
                    <!--<Trigger Property="IsSelected"  Value="False">-->
                    <Setter TargetName="InsideBorder" Property="BorderBrush">
                        <Setter.Value>
                            <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                <GradientStop Color="#FFCCCCD0" />
                                <GradientStop Color="#FF526593" Offset="1" />
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                    <Setter TargetName="tabItemGrid" Property="Background">
                        <Setter.Value>
                            <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                <GradientStop Color="#FFCCCCD0" />
                                <GradientStop Color="#FF526593" Offset="1" />
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                </DataTrigger>
                <!--</Trigger>-->
            </DataTemplate.Triggers>
        </DataTemplate>

The Tabcontrol:

<TabControl Name="MainTabCtrl"  Margin="0" Padding="0" BorderThickness="0" Background="Transparent"
                        IsSynchronizedWithCurrentItem="True"
                        ItemsSource="{Binding Path=TabViewModels}" 
                        ItemTemplate="{StaticResource ClosableTabItemTemplate}">

when the Xaml code of the tabitem wasn't inside a DataTemplate it worked fine - the "Transparent" of the first border did the job and no gray/white background appeared. but when i moved the code inside a DataTemplate the gray background appeared.

How do i make the background of the tabitem transparent?

I added HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" to the tabcontrol, it only narrows the gray area a bit but it still exsits.

The DataTemplate is only the definition of how the content of the tabitem will look like. The Container, in this case the TabItem might contain other controls with margin and padding on its own, which can't be changed with the template. To modify this try to alter the ItemsContainerStyle. Remember: The container should contain the settings and the visual appearence of all the Items, regardless the content; The template contains only the difference between these items. — dowhilefor
tried it now. i set the tabcontrol : "ItemContainerStyle="{StaticResource ContainerStyle}" then i created a style of TabItem type and set the background to transparent, but now the background is only transparent when the item is not selected. The item that is selected the backgound stays white and when i point the mouse on the unselected tab it shows blue default color instead of the transparent background. added style.triggers but they are ignored by the above default colors. i'll post another question with pictures. thanks for the help. — Rodniko
i posted another ,more detailed, question :stackoverflow.com/questions/9002729/… — Rodniko

hival hival · Accepted Answer · 2012-01-25T10:50:08

Try to set Padding for TabItems to zero.

Datatemplate for Tabitem doesn't cover all the tabitem space (WPF Tabcontrol)

1 Answers