[C#/WPF] ControlTemplate 엘리먼트 : 아이콘 헤더 TabItem 엘리먼트 정의하기

■ ControlTemplate 엘리먼트를 사용해 아이콘 헤더를 갖는 TabItem 엘리먼트를 정의하는 방법을 보여준다.

TestProject.zip

다운로드

▶ TabHeader.cs

using System.ComponentModel;
using System.Windows.Media;

namespace TestProject
{
    /// <summary>
    /// 탭 헤더
    /// </summary>
    public class TabHeader : INotifyPropertyChanged
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Event
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 속성 변경시 이벤트 - PropertyChanged

        /// <summary>
        /// 속성 변경시 이벤트
        /// </summary>
        public event PropertyChangedEventHandler PropertyChanged;

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Field
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Field

        /// <summary>
        /// 제목
        /// <summary>
        private string title;

        /// <summary>
        /// 이미지 소스
        /// <summary>
        private ImageSource imageSource;

        /// <summary>
        /// 선택 이미지 소스
        /// <summary>
        private ImageSource selectedImageSource;

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 제목 - Title

        /// <summary>
        /// 제목
        /// </summary>
        public string Title
        {
            get
            {
                return this.title;
            }
            set
            {
                if(this.title == value)
                {
                    return;
                }

                this.title = value;

                FirePropertyChangedEvent(nameof(Title));
            }
        }

        #endregion
        #region 이미지 소스 - ImageSource

        /// <summary>
        /// 이미지 소스
        /// </summary>
        public ImageSource ImageSource
        {
            get
            {
                return this.imageSource;
            }
            set
            {
                if(this.imageSource == value)
                {
                    return;
                }

                this.imageSource = value;

                FirePropertyChangedEvent(nameof(ImageSource));
            }
        }

        #endregion
        #region 선택 이미지 소스 - SelectedImageSource

        /// <summary>
        /// 선택 이미지 소스
        /// </summary>
        public ImageSource SelectedImageSource
        {
            get
            {
                return this.selectedImageSource ?? this.imageSource;
            }
            set
            {
                if(this.selectedImageSource == value)
                {
                    return;
                }

                this.selectedImageSource = value;

                FirePropertyChangedEvent(nameof(SelectedImageSource));
            }
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Protected

        #region 속성 변경시 이벤트 발생시키기 - FirePropertyChangedEvent(propertyName)

        /// <summary>
        /// 속성 변경시 이벤트 발생시키기
        /// </summary>
        /// <param name="propertyName">속성명</param>
        protected void FirePropertyChangedEvent(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }

        #endregion
    }
}

 

▶ 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"
    xmlns:local="clr-namespace:TestProject"
    Width="800"
    Height="600"
    Title="ControlTemplate 엘리먼트 : 아이콘 헤더 TabItem 엘리먼트 정의하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <Style TargetType="TabItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TabItem">
                        <StackPanel
                            Orientation="Vertical"
                            Cursor="Hand">
                            <ContentPresenter
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Margin="10 2"
                                ContentSource="Header" />
                            <TextBlock Name="bottomBarTextBlock"
                                Height="5"
                                Background="Gold" />
                        </StackPanel>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter
                                    TargetName="bottomBarTextBlock"
                                    Property="Background"
                                    Value="Green" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="HeaderTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Grid HorizontalAlignment="Stretch">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="1*" />
                                <ColumnDefinition Width="5*" />
                            </Grid.ColumnDefinitions>
                            <Border Grid.Column="0"
                                Background="{Binding Foreground, RelativeSource={RelativeSource AncestorType=TabItem}}">
                                <Image Name="image"
                                    Height="32"
                                    Source="{Binding ImageSource}" />
                            </Border>
                            <TextBlock Grid.Column="1"
                                VerticalAlignment="Center"
                                Margin="5 0 0 0"
                                Foreground="{Binding Foreground, RelativeSource={RelativeSource AncestorType=TabItem}}"
                                FontWeight="Bold"
                                FontSize="18"
                                Text="{Binding Title}" />
                        </Grid>
                        <DataTemplate.Triggers>
                            <DataTrigger
                                Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=TabItem}}"
                                Value="True">
                                <Setter
                                    TargetName="image"
                                    Property="Source"
                                    Value="{Binding SelectedImageSource}" />
                            </DataTrigger>
                        </DataTemplate.Triggers>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Foreground" Value="Green" />
                </Trigger>
                <Trigger Property="IsSelected" Value="False">
                    <Setter Property="Foreground" Value="Gray" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid Margin="10">
        <TabControl
            HorizontalAlignment="Stretch"
            TabStripPlacement="Top">
            <TabItem>
                <TabItem.Header>
                    <local:TabHeader
                        Title="테스트"
                        ImageSource="IMAGE/sample1.png"
                        SelectedImageSource="IMAGE/sample2.png" />
                </TabItem.Header>
            </TabItem>
            <TabItem>
                <TabItem.Header>
                    <local:TabHeader
                        Title="테스트"
                        ImageSource="IMAGE/sample1.png"
                        SelectedImageSource="IMAGE/sample2.png" />
                </TabItem.Header>
            </TabItem>
            <TabItem>
                <TabItem.Header>
                    <local:TabHeader
                        Title="테스트"
                        ImageSource="IMAGE/sample1.png"
                        SelectedImageSource="IMAGE/sample2.png" />
                </TabItem.Header>
            </TabItem>
        </TabControl>
    </Grid>
</Window>