TabItem headers not responding to mouse, only on text

Question

I have a WPF TabControl with four TabItems and applied a custom Style to both the TabControl and the TabItems as follows:

<Style TargetType="TabControl" x:Key="TabControlStyle">
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="TabStripPlacement" Value="Left" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TabControl">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>

                    <!-- The container for tab item headers -->
                    <TabPanel 
                         Grid.Column="0"
                         Panel.ZIndex="1" 
                         Margin="0,0,4,-1" 
                         IsItemsHost="True"
                         Background="Transparent" />

                    <!-- Shadow to the left of the tab pages -->
                    <Border Grid.Column="0" Width="5" HorizontalAlignment="Right">
                        <Border.Background>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                                <GradientStop Offset="0" Color="Transparent" />
                                <GradientStop Offset="1" Color="{StaticResource ShadowGray}" /> 
                            </LinearGradientBrush>
                        </Border.Background>
                    </Border>

                    <!-- Tab page -->
                    <Border Grid.Column="1" 
                            Background="White" 
                            SnapsToDevicePixels="true"
                            BorderThickness="1" 
                            BorderBrush="{StaticResource HeaderBlueBrush}">
                        <ContentPresenter ContentSource="SelectedContent" />    
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style TargetType="{x:Type TabItem}" x:Key="TabItemStyle">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabItem}">

                <!-- Tab item header -->
                <Border Name="border" 
                        SnapsToDevicePixels="True" 
                        BorderThickness="0" 
                        Padding="5,8,40,8"
                        Margin="0,0,-4,0">
                    <TextBlock Name="buttonText" 
                                Margin="0" 
                                FontSize="14" 
                                Foreground="{StaticResource FontDarkGrayBrush}" 
                                Text="{TemplateBinding Header}" 
                                VerticalAlignment="Center" />
                </Border>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Trigger.Setters>
                            <Setter TargetName="border" Property="Background" Value="{StaticResource HoverBlueBrush}" />
                       </Trigger.Setters>
                    </Trigger>
                    <Trigger Property="IsSelected" Value="True">
                        <Trigger.Setters>
                            <Setter TargetName="border" Property="Background" Value="{StaticResource SelectionBlueBrush}" />
                            <Setter TargetName="buttonText" Property="Foreground" Value="White"/>
                        </Trigger.Setters>
                    </Trigger>

                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

As you can see, the tab item headers consist of a Border (which gets a different color when the mouse is hovering over it or when it is selected) and in that Border there's a TextBlock that displays the Header title. Simple enough I guess.

The problem is that the headers don't react properly to mouse input. Basically: I have to hover / click on the actual text (TextBlock I'm guessing) before they react. If I click to the right of the text, nothing happens. Same for hovering. However, when I am already hovering over the text of one header (so it gets the 'hovering color') and then move the mouse to the right of the text (where it would usually not react), then the hovering color remains and does not go away until I actually leave the Border.

Here's an image to clarify it:

What is causing this behavior? I am assuming it is not normal, it's quite annoying because the TabControl does not react the way people expect it to.

I tried 'reversing' the Margin/Padding of the Border/TextBlock combo (make the space by giving the TextBlock a Margin, rather than giving the Border any Padding), but that doesn't change anything.

Help?

Answer 1

The background of the border in your tab item template must be non empty. Otherwise is the border invisible for mouse interactions. Transparent is OK too.

<Border Name="border" Background="Transparent" ...