WPF DataTemplate과 ControlTemplate ItemsPanelTemplate

1.DataTemplate: DataTemplate은 데이터 개체의 시각적 표현을 정의하는 데 사용되는 템플릿입니다.목록이나 그리드에 항목 모음을 표시하는 것과 같이 특정 형식으로 데이터를 표시하는 데 사용됩니다. DataTemplate은 일반적으로 ListBox 또는 ListView와 같은 ItemsControl과 함께 사용되어 컨트롤의 각 항목 모양을 정의합니다.

 

2.ControlTemplate: ControlTemplate은 컨트롤의 모양과 동작을 정의하는 데 사용됩니다. 레이아웃, 테두리, 배경 및 기타 시각적 요소와 같은 컨트롤의 구조 및 시각적 모양을 정의합니다. ControlTemplate은 Button 또는 CheckBox와 같이 Control에서 파생되는 컨트롤과 함께 사용됩니다.

3.ItemsPanelTemplate: ItemsPanelTemplate은 ItemsControl의 항목을 포함하는 패널을 정의하는 데 사용됩니다. 가로 또는 세로 스택 패널, 그리드 또는 캔버스와 같은 항목의 레이아웃을 정의합니다.

요약하면 DataTemplate은 데이터 개체의 시각적 모양을 정의하는 데 사용되고 ControlTemplate은 컨트롤의 모양과 동작을 정의하는 데 사용되며 ItemsPanelTemplate은 ItemsControl에 있는 항목의 레이아웃을 정의하는 데 사용됩니다.

DataTemplate

datatemplate를 통해 화면에 content를 표시하는 예제 입니다.

xaml 
<Window x:Class="MvvmTest.WinDatatTemplate"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:MvvmTest"
        mc:Ignorable="d"
        Title="WinDatatTemplate" Height="450" Width="800">
    <Window.Resources>
        <local:Customer x:Key="customer"/>
    </Window.Resources>
    <ContentControl Content="{StaticResource customer}"/>
</Window>

이때 표준 출력 방식이 ToString()으로 되기 때문에 override해서 출력 방식을 재정의 해줍니다.

    class Customer
    {
        public string Name { get; set; } = "테스트";
        public string Address { get; set; } = "테스트주소";

        public override string ToString()
        {
            return Name+ " " + Address; 
        }
    }

실행 화면

 

ControlTemplate

ControlTemplate로 control의 디자인을 재정의하여 사용해 보겠습니다.

<Window x:Class="MvvmTest.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:MvvmTest"
        mc:Ignorable="d"
        Title="Window1" Height="450" Width="800"
        Background="AliceBlue">
    <Window.Resources>
        <ControlTemplate TargetType="Button" 
                         x:Key="btn">
            <Grid>
            <Ellipse Fill="Pink"/>
            </Grid>
        </ControlTemplate>
    </Window.Resources>
    <Button Template="{Binding Source={StaticResource btn}}"/>
</Window>

출력화면

ItemsPanelTemplate

ItemsPanelTemplate로 listbox의 출력 방식을 가로로 변경하겠습니다.

<Window x:Class="MvvmTest.Window2"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:MvvmTest"
        mc:Ignorable="d"
        Title="Window2" Height="450" Width="800">
    <ListBox>
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>        
        <ListBoxItem Content="테스트"/>
        <ListBoxItem Content="테스트"/>
        <ListBoxItem Content="테스트2"/>
        <ListBoxItem Content="테스트3"/>
    </ListBox>
</Window>

출력 화면