개시하다

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>

이후 다크 모드에 대응하기 위해 inner Border의 Back ground를

Background="{TemplateBinding Background}" 

해봤어.

클릭 문제 문자 이외에도 반응이 없다

그래서 이전 코드에서 라벨을 클릭하면 분명히 좋은 반응이 있었지만 문자의 바깥쪽을 클릭하면 반응이 없었다.

그림의 커서 부분을 클릭해도 아무런 반응이 없다
아마 백그라운드="{TemplateBinding Background}"때문일 거예요. 예전에는 Border 안에 있는 색이 투명색이어서 반응이 없었어요.
다시 말해 백그라운드를 색칠하면 된다.
하지만 다크 모드에 대응하면 색칠을 하기 싫어 다른 해결책을 찾으려고 한다.

해결책

이게 정답인지 모르겠지만 색칠을 안 해도 동작이 좋으니 소개해 드리겠습니다.
매우 간단한 방법은 Contentesenter에서 Label을 사용하고 그 중에서 ContentProcenter를 지정하는 것이다.

<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>

이렇게 되면 레이블 컨트롤이 탭아이템의 클릭을 주워서 동작이 좋다.
다른 방법도 있을지 몰라도 며칠간의 토론과 조사 끝에 찾아낸 거라 기분 좋게 기사를 썼다(웃음)