[C#/WPF] ControlTemplate 엘리먼트 : TabControl 엘리먼트 정의하기

■ ControlTemplate 엘리먼트를 사용해 TabControl 엘리먼트를 정의하는 방법을 보여준다.

TestProject.zip

0.01MB

▶ 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="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <Color x:Key="ContentAreaLightColorKey">#ffc5cbf9</Color>
        <Color x:Key="ContentAreaDarkColorKey">#ff7381f9</Color>
        <Color x:Key="DisabledControlDarkColorKey">#ffc5cbf9</Color>
        <Color x:Key="ControlLightColorKey">White</Color>
        <Color x:Key="ControlMediumColorKey">#ff7381f9</Color>
        <Color x:Key="ControlPressedColorKey">#ff211aa9</Color>
        <Color x:Key="BorderMediumColorKey">#ff888888</Color>
        <Color x:Key="DisabledBorderLightColorKey">#ffaaaaaa</Color>
        <Style TargetType="{x:Type TabControl}">
            <Setter Property="OverridesDefaultStyle" Value="True" />
            <Setter Property="SnapsToDevicePixels"   Value="True" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabControl}">
                        <Grid KeyboardNavigation.TabNavigation="Local">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="*"    />
                            </Grid.RowDefinitions>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup Name="CommonStates">
                                    <VisualState Name="Disabled">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="border"
                                                Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="#ffaaaaaa" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <TabPanel Name="headerTabPanel" Grid.Row="0"
                                Panel.ZIndex="1"
                                Margin="0 0 4 -1"
                                IsItemsHost="True"
                                KeyboardNavigation.TabIndex="1"
                                Background="Transparent" />
                            <Border Name="border" Grid.Row="1"
                                CornerRadius="2"
                                BorderThickness="1"
                                KeyboardNavigation.TabNavigation="Local"
                                KeyboardNavigation.DirectionalNavigation="Contained"
                                KeyboardNavigation.TabIndex="2">
                                <Border.Background>
                                    <LinearGradientBrush
                                        StartPoint="0.5 0"
                                        EndPoint="0.5 1">
                                        <GradientStop Offset="0" Color="{DynamicResource ContentAreaLightColorKey}" />
                                        <GradientStop Offset="1" Color="{DynamicResource ContentAreaDarkColorKey}"  />
                                    </LinearGradientBrush>
                                </Border.Background>
                                <Border.BorderBrush>
                                    <SolidColorBrush Color="{DynamicResource BorderMediumColorKey}" />
                                </Border.BorderBrush>
                                <ContentPresenter Name="PART_SelectedContentHost"
                                    Margin="4"
                                    ContentSource="SelectedContent" />
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style TargetType="{x:Type TabItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Grid Name="rootGrid">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup Name="SelectionStates">
                                    <VisualState Name="Unselected" />
                                    <VisualState Name="Selected">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="border"
                                                Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlPressedColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                            <ThicknessAnimationUsingKeyFrames
                                                Storyboard.TargetName="border"
                                                Storyboard.TargetProperty="(Border.BorderThickness)">
                                                <EasingThicknessKeyFrame KeyTime="0" Value="1 1 1 0" />
                                            </ThicknessAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup Name="CommonStates">
                                    <VisualState Name="Normal" />
                                    <VisualState Name="MouseOver" />
                                    <VisualState Name="Disabled">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="border"
                                                Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource DisabledControlDarkColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="border"
                                                Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource DisabledBorderLightColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border Name="border"
                                Margin="0 0 -4 0"
                                CornerRadius="2 12 0 0"
                                BorderThickness="1 1 1 1">
                                <Border.BorderBrush>
                                    <SolidColorBrush Color="{DynamicResource BorderMediumColorKey}" />
                                </Border.BorderBrush>
                                <Border.Background>
                                    <LinearGradientBrush
                                        StartPoint="0 0"
                                        EndPoint="0 1">
                                        <LinearGradientBrush.GradientStops>
                                            <GradientStopCollection>
                                                <GradientStop Offset="0.0" Color="{DynamicResource ControlLightColorKey}"  />
                                                <GradientStop Offset="1.0" Color="{DynamicResource ControlMediumColorKey}" />
                                            </GradientStopCollection>
                                        </LinearGradientBrush.GradientStops>
                                    </LinearGradientBrush>
                                </Border.Background>
                                <ContentPresenter Name="contentPresenter"
                                    VerticalAlignment="Center"
                                    HorizontalAlignment="Center"
                                    Margin="12 2 12 2"
                                    RecognizesAccessKey="True"
                                    ContentSource="Header" />
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter Property="Panel.ZIndex" Value="100" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <TabControl
        Width="500"
        Height="500"
        TabStripPlacement="Top">
        <TabItem Header="적색">
            <Grid Background="Red">
                <TextBlock
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Foreground="White"
                    FontWeight="Bold"
                    FontSize="24"
                    Text="적색 탭 입니다." />
            </Grid>
        </TabItem>
        <TabItem Header="녹색">
            <Grid Background="Green">
                <TextBlock
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Foreground="White"
                    FontWeight="Bold"
                    FontSize="24"
                    Text="녹색 탭 입니다." />
            </Grid>
        </TabItem>
        <TabItem Header="청색">
            <Grid Background="Blue">
                <TextBlock
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Foreground="White"
                    FontWeight="Bold"
                    FontSize="24"
                    Text="청색 탭 입니다." />
            </Grid>
        </TabItem>
    </TabControl>
</Window>