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

#はじめに
[以前の記事](https://qiita.com/mkuwan/items/55801df75a66d9868902)でTabControlのヘッダー部分を変更するコードを紹介しました。
以前紹介したコードは以下の通り

```C#
        <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を

```C#
Background="{TemplateBinding Background}" 
```
としてみました。

#問題発生　文字以外のところをクリックしても反応しない
すると、以前のコードではタブをクリックすれば、きちんと反応していたのに、文字の外側部分をクリックしても反応しなくなってしまいました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/956246/0134c0b4-4f53-0ecb-8ad7-09cf07b87263.png)
図のカーソル部分をクリックしても何も反応しません・・・

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

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

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

```C#
<ContentPresenter x:Name="contentPresenter" 
                  VerticalAlignment="Center"
                  HorizontalAlignment="Center"
                  ContentSource="Header" 
                  Margin="10,0" />
```
となっていたところを以下のように変更しました

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

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