WPF 강좌, ItemsControl, ListBox, DataGrid 등 리스트 컨트롤 사용하기

윈도우 프레젠테이션 파운드이션(WPF)은 마이크로소프트에서 개발한 데스크탑 애플리케이션을 위한 UI 프레임워크입니다. WPF에서는 다양한 사용자 인터페이스 요소를 사용하여, 복잡한 애플리케이션의 UI를 구성할 수 있습니다. 이번 강좌에서는 WPF의 리스트 컨트롤에 대해서 깊이 있게 살펴보겠습니다. 리스트 컨트롤은 주로 여러 항목을 나열하고 사용자와의 상호작용을 가능하게 하는 UI 구성 요소입니다. ItemsControl, ListBox, DataGrid와 같은 리스트 컨트롤을 중심으로 설명하겠습니다.

1. WPF 리스트 컨트롤 소개

리스트 컨트롤은 사용자에게 여러 항목을 보여주고 선택할 수 있도록 하는 UI 구성 요소입니다. WPF에서는 여러 가지 종류의 리스트 컨트롤을 제공합니다. 여기에는 ItemsControl, ListBox, ComboBox, DataGrid 등이 포함됩니다.

ItemsControl: 가장 기본적인 리스트 컨트롤로, 단순히 항목들을 나열합니다. 항목이 선택되는 기능은 없습니다.
ListBox: 항목을 나열하고, 사용자가 항목을 선택할 수 있도록 하는 컨트롤입니다. 다중 선택이 가능합니다.
ComboBox: 드롭다운 형태의 리스트로, 목록에서 항목을 선택할 수 있습니다.
DataGrid: 데이터 형식의 항목을 표와 같은 형태로 보여주는 컨트롤입니다. 데이터 바인딩과 편집 기능을 지원합니다.

2. ItemsControl 이해하기

ItemsControl은 항목을 나열할 수 있는 기본 컨트롤입니다. 이 컨트롤은 항목의 시각적 표현을 정의하지 않기 때문에, 개발자가 필요한 방식을 정의해야 합니다. ItemsControl은 그리드, 플로우, 혹은 갑판 형태로 항목들을 나열할 수 있는 유연성을 제공합니다.

2.1. ItemsControl 사용하기

ItemsControl을 사용하기 위해서는 XAML로 컨트롤을 정의하고, 항목을 채우기 위한 데이터 소스와 연결해야 합니다. 다음은 ItemsControl을 사용한 간단한 예제입니다:

<ItemsControl x:Name="MyItemsControl">
    <ItemsControl.Items>
        <TextBlock Text="Item 1" />
        <TextBlock Text="Item 2" />
        <TextBlock Text="Item 3" />
    </ItemsControl.Items>
</ItemsControl>

위의 예제에서는 ItemsControl에 세 개의 TextBlock 항목을 추가했습니다. ItemsControl은 기본적으로 항목들의 시각적 표현을 제공하지 않으므로, 우리는 각 항목을 TextBlock으로 감쌉니다.

2.2. 아이템 템플릿 사용하기

ItemsControl의 진정한 강점은 ItemTemplate을 사용하여 각 항목의 표시 방식을 정의할 수 있다는 점입니다. ItemTemplate을 사용하면 각 항목을 복잡한 UI 요소로 표시할 수 있습니다.

<ItemsControl x:Name="MyItemsControl">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="{Binding Name}" />
                <TextBlock Text="{Binding Description}" />
            <StackPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

위의 코드에서는 ItemTemplate을 사용하여 각 항목에 대한 이름과 설명을 포함하는 StackPanel을 정의했습니다. 데이터 바인딩을 통해 각 항목의 속성에 접근합니다.

3. ListBox의 사용

ListBox는 사용자가 항목을 선택할 수 있도록 해주는 리스트 컨트롤입니다. ListBox는 다중 선택을 지원하며, 항목에 대한 각종 이벤트와 커스터마이징을 잘 지원합니다.

3.1. ListBox 기본 사용법

ListBox를 사용하면 사용자가 선택할 수 있는 항목 리스트를 제공할 수 있습니다. 기본적인 ListBox의 사용 예시는 다음과 같습니다:

<ListBox x:Name="MyListBox">
    <ListBoxItem Content="Option 1" />
    <ListBoxItem Content="Option 2" />
    <ListBoxItem Content="Option 3" />
</ListBox>

위의 코드는 세 개의 항목을 포함하는 ListBox를 생성합니다. 사용자는 이 중 하나의 항목을 선택할 수 있습니다.

3.2. 데이터 바인딩을 통한 ListBox 구성

ListBox는 데이터 바인딩을 통해 동적으로 항목을 구성할 수 있습니다. 다음은 리스트에 데이터를 바인딩하는 예시입니다:

<ListBox x:Name="MyListBox" ItemsSource="{Binding MyItems}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Name}" />
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

여기서 MyItems는 ViewModel에서 제공하는 컬렉션입니다. ListBox는 이 컬렉션에서 항목들을 가져와서 자동으로 표시합니다.

3.3. ListBox 이벤트 처리

ListBox에서는 다양한 사용자 상호 작용을 감지하는 이벤트를 처리할 수 있습니다. 예를 들어, 사용자가 항목을 선택했을 때 발생하는 SelectionChanged 이벤트를 처리할 수 있습니다:

<ListBox x:Name="MyListBox" SelectionChanged="MyListBox_SelectionChanged">
    <ListBoxItem Content="Option 1" />
    <ListBoxItem Content="Option 2" />
</ListBox>

private void MyListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    var selectedItem = MyListBox.SelectedItem as ListBoxItem;
    MessageBox.Show($"Selected: {selectedItem.Content}");
}

위의 코드에서는 사용자가 ListBox에서 선택을 변경할 때마다 선택된 항목의 내용을 메시지 박스로 표시합니다.

4. ComboBox 사용하기

ComboBox는 드롭다운 형식의 리스트로, 사용자는 목록을 클릭하여 항목을 선택할 수 있습니다.

4.1. ComboBox 기본 사용법

ComboBox는 ListBox와 유사하지만, 항상 모든 항목을 표시하지 않고, 필요할 때 드롭다운 메뉴로 나타납니다. 기본적인 사용법은 다음과 같습니다:

<ComboBox x:Name="MyComboBox">
    <ComboBoxItem Content="Choice 1" />
    <ComboBoxItem Content="Choice 2" />
    <ComboBoxItem Content="Choice 3" />
</ComboBox>

이 코드는 세 개의 선택 항목을 포함하는 ComboBox를 생성합니다.

4.2. 데이터 바인딩을 통한 ComboBox 구성

ComboBox 역시 데이터 바인딩을 통해 데이터에 기반하여 동적으로 구성될 수 있습니다:

<ComboBox x:Name="MyComboBox" ItemsSource="{Binding MyChoices}" SelectedItem="{Binding SelectedChoice}" />

여기서 MyChoices는 ViewModel의 컬렉션이며, SelectedChoice는 사용자가 선택한 항목을 바인딩하기 위한 속성입니다.

5. DataGrid 사용하기

DataGrid는 데이터 목록을 표 형태로 보여주는 컨트롤입니다. WPF의 데이터 바인딩 기능을 잘 활용할 수 있는 강력한 컨트롤입니다.

5.1. DataGrid 기본 사용법

DataGrid는 데이터 항목을 열과 행으로 배치하여 보여줍니다. 가장 간단한 형태의 DataGrid 사용 예시는 다음과 같습니다:

<DataGrid x:Name="MyDataGrid">
    <DataGrid.Columns>
        <DataGridTextColumn Header="Name" Binding="{Binding Name}" />
        <DataGridTextColumn Header="Age" Binding="{Binding Age}" />
    </DataGrid.Columns>
</DataGrid>

이 예제에서는 두 개의 열(이름과 나이)을 가진 DataGrid를 생성합니다.

5.2. 데이터 바인딩을 통한 DataGrid 구성

DataGrid는 데이터 바인딩을 통해 복잡한 데이터 집합을 손쉽게 표시할 수 있습니다:

<DataGrid x:Name="MyDataGrid" ItemsSource="{Binding MyPeople}" AutoGenerateColumns="False">
    <DataGrid.Columns>
        <DataGridTextColumn Header="Name" Binding="{Binding Name}" />
        <DataGridTextColumn Header="Age" Binding="{Binding Age}" />
    </DataGrid.Columns>
</DataGrid>

여기서 MyPeople는 ViewModel의 컬렉션입니다. AutoGenerateColumns를 false로 설정하면 자동으로 열이 생성되지 않고, 정의한 열만 표시됩니다.

5.3. DataGrid의 편집 기능

DataGrid는 기본적으로 사용자가 데이터를 쉽게 편집할 수 있게 합니다. 사용자는 셀을 클릭하여 데이터를 변경할 수 있습니다. 다음은 DataGrid에서 데이터 바인딩을 위한 예제입니다:

private void Button_Click(object sender, RoutedEventArgs e)
{
    MyPeople.Add(new Person { Name = "New Person", Age = 30 });
}

이 버튼 클릭 이벤트는 MyPeople 컬렉션에 새로운 사람을 추가합니다. DataGrid는 자동으로 갱신되어 새로운 데이터를 리스트에 표시합니다.

6. 결론

이번 강좌에서는 WPF에서 리스트 컨트롤인 ItemsControl, ListBox, ComboBox, DataGrid에 대해 자세히 살펴보았습니다. 각 컨트롤의 기본 사용법, 데이터 바인딩, 이벤트 처리 및 커스터마이징 방법을 이해하는 것이 매우 중요합니다. 데이터 기반의 현대적인 애플리케이션에서는 이러한 리스트 컨트롤들이 필수적인 요소가 됩니다. 이러한 요소들을 잘 활용하여 사용자에게 직관적이고 편리한 UI를 제공하는 것이 목표입니다.

여러분의 WPF 개발 여정에 도움이 되었기를 바랍니다. 추가적으로 WPF의 다양한 컨트롤과 그 활용 방법에 대해 계속해서 학습하시길 권장합니다.