WPF - 템플릿(Template)

WPF에서 템플릿(Template)은 UI 요소의 모양과 구조를 정의하고, 기본 스타일을 변경하거나 재사용 가능한 구성 요소를 만들기 위해 사용된다. WPF에서 템플릿은 크게 ControlTemplate과 DataTemplate 두 가지로 나뉜다.

1. ControlTemplate

• 컨트롤의 기본 구조와 시각적 모양을 변경할 때 사용한다.
• 기존 컨트롤의 기능을 유지하면서 외형을 완전히 재정의할 수 있다.

ControlTemplate 기본 구조

<ControlTemplate x:Key="TemplateKey" TargetType="Button">
    <Border Background="LightBlue" BorderBrush="Blue" BorderThickness="2">
        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Border>
</ControlTemplate>

ControlTemplate 적용

1. XAML에서 템플릿 정의:

   <Window.Resources>
       <ControlTemplate x:Key="CustomButtonTemplate" TargetType="Button">
           <Border Background="LightBlue" BorderBrush="Blue" BorderThickness="2">
               <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
           </Border>
       </ControlTemplate>
   </Window.Resources>

2. 컨트롤에 적용:

   <Button Template="{StaticResource CustomButtonTemplate}" Width="100" Height="50">
       Click Me
   </Button>

2. DataTemplate

• 데이터 항목의 시각적 표현을 정의하는 데 사용한다.
• 주로 데이터 바인딩과 함께 사용되며, ItemsControl, ListBox, ComboBox 등에서 항목의 모양을 재정의할 때 활용.

DataTemplate 기본 구조

<DataTemplate x:Key="CustomItemTemplate">
    <StackPanel Orientation="Horizontal">
        <TextBlock Text="{Binding Name}" FontWeight="Bold" Margin="5"/>
        <TextBlock Text="{Binding Age}" Margin="5"/>
    </StackPanel>
</DataTemplate>

DataTemplate 적용

1. XAML에서 템플릿 정의:

   <Window.Resources>
       <DataTemplate x:Key="CustomItemTemplate">
           <StackPanel Orientation="Horizontal">
               <TextBlock Text="{Binding Name}" FontWeight="Bold" Margin="5"/>
               <TextBlock Text="{Binding Age}" Margin="5"/>
           </StackPanel>
       </DataTemplate>
   </Window.Resources>

2. 컨트롤에 적용:

   <ListBox ItemTemplate="{StaticResource CustomItemTemplate}" ItemsSource="{Binding People}"/>

3. 예제 데이터 바인딩:

   public class Person
   {
       public string Name { get; set; }
       public int Age { get; set; }
   }
   
   public MainWindow()
   {
       InitializeComponent();
       DataContext = new
       {
           People = new List<Person>
           {
               new Person { Name = "Alice", Age = 30 },
               new Person { Name = "Bob", Age = 25 }
           }
       };
   }

3. HierarchicalDataTemplate

• 계층 구조 데이터의 시각적 표현을 정의.
• 주로 TreeView와 함께 사용된다.

HierarchicalDataTemplate 기본 구조

<HierarchicalDataTemplate DataType="{x:Type local:Category}" ItemsSource="{Binding Products}">
    <TextBlock Text="{Binding Name}" FontWeight="Bold"/>
</HierarchicalDataTemplate>

HierarchicalDataTemplate 적용

1. XAML에서 템플릿 정의:

   <Window.Resources>
       <HierarchicalDataTemplate DataType="{x:Type local:Category}" ItemsSource="{Binding Products}">
           <TextBlock Text="{Binding Name}" FontWeight="Bold"/>
       </HierarchicalDataTemplate>
   </Window.Resources>

2. TreeView에 데이터 바인딩:

   <TreeView ItemsSource="{Binding Categories}"/>

3. C# 계층 데이터 예제:

   public class Category
   {
       public string Name { get; set; }
       public List<Product> Products { get; set; }
   }
   
   public class Product
   {
       public string Name { get; set; }
   }
   
   public MainWindow()
   {
       InitializeComponent();
       DataContext = new
       {
           Categories = new List<Category>
           {
               new Category
               {
                   Name = "Fruits",
                   Products = new List<Product>
                   {
                       new Product { Name = "Apple" },
                       new Product { Name = "Banana" }
                   }
               },
               new Category
               {
                   Name = "Vegetables",
                   Products = new List<Product>
                   {
                       new Product { Name = "Carrot" },
                       new Product { Name = "Potato" }
                   }
               }
           }
       };
   }

4. ItemsPanelTemplate

• 컨트롤의 항목을 배치하는 패널을 재정의.
• 기본적으로 ItemsControl 계열 컨트롤은 StackPanel을 사용하지만, 변경이 가능하다.

ItemsPanelTemplate 기본 구조

<ItemsPanelTemplate x:Key="WrapPanelTemplate">
    <WrapPanel/>
</ItemsPanelTemplate>

ItemsPanelTemplate 적용

1. XAML에서 템플릿 정의:

   <Window.Resources>
       <ItemsPanelTemplate x:Key="WrapPanelTemplate">
           <WrapPanel/>
       </ItemsPanelTemplate>
   </Window.Resources>

2. 컨트롤에 적용:

   <ListBox ItemsPanel="{StaticResource WrapPanelTemplate}" ItemsSource="{Binding Items}"/>

템플릿 정리

템플릿 유형	용도	주요 사용 컨트롤
ControlTemplate	컨트롤의 외형 재정의	Button, ComboBox 등
DataTemplate	데이터 항목의 시각적 표현 정의	ListBox, ComboBox 등
HierarchicalDataTemplate	계층 구조 데이터 시각화	TreeView
ItemsPanelTemplate	항목 배치를 위한 패널 정의	ItemsControl 계열 컨트롤