WPF applying style to TabItems

Question

I have a problem applying style on TabControl TabItem. Here's my code:

<TabControl x:Name="tabControlChart"
    DockPanel.Dock="Top"
    HorizontalAlignment="Stretch"
    VerticalAlignment="Stretch"
    BorderThickness="0"
    Margin="6,0,6,0"
    Width="{Binding Path=ActualWidth, ElementName=vspBlock, Converter={StaticResource SizeReduceConv}, ConverterParameter=140}"
    MinHeight="200"
    BorderBrush="Transparent"                                                                                                                      
    Style="{StaticResource TabControlArtParamStyle}"
    Background="#6f6f6f">
    <TabItem Header="DEFAULT" IsSelected="True" Margin="0"></TabItem>
    <TabControl.Resources>
        <Style TargetType="{x:Type TabItem}">
            <Setter Property="OverridesDefaultStyle" Value="True" />
            <Setter Property="FocusVisualStyle" Value="{StaticResource TabItemFocusVisual}" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="Padding" Value="10,4,10,2" />
            <Setter Property="FontFamily" Value="{StaticResource fntRoboto}" />
            <Setter Property="Typography.Capitals" Value="AllSmallCaps"/>
            <Setter Property="BorderBrush" Value="Transparent" />
            <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}" />
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="VerticalContentAlignment" Value="Stretch" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Grid SnapsToDevicePixels="true">
                            <Border x:Name="Bd" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,0" Padding="{TemplateBinding Padding}" CornerRadius="0,5,0,0">
                                <DockPanel>
                                    <ContentPresenter x:Name="Content" DockPanel.Dock="Left" HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" ContentSource="Header" RecognizesAccessKey="True" />
                                </DockPanel>
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="Panel.ZIndex" Value="999" />
                                <Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemGreyBackground}" />
                                <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource TabControlGreyNormalBorderBrush}" />
                                <Setter Property="BorderThickness" TargetName="Bd" Value="0" />
                                <Setter Property="Margin" TargetName="Bd" Value="1,1,1,0" />
                            </Trigger>
                            <Trigger Property="IsSelected" Value="true">
                                <Setter Property="Panel.ZIndex" Value="999" />
                                <Setter Property="Background" TargetName="Bd" Value="{ StaticResource TabItemGreySelectedBackground}" />
                                <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource TabControlGreyNormalBorderBrush}" />
                                <Setter Property="BorderThickness" TargetName="Bd" Value="0" />
                                <Setter Property="Margin" TargetName="Bd" Value="0,0,0,0" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </TabControl.Resources>
</TabControl>

In this case I added directly in the XAML the TabItem object and it looks good:
Expected result

If I add the TabItems dynamically as:

<TabControl x:Name="tabControlChart"
    DockPanel.Dock="Top"
    HorizontalAlignment="Stretch"
    VerticalAlignment="Stretch"
    BorderThickness="0"
    Margin="6,0,6,0"
    Width="{Binding Path=ActualWidth, ElementName=vspBlock, Converter={StaticResource SizeReduceConv}, ConverterParameter=140}"
    MinHeight="200"
    BorderBrush="Transparent"                                                                                                                      
    ItemsSource="{Binding Path=ArticleTabParams, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=userControls:ViewerArticoli}}"
    ItemTemplate="{StaticResource dttTabItem}"      
    Style="{StaticResource TabControlArtParamStyle}"
    Background="#6f6f6f">
    <TabControl.Resources>
        <Style TargetType="{x:Type TabItem}">
            <Setter Property="OverridesDefaultStyle" Value="True" />
            <Setter Property="FocusVisualStyle" Value="{StaticResource TabItemFocusVisual}" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="Padding" Value="10,4,10,2" />
            <Setter Property="FontFamily" Value="{StaticResource fntRoboto}" />
            <Setter Property="Typography.Capitals" Value="AllSmallCaps"/>
            <Setter Property="BorderBrush" Value="Transparent" />
            <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}" />
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="VerticalContentAlignment" Value="Stretch" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Grid SnapsToDevicePixels="true">
                            <Border x:Name="Bd" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,0" Padding="{TemplateBinding Padding}" CornerRadius="0,5,0,0">
                                <DockPanel>
                                    <ContentPresenter x:Name="Content" DockPanel.Dock="Left" HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" ContentSource="Header" RecognizesAccessKey="True" />
                                </DockPanel>
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="Panel.ZIndex" Value="999" />
                                <Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemGreyBackground}" />
                                <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource TabControlGreyNormalBorderBrush}" />
                                <Setter Property="BorderThickness" TargetName="Bd" Value="0" />
                                <Setter Property="Margin" TargetName="Bd" Value="1,1,1,0" />
                            </Trigger>
                            <Trigger Property="IsSelected" Value="true">
                                <Setter Property="Panel.ZIndex" Value="999" />
                                <Setter Property="Background" TargetName="Bd" Value="{ StaticResource TabItemGreySelectedBackground}" />
                                <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource TabControlGreyNormalBorderBrush}" />
                                <Setter Property="BorderThickness" TargetName="Bd" Value="0" />
                                <Setter Property="Margin" TargetName="Bd" Value="0,0,0,0" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </TabControl.Resources>
</TabControl>

with the following DataTemplate

`<DataTemplate x:Key="dttTabItem">
    <TabItem Header="{Binding Path=Key}"  Margin="0"></TabItem>
</DataTemplate>`

I got this: Wrong result

It's weird, there's something that override my style. Or I'm missing something?

Answer 1

The ItemTemplate is not supposed to contain a TabItem. The control creates a TabItem container for you. Replace it with a TextBlock and it should work as expected:

<DataTemplate x:Key="dttTabItem">
    <TextBlock Text="{Binding Path=Key}" />
</DataTemplate>`