Windows Presentation Foundation(WPF)은 강력하고 유연한 GUI 애플리케이션 개발 프레임워크입니다. WPF는 데이터 바인딩, 스타일 및 템플릿, 고급 그래픽 및 유연한 레이아웃 시스템을 지원하여 생산성과 사용자 경험을 향상시킵니다. 이번 글에서는 WPF에서 목록 컨트롤을 사용하여 컬렉션을 표시하는 방법에 대해 알아보겠습니다. 특히, ListBox, ComboBox, DataGrid와 같은 컨트롤을 중심으로 살펴보고 예제를 통해 실습해 보겠습니다.
WPF의 목록 컨트롤 소개
WPF에서 목록 컨트롤은 사용자에게 데이터를 표시하고 상호작용할 수 있는 방법을 제공합니다. 다양한 종류의 목록 컨트롤이 있으며 각기 다른 특성과 사용 사례를 가지고 있습니다. 여기서는 세 가지 주요 목록 컨트롤을 자세히 살펴보겠습니다.
1. ListBox
ListBox는 여러 항목을 보여주며 사용자가 항목을 선택할 수 있게 해주는 컨트롤입니다. 여러 선택 모드를 지원하며 리스트 항목에 다양한 스타일과 템플릿을 적용할 수 있습니다. ListBox는 일반적인 목록을 표시하거나 항목을 선택하는데 유용합니다.
ListBox 예제
<Window x:Class="WpfApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="ListBox Example" Height="350" Width="525">
<Grid>
<ListBox Name="PersonsListBox" Width="200" Height="300"
SelectionChanged="PersonsListBox_SelectionChanged">
<ListBoxItem>Alice</ListBoxItem>
<ListBoxItem>Bob</ListBoxItem>
<ListBoxItem>Charlie</ListBoxItem>
<ListBoxItem>Diana</ListBoxItem>
</ListBox>
<TextBlock Name="SelectedPersonTextBlock" VerticalAlignment="Top"
Margin="220,10,0,0"/>
</Grid>
</Window>위의 예제에서는 ListBox 컨트롤을 사용하여 몇 개의 인물 이름을 표시합니다. 사용자가 항목을 선택할 때마다 선택된 인물의 이름이 TextBlock에 표시됩니다. 이를 위해 SelectionChanged 이벤트를 활용합니다.
using System.Windows;
namespace WpfApp
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void PersonsListBox_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
{
if (PersonsListBox.SelectedItem != null)
{
SelectedPersonTextBlock.Text = "Selected Person: " + PersonsListBox.SelectedItem.ToString();
}
}
}
}
2. ComboBox
ComboBox는 드롭다운 목록을 제공하며 사용자가 선택할 수 있는 항목 목록을 표시합니다. ListBox와 비슷하지만 기본적으로 하나의 값만 표시하며 사용자에게 공간을 절약할 수 있는 장점이 있습니다. ComboBox는 선택 가능 항목이 많은 경우 유용하게 사용됩니다.
ComboBox 예제
<Window x:Class="WpfApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="ComboBox Example" Height="300" Width="400">
<Grid>
<ComboBox Name="FruitsComboBox" Margin="10" SelectionChanged="FruitsComboBox_SelectionChanged">
<ComboBoxItem>Apple</ComboBoxItem>
<ComboBoxItem>Banana</ComboBoxItem>
<ComboBoxItem>Cherry</ComboBoxItem>
<ComboBoxItem>Date</ComboBoxItem>
</ComboBox>
<TextBlock Name="SelectedFruitTextBlock" VerticalAlignment="Bottom" Margin="10"/>
</Grid>
</Window>위 예제에서는 ComboBox를 사용하여 과일 목록을 표시하고, 선택한 과일의 이름을 TextBlock에 업데이트합니다. 사용자가 ComboBox에서 항목을 선택하면 SelectionChanged 이벤트가 트리거 되어 선택한 값을 표시합니다.
using System.Windows;
namespace WpfApp
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void FruitsComboBox_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
{
if (FruitsComboBox.SelectedItem != null)
{
SelectedFruitTextBlock.Text = "Selected Fruit: " + FruitsComboBox.SelectedItem.ToString();
}
}
}
}
3. DataGrid
DataGrid는 데이터 항목의 목록을 테이블 형식으로 표시하는 데 사용됩니다. DataGrid는 대량의 데이터를 쉽게 편집하고 표시할 수 있도록 해주며, 컬럼 헤더, 정렬, 필터링, 페이징 등의 기능을 제공합니다.
DataGrid 예제
<Window x:Class="WpfApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="DataGrid Example" Height="350" Width="525">
<Grid>
<DataGrid Name="PersonsDataGrid" AutoGenerateColumns="False">
<DataGrid.Columns>
<DataGridTextColumn Header="Name" Binding="{Binding Name}" Width="*"/>
<DataGridTextColumn Header="Age" Binding="{Binding Age}" Width="*"/>
</DataGrid.Columns>
</DataGrid>
</Grid>
</Window>위의 예제에서는 DataGrid를 사용하여 인물의 이름과 나이를 테이블 형식으로 표시합니다. AutoGenerateColumns를 false로 설정하여 컬럼을 수동으로 정의하고 데이터를 바인딩할 수 있습니다.
using System.Collections.Generic;
using System.Windows;
namespace WpfApp
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
List persons = new List
{
new Person { Name = "Alice", Age = 30 },
new Person { Name = "Bob", Age = 25 },
new Person { Name = "Charlie", Age = 35 },
new Person { Name = "Diana", Age = 28 }
};
PersonsDataGrid.ItemsSource = persons;
}
}
public class Person
{
public string Name { get; set; }
public int Age { get; set; }
}
}
컬렉션과 데이터 바인딩
WPF에서 데이터 바인딩은 UI와 데이터를 연결하는 매우 강력한 기능입니다. 데이터 바인딩을 사용하면 UI 요소의 속성과 데이터 소스의 속성을 연결할 수 있으며, UI가 데이터의 변경 사항을 자동으로 반영하게 됩니다. 이를 통해 수동적으로 UI를 업데이트하지 않아도 되며, 코드의 복잡성을 줄일 수 있습니다.
컬렉션을 보유한 객체처럼 모델 클래스와 UI 컨트롤을 쉽게 바인딩할 수 있습니다. 다음은 ObservableCollection을 사용하여 데이터를 바인딩하는 예제입니다.
using System.Collections.ObjectModel;
using System.Windows;
namespace WpfApp
{
public partial class MainWindow : Window
{
public ObservableCollection Persons { get; set; }
public MainWindow()
{
InitializeComponent();
Persons = new ObservableCollection
{
new Person { Name = "Alice", Age = 30 },
new Person { Name = "Bob", Age = 25 },
new Person { Name = "Charlie", Age = 35 },
new Person { Name = "Diana", Age = 28 }
};
PersonsDataGrid.ItemsSource = Persons;
}
}
public class Person
{
public string Name { get; set; }
public int Age { get; set; }
}
}
ObservableCollection은 변경 통지를 자동으로 처리하여 UI가 데이터의 변경 사항을 실시간으로 반영할 수 있도록 해줍니다. 항목이 추가되거나 제거될 때 UI가 자동으로 업데이트됩니다.
정리 및 결론
이번 글에서는 WPF에서 목록 컨트롤을 사용하여 컬렉션을 표시하는 방법에 대해 알아보았습니다. ListBox, ComboBox, DataGrid와 같은 다양한 목록 컨트롤을 통해 데이터를 사용자에게 보여주고 상호작용할 수 있는 기회를 제공할 수 있습니다. 데이터 바인딩을 통해 UI와 데이터를 쉽게 연결할 수 있으며, 이를 통해 간편하게 애플리케이션을 개발할 수 있습니다.
WPF의 강력한 기능을 활용하여 더욱 풍부하고 유연한 사용자 인터페이스를 개발하시기 바랍니다. 추가적인 질문이나 도움이 필요하신 경우 언제든지 문의주시기 바랍니다.