TabItemのControlTemplateを指定した際に、文字以外の部分をクリックしても反応しない

はじめに

以前の記事でTabControlのヘッダー部分を変更するコードを紹介しました。
以前紹介したコードは以下の通り

        <Style x:Key="SampleItem3" TargetType="{x:Type TabItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Grid SnapsToDevicePixels="true">
                            <Border x:Name="mainBorder" 
                                    BorderThickness="1,1,1,0" 
                                    Background="{TemplateBinding Background}" 
                                    BorderBrush="{TemplateBinding BorderBrush}" 
                                    CornerRadius="0,10,0,0" 
                                    Margin="0">
                                <Border x:Name="innerBorder" 
                                        Background="#FFFFFF" 
                                        BorderThickness="1,1,1,0" 
                                        BorderBrush="#ACACAC" 
                                        CornerRadius="0,10,0,0" 
                                        Margin="-1" 
                                        Opacity="0"/>
                            </Border>
                            <ContentPresenter x:Name="contentPresenter" 
                                              VerticalAlignment="Center"
                                              HorizontalAlignment="Center"
                                              ContentSource="Header" 
                                              Margin="10,0" />
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter Property="Margin" Value="-2,-2,-2,0"/>
                                <Setter Property="Opacity" TargetName="innerBorder" Value="1"/>
                                <Setter Property="BorderThickness" TargetName="innerBorder" Value="1,1,1,0"/>
                                <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,1,1,0"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

その後、Darkモードにも対応しようと思い、innerBorderのBackgroundを

Background="{TemplateBinding Background}" 

としてみました。

問題発生　文字以外のところをクリックしても反応しない

すると、以前のコードではタブをクリックすれば、きちんと反応していたのに、文字の外側部分をクリックしても反応しなくなってしまいました。

図のカーソル部分をクリックしても何も反応しません・・・

たぶんなのですが、Background="{TemplateBinding Background}" としたことで、以前はBorder内が色付けされていたのが透明色になったみたいで、反応しなくなったようでした。
言い換えれば、Backgroundを色付けすればいいということになります。

でも、Darkモードに対応することを考えると、色付けはしたくないな～と思い、他に解決方法ないかなと探しました。

解決方法

これが正しい正解なのかは不安ですが、色付けしなくてもうまく動作したので紹介します。
とてもシンプルなのですが、ContentPresenter のところにLabelを使用して、その中にContentPresenterを指定するという方法です。

<ContentPresenter x:Name="contentPresenter" 
                  VerticalAlignment="Center"
                  HorizontalAlignment="Center"
                  ContentSource="Header" 
                  Margin="10,0" />

となっていたところを以下のように変更しました

    <Label HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0">
        <ContentPresenter x:Name="contentPresenter"
                            ContentSource="Header" />
    </Label>

これで、TabItemのクリックをLabelコントロールが拾ってくれるので、うまく動作しました。
他にも方法があるのかもしれませんが、数日間検討したり、調べたりしながら、ようやく見つけたので、うれしくて記事にしました(笑)