Custom tab item only gets clicked if click on image or text

Question

I'm creating a tabcontrol with custom tabitems which each consists of image and text. I removed borders so only active tab has bottom border. But now the problem is that tab only gets clicked if I click on image or text. (Nothing happens when clicking other empty space in Tab item)

I've styled it like this:

<TabControl.Resources>
            <Style TargetType="TabItem">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="TabItem">
                            <Border Name="Border" BorderThickness="0" BorderBrush="#8bc53f" Margin="2,0">
                                <ContentPresenter x:Name="ContentSite"
                                    VerticalAlignment="Center"
                                    HorizontalAlignment="Center"
                                    ContentSource="Header"
                                    Margin="8,2"/>
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsSelected" Value="True">
                                    <Setter TargetName="Border" Property="BorderThickness" Value="0 0 0 3" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
</TabControl.Resources>

I want to be able to click anywhere inside tab header area to open it.

Answer 1

Set the background of the border named "Border" to Transparent, that way it will make it HitTest visible.