[C#/WPF] ControlTemplate 엘리먼트 : 조직도 TreeViewItem 엘리먼트 정의하기

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

TestProject.zip

다운로드

▶ Node.cs

using System.Collections.Generic;

namespace TestProject
{
    /// <summary>
    /// 노드
    /// </summary>
    public class Node
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Field
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Field

        /// <summary>
        /// 텍스트
        /// </summary>
        private string text;

        /// <summary>
        /// 자식 노드 리스트
        /// </summary>
        private List<Node> childNodeList;

        #endregion

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

        #region 텍스트 - Text

        /// <summary>
        /// 텍스트
        /// </summary>
        public string Text
        {
            get
            {
                return this.text;
            }
            set
            {
                this.text = value;
            }
        }

        #endregion
        #region 자식 노드 리스트 - ChildNodeList

        /// <summary>
        /// 자식 노드 리스트
        /// </summary>
        public List<Node> ChildNodeList
        {
            get
            {
                if(this.childNodeList == null)
                {
                    this.childNodeList = new List<Node>();
                }

                return this.childNodeList;
            }
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - Node()

        /// <summary>
        /// 생성자
        /// </summary>
        public Node()
        {
        }

        #endregion
        #region 생성자 - Node(text)

        /// <summary>
        /// 생성자
        /// </summary>
        /// <param name="text">텍스트</param>
        public Node(string text)
        {
            this.text = text;
        }

        #endregion
    }
}

 

▶ CustomDictionary.xaml

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style TargetType="TreeViewItem">
        <Style.Resources>
            <LinearGradientBrush x:Key="ItemAreaLinearGradientBrushKey"
                StartPoint="0.5 0"
                EndPoint="0.5 1">
                <GradientStop Color="#66000000" Offset="0" />
                <GradientStop Color="#22000000" Offset="1" />
            </LinearGradientBrush>
            <LinearGradientBrush x:Key="SelectedItemAreaLinearGradientBrushKey"
                StartPoint="0.5 0"
                EndPoint="0.5 1">
                <GradientStop Color="Orange"    Offset="0" />
                <GradientStop Color="OrangeRed" Offset="1" />
            </LinearGradientBrush>
            <LinearGradientBrush x:Key="ItemBorderLinearGradientBrushKey"
                StartPoint="0.5 0"
                EndPoint="0.5 1">
                <GradientStop Color="LightGray" Offset="0" />
                <GradientStop Color="Gray"      Offset="1" />
            </LinearGradientBrush>
            <LinearGradientBrush x:Key="SelectedItemBorderLinearGradientBrushKey"
                StartPoint="0.5 0"
                EndPoint="0.5 1">
                <GradientStop Color="Yellow" Offset="0" />
                <GradientStop Color="Black"  Offset="1" />
            </LinearGradientBrush>
            <DropShadowBitmapEffect x:Key="DropShadowBitmapEffectKey" />
        </Style.Resources>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="TreeViewItem">
                    <Grid Margin="1">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*"    />
                        </Grid.RowDefinitions>
                        <Border Name="border"
                            Background="{StaticResource ItemAreaLinearGradientBrushKey}"
                            BorderBrush="{StaticResource ItemBorderLinearGradientBrushKey}"
                            BorderThickness="0.6"
                            CornerRadius="8"
                            Padding="3">
                            <ContentPresenter Name="PART_Header"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                ContentSource="Header" />
                        </Border>
                        <ItemsPresenter Grid.Row="1" />
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter
                                TargetName="border"
                                Property="Panel.Background"
                                Value="{StaticResource SelectedItemAreaLinearGradientBrushKey}" />
                            <Setter
                                TargetName="border"
                                Property="Border.BorderBrush"
                                Value="{StaticResource SelectedItemBorderLinearGradientBrushKey}" />
                            <Setter
                                TargetName="border"
                                Property="TextElement.Foreground"
                                Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" />
                            <Setter
                                TargetName="border"
                                Property="Border.BitmapEffect"
                                Value="{StaticResource DropShadowBitmapEffectKey}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <StackPanel
                        HorizontalAlignment="Center"
                        Margin="4 6"
                        Orientation="Horizontal"
                        IsItemsHost="True" />
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

 

▶ 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"
    WindowStartupLocation="CenterScreen"
    Width="800"
    Height="600"
    Title="ControlTemplate 엘리먼트 : 조직도 TreeViewItem 엘리먼트 정의하기"
    FontSize="16">
    <TreeView Name="treeView">
        <TreeView.Resources>
            <ResourceDictionary>
                <ResourceDictionary.MergedDictionaries>
                    <ResourceDictionary Source="CustomDictionary.xaml" />
                </ResourceDictionary.MergedDictionaries>
                <HierarchicalDataTemplate
                    DataType="{x:Type local:Node}"
                    ItemsSource="{Binding ChildNodeList}">
                    <TextBlock Text="{Binding Text}" />
                </HierarchicalDataTemplate>
            </ResourceDictionary>
        </TreeView.Resources>
        <TreeView.ItemsPanel>
            <ItemsPanelTemplate>
                <Grid HorizontalAlignment="Center" IsItemsHost="True" />
            </ItemsPanelTemplate>
        </TreeView.ItemsPanel>
    </TreeView>
</Window>

 

▶ MainWindow.xaml.cs

using System.Windows;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Consturctor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

        /// <summary>
        /// 생성자
        /// </summary>
        public MainWindow()
        {
            InitializeComponent();

            Loaded += Window_Loaded;
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Private
        //////////////////////////////////////////////////////////////////////////////// Event

        #region 윈도우 로드시 처리하기 - Window_Loaded(sender, e)

        /// <summary>
        /// 윈도우 로드시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            PopulateTreeView();
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////// Function

        #region 트리 뷰 구축하기 - PopulateTreeView()

        /// <summary>
        /// 트리 뷰 구축하기
        /// </summary>
        private void PopulateTreeView()
        {
            Node rootNode = new Node("부모");

            int nodeCount = 1;

            for(int i = 0; i < 2; i++)
            {
                Node childNode = new Node("노드 " + nodeCount++);

                rootNode.ChildNodeList.Add(childNode);

                for(int j = 0; j < 3; j++)
                {
                    Node grandChildNode = new Node("노드" + nodeCount++);

                    childNode.ChildNodeList.Add(grandChildNode);

                    for(int k = 0; k < 2; k++)
                    {
                        grandChildNode.ChildNodeList.Add(new Node("노드" + nodeCount++));
                    }
                }
            }

            Node dummyNode = new Node();

            dummyNode.ChildNodeList.Add(rootNode);

            this.treeView.ItemsSource = dummyNode.ChildNodeList;
        }

        #endregion
    }
}