ProgrammingFrontendWPF

WPF에서 DataTemplate과 ItemsControl 활용하기

, , , , ,

WPF에서 DataTemplate과 ItemsControl을 활용하는 것은 UI에서 데이터 컬렉션을 효율적으로 표시하는 데 매우 유용합니다. 이를 통해 데이터를 UI에 바인딩하고, 사용자 정의된 템플릿으로 표시할 수 있습니다. 아래에 DataTemplate과 ItemsControl을 사용하는 방법을 단계별로 설명하겠습니다.

1. 기본 개념 이해하기

  • ItemsControl: 컬렉션 데이터를 표시하는 컨트롤입니다. ListBox, ComboBox, ListView 등도 ItemsControl에서 파생된 컨트롤입니다.
  • DataTemplate: 데이터를 표시할 때 사용할 템플릿을 정의합니다. 예를 들어, 데이터가 Person이라는 클래스의 인스턴스라면, DataTemplate을 사용해 이름과 나이를 화면에 표시할 수 있습니다.

2. 기본적인 모델 클래스 생성

먼저, 예제로 사용할 간단한 모델 클래스를 정의하겠습니다. Person이라는 클래스에는 이름과 나이 속성이 있습니다.

1
2
3
4
5
public class Person
{
    public string Name { get; set; }
    public int Age { get; set; }
}

3. XAML에서 ItemsControl과 DataTemplate 정의하기

이제 XAML 파일에서 ItemsControl과 DataTemplate을 정의합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="DataTemplate Example" Height="350" Width="525">

    <Grid>
        <ItemsControl Name="personItemsControl">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" Margin="5">
                        <TextBlock Text="{Binding Name}" FontWeight="Bold" Width="100"/>
                        <TextBlock Text="{Binding Age}" Width="50"/>
                    </StackPanel>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</Window>

4. 코드 비하인드에서 데이터 바인딩

이제, MainWindow.xaml.cs 파일에서 ItemsControl에 데이터를 바인딩합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
using System.Collections.Generic;
using System.Windows;

namespace WpfApp
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            List<Person> people = new List<Person>
            {
                new Person { Name = "John", Age = 30 },
                new Person { Name = "Jane", Age = 25 },
                new Person { Name = "Sam", Age = 40 }
            };

            personItemsControl.ItemsSource = people;
        }
    }
}

5. 실행 결과

위의 코드를 실행하면 ItemsControl이 List<Person>의 데이터를 받아 각 항목을 DataTemplate에 따라 화면에 표시합니다. 각 Person 객체는 이름과 나이로 표시되며, StackPanel로 수평 정렬되어 출력됩니다.

6. 추가적인 커스터마이징

만약 Person 클래스에 추가 속성이 있다면 DataTemplate을 수정하여 더 많은 정보를 표시할 수 있습니다. 예를 들어, 직업을 추가하려면:

1
2
3
4
5
6
public class Person
{
    public string Name { get; set; }
    public int Age { get; set; }
    public string Job { get; set; } // 새로운 속성 추가
}

XAML에서 이를 반영:

1
2
3
4
5
6
7
<DataTemplate>
    <StackPanel Orientation="Horizontal" Margin="5">
        <TextBlock Text="{Binding Name}" FontWeight="Bold" Width="100"/>
        <TextBlock Text="{Binding Age}" Width="50"/>
        <TextBlock Text="{Binding Job}" Width="100"/>
    </StackPanel>
</DataTemplate>

코드 비하인드에서 데이터를 추가:

1
2
3
4
5
6
List<Person> people = new List<Person>
{
    new Person { Name = "John", Age = 30, Job = "Engineer" },
    new Person { Name = "Jane", Age = 25, Job = "Designer" },
    new Person { Name = "Sam", Age = 40, Job = "Manager" }
};

결론

ItemsControl과 DataTemplate을 함께 사용하면 데이터를 유연하고 아름답게 표시할 수 있습니다. 위의 예제에서 보았듯이, 각 데이터 객체는 템플릿을 통해 사용자 정의된 방식으로 표시되며, 매우 직관적이고 강력한 기능을 제공합니다.

Share