[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 TabControl}">
            <Setter Property="TabStripPlacement" Value="Left"  />
            <Setter Property="Background"        Value="White" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabControl}">
                        <Grid
                            ClipToBounds="True"
                            SnapsToDevicePixels="True"
                            KeyboardNavigation.TabNavigation="Local">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Name="ColumnDefinition0" Width="Auto" />
                                <ColumnDefinition Name="ColumnDefinition1" Width="0"    />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Name="RowDefinition0" Height="Auto" />
                                <RowDefinition Name="RowDefinition1" Height="*"    />
                            </Grid.RowDefinitions>
                            <Border x:Name="HeaderBorder"
                                Margin="0 0 0 5"
                                BorderBrush="Black"
                                BorderThickness="1"
                                CornerRadius="5"
                                Background="#fafafa">
                                <TabPanel Name="HeaderPanel" Grid.Row="0" Grid.Column="0"
                                    IsItemsHost="True"
                                    Panel.ZIndex="1"
                                    KeyboardNavigation.TabIndex="1" />
                            </Border>
                            <Grid Name="ContentPanel" Grid.Row="1" Grid.Column="0"
                                KeyboardNavigation.TabIndex="2"
                                KeyboardNavigation.TabNavigation="Local"
                                KeyboardNavigation.DirectionalNavigation="Contained">
                                <Border
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    CornerRadius="5"
                                    Background="{TemplateBinding Background}">
                                    <ContentPresenter Name="PART_SelectedContentHost"
                                        ContentTemplate="{TemplateBinding SelectedContentTemplate}"
                                        SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}"
                                        Margin="2"
                                        ContentStringFormat="{TemplateBinding SelectedContentStringFormat}"
                                        ContentSource="SelectedContent"
                                        Content="{TemplateBinding SelectedContent}" />
                                </Border>
                            </Grid>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="TabControl.TabStripPlacement" Value="Left">
                                <Setter TargetName="HeaderPanel"       Property="Grid.Row"                Value="0"       />
                                <Setter TargetName="ContentPanel"      Property="Grid.Row"                Value="0"       />
                                <Setter TargetName="HeaderPanel"       Property="Grid.Column"             Value="0"       />
                                <Setter TargetName="ContentPanel"      Property="Grid.Column"             Value="1"       />
                                <Setter TargetName="ColumnDefinition0" Property="ColumnDefinition.Width"  Value="Auto"    />
                                <Setter TargetName="ColumnDefinition1" Property="ColumnDefinition.Width"  Value="*"       />
                                <Setter TargetName="RowDefinition0"    Property="RowDefinition.Height"    Value="*"       />
                                <Setter TargetName="RowDefinition1"    Property="RowDefinition.Height"    Value="0"       />
                                <Setter TargetName="HeaderBorder"      Property="FrameworkElement.Margin" Value="0 0 5 0" />
                            </Trigger>
                            <Trigger Property="TabControl.TabStripPlacement" Value="Right">
                                <Setter TargetName="HeaderPanel"       Property="Grid.Row"                Value="0"       />
                                <Setter TargetName="ContentPanel"      Property="Grid.Row"                Value="0"       />
                                <Setter TargetName="HeaderPanel"       Property="Grid.Column"             Value="1"       />
                                <Setter TargetName="ContentPanel"      Property="Grid.Column"             Value="0"       />
                                <Setter TargetName="ColumnDefinition0" Property="ColumnDefinition.Width"  Value="*"       />
                                <Setter TargetName="ColumnDefinition1" Property="ColumnDefinition.Width"  Value="Auto"    />
                                <Setter TargetName="RowDefinition0"    Property="RowDefinition.Height"    Value="*"       />
                                <Setter TargetName="RowDefinition1"    Property="RowDefinition.Height"    Value="0"       />
                                <Setter TargetName="HeaderBorder"      Property="FrameworkElement.Margin" Value="5 0 0 0" />
                            </Trigger>
                            <Trigger Property="TabControl.TabStripPlacement" Value="Bottom">
                                <Setter TargetName="HeaderPanel"    Property="Grid.Row"                Value="1"       />
                                <Setter TargetName="ContentPanel"   Property="Grid.Row"                Value="0"       />
                                <Setter TargetName="RowDefinition0" Property="RowDefinition.Height"    Value="*"       />
                                <Setter TargetName="RowDefinition1" Property="RowDefinition.Height"    Value="Auto"    />
                                <Setter TargetName="HeaderBorder"   Property="FrameworkElement.Margin" Value="0 5 0 0" />
                            </Trigger>
                            <Trigger Property="UIElement.IsEnabled" Value="False">
                                <Setter
                                    Property="TextElement.Foreground"
                                    Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
                            </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>