[C#/WPF] ControlTemplate 엘리먼트 : 사각형 탭 헤더를 갖는 TabControl 엘리먼트 정의하기

■ ControlTemplate 엘리먼트를 사용해 사각형 탭 헤더를 갖는 TabControl 엘리먼트를 정의하는 방법을 보여준다.

TestProject.zip

다운로드

▶ MainWindow.xaml

<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="ControlTemplate 엘리먼트 : 사각형 탭 헤더를 갖는 TabControl 엘리먼트 정의하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <Style TargetType="{x:Type TabItem}">
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Border x:Name="PART_Border"
                            Margin="2"
                            BorderBrush="LightGray"
                            BorderThickness="1"
                            Background="{TemplateBinding Background}">
                            <ContentPresenter
                                Margin="10 5 10 5"
                                ContentSource="Header" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter
                                    TargetName="PART_Border"
                                    Property="BorderBrush"
                                    Value="Black" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid Margin="10">
        <TabControl>
            <TabItem Header="탭 헤더 1">
                <TextBlock
                    Margin="10"
                    Text="탭 헤더 1 내용 입니다." />
            </TabItem>
            <TabItem Header="탭 헤더 2">
                <TextBlock
                    Margin="10"
                    Text="탭 헤더 2 내용 입니다." />
            </TabItem>
            <TabItem Header="탭 헤더 3">
                <TextBlock
                    Margin="10"
                    Text="탭 헤더 3 내용 입니다." />
            </TabItem>
        </TabControl>
    </Grid>
</Window>