[C#/WPF] ItemsControl 엘리먼트 : ItemsPanel/ItemTemplate/ItemContainerStyle/Template 속성을 사용해 스타일 및 템플리트 설정하기

■ ItemsControl 엘리먼트 : ItemsPanel/ItemTemplate/ItemContainerStyle/Template 속성을 사용해 스타일 및 템플리트를 설정하는 방법을 보여준다.

TestProject.zip

0.01MB

▶ TaskType.cs

namespace TestProject
{
    /// <summary>
    /// 작업 타입
    /// </summary>
    public enum TaskType
    {
        /// <summary>
        /// 홈
        /// </summary>
        Home,

        /// <summary>
        /// 작업
        /// </summary>
        Work
    }
}

 

▶ Task.cs

using System.ComponentModel;

namespace TestProject
{
    /// <summary>
    /// 작업
    /// </summary>
    public class Task : INotifyPropertyChanged
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Event
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 속성 변경시 - PropertyChanged

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

        #endregion

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

        #region Field

        /// <summary>
        /// 명칭
        /// </summary>
        private string name;

        /// <summary>
        /// 설명
        /// </summary>
        private string description;

        /// <summary>
        /// 우선 순위
        /// </summary>
        private int priority;

        /// <summary>
        /// 작업 타입
        /// </summary>
        private TaskType type;

        #endregion

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

        #region 명칭 - Name

        /// <summary>
        /// 명칭
        /// </summary>
        public string Name
        {
            get
            {
                return this.name;
            }
            set
            {
                this.name = value;

                FirePropertyChangedEvent("Name");
            }
        }

        #endregion
        #region 설명 - Description

        /// <summary>
        /// 설명
        /// </summary>
        public string Description
        {
            get
            {
                return this.description;
            }
            set
            {
                this.description = value;

                FirePropertyChangedEvent("Description");
            }
        }

        #endregion
        #region 우선 순위 - Priority

        /// <summary>
        /// 우선 순위
        /// </summary>
        public int Priority
        {
            get
            {
                return this.priority;
            }
            set
            {
                this.priority = value;

                FirePropertyChangedEvent("Priority");
            }
        }

        #endregion
        #region 작업 타입 - Type

        /// <summary>
        /// 작업 타입
        /// </summary>
        public TaskType Type
        {
            get
            {
                return this.type;
            }
            set
            {
                this.type = value;

                FirePropertyChangedEvent("Type");
            }
        }

        #endregion

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

        #region 생성자 - Task()

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

        #endregion
        #region 생성자 - Task(name, description, priority, type)

        /// <summary>
        /// 생성자
        /// </summary>
        /// <param name="name">명칭</param>
        /// <param name="description">설명</param>
        /// <param name="priority">우선 순위</param>
        /// <param name="type">작업 타입</param>
        public Task(string name, string description, int priority, TaskType type)
        {
            this.name        = name;
            this.description = description;
            this.priority    = priority;
            this.type        = type;
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 문자열 구하기 - ToString()

        /// <summary>
        /// 문자열 구하기
        /// </summary>
        /// <returns>문자열</returns>
        public override string ToString() => this.name;

        #endregion

        ////////////////////////////////////////////////////////////////////////////////////////// Protected

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

        /// <summary>
        /// 속성 변경시 이벤트 발생시키기
        /// </summary>
        /// <param name="propertyName">속성명</param>
        protected void FirePropertyChangedEvent(string propertyName)
        {
            PropertyChangedEventHandler handler = PropertyChanged;

            handler?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }

        #endregion
    }
}

 

▶ TaskCollection.cs

using System.Collections.ObjectModel;

namespace TestProject
{
    /// <summary>
    /// 작업 컬렉션
    /// </summary>
    public class TaskCollection : ObservableCollection<Task>
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - TaskCollection()

        /// <summary>
        /// 생성자
        /// </summary>
        public TaskCollection()
        {
            Add(new Task("Groceries", "Pick up Groceries and Detergent", 2, TaskType.Home));
            Add(new Task("Laundry"  , "Do my Laundry"                  , 2, TaskType.Home));
            Add(new Task("Email"    , "Email clients"                  , 1, TaskType.Work));
            Add(new Task("Clean"    , "Clean my office"                , 3, TaskType.Work));
            Add(new Task("Dinner"   , "Get ready for family reunion"   , 1, TaskType.Home));
            Add(new Task("Proposals", "Review new budget proposals"    , 2, TaskType.Work));
        }

        #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="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <local:TaskCollection x:Key="TaskCollectionKey" />
    </Window.Resources>
    <ItemsControl
        Margin="10"
        ItemsSource="{Binding Source={StaticResource TaskCollectionKey}}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <DataTemplate.Resources>
                    <Style TargetType="TextBlock">
                        <Setter Property="HorizontalAlignment" Value="Center" />
                        <Setter Property="FontSize"            Value="18"     />
                    </Style>
                </DataTemplate.Resources>
                <Grid>
                    <Ellipse Fill="Silver" />
                    <StackPanel>
                        <TextBlock
                            Margin="3 3 3 0"
                            Text="{Binding Path=Priority}" />
                        <TextBlock
                            Margin="3 0 3 7"
                            Text="{Binding Path=Name}" />
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
        <ItemsControl.ItemContainerStyle>
            <Style>
                <Setter Property="Control.Width"  Value="100" />
                <Setter Property="Control.Margin" Value="5"   />
                <Style.Triggers>
                    <Trigger Property="Control.IsMouseOver" Value="True">
                        <Setter
                            Property="Control.ToolTip"
                            Value="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=Content.Description}" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </ItemsControl.ItemContainerStyle>
        <ItemsControl.Template>
            <ControlTemplate TargetType="ItemsControl">
                <Border
                    CornerRadius="15"
                    BorderThickness="5"
                    BorderBrush="RoyalBlue"
                    Padding="10">
                    <ItemsPresenter />
                </Border>
            </ControlTemplate>
        </ItemsControl.Template>
    </ItemsControl>
</Window>