첨부 실행 코드는 나눔고딕코딩 폰트를 사용합니다.
유용한 소스 코드가 있으면 icodebroker@naver.com으로 보내주시면 감사합니다.
블로그 자료는 자유롭게 사용하세요.

728x90
반응형

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

 

------------------------------------------------------------------------------------------------------------------------

728x90
반응형
Posted by 사용자 icodebroker
TAG , ,

댓글을 달아 주세요