c# wpf TabItem selecting not fully working

Question

I have custom header style for TabItem:

<Style TargetType="{x:Type TabItem}" x:Key="purpleTab">
        <Setter Property="Background" Value="#E5E5E5"/>
        <Setter Property="Width" Value="97"/>
        <Setter Property="Height" Value="70"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="Margin" Value="0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="TabItem">
                    <Border Name="Border" BorderThickness="0,0,0,2" BorderBrush="#E5E5E5">
                        <ContentPresenter x:Name="ContentSite"
                                    VerticalAlignment="Center"
                                    HorizontalAlignment="Center"
                                    ContentSource="Header" Width="97" Height="66"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter TargetName="Border" Property="BorderBrush" Value="#1F1F1F" />
                        </Trigger>
                        <Trigger Property="IsSelected" Value="False">
                            <Setter TargetName="Border" Property="BorderBrush" Value="#E5E5E5" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

And my TabItem looks like this:

<TabItem x:Name="AccTabItem"
     Style="{DynamicResource purpleTab}">
<TabItem.Header>
    <StackPanel Orientation="Vertical">
        <Image Height="30" Width="30" Margin="0 10 0 0"
               Source="{Binding IsSelected, ElementName=AccTabItem, 
            Converter={StaticResource IsSelectedToIconSourceConverter}, 
            ConverterParameter=ac}"/>
        <TextBlock Text="{DynamicResource Account}" FontSize="12" Margin="0 6 0 0" 
                   Foreground="{Binding IsSelected, ElementName=AccTabItem, 
            Converter={StaticResource IsSelectedToForegroundColor}}"  HorizontalAlignment="Center"/>
    </StackPanel>
</TabItem.Header>
<view:UserSettingsView/>
</TabItem>

My problem is that when I click over the image or the text(in the tab header) it selects the tab fine but it is not selecting in the rest of the tab header area. How can I set selecting to work out of the image and text elements(to work for whole header area)?

Answer 1

Add for example a transparent Background to the Border in your Style:

<Border Name="Border" BorderThickness="0,0,0,2" BorderBrush="#E5E5E5" Background="Transparent">

By default the Background is set to {x:Null}