38
1.
2.
WPF(Windows Presentation Foundation)에서 목록 컨트롤은 데이터를 화면에 표시하고 사용자와 상호작용할 수 있도록 하는 컨트롤을 말합니다. 대표적인 WPF의 목록 컨트롤에는 ListBox, ComboBox, DataGrid, ListView 등이 있습니다. 이러한 컨트롤은 데이터 바인딩을 지원하며, 다양한 스타일과 템플릿을 통해 사용자 정의 UI를 구현할 수 있습니다.
주요 목록 컨트롤 설명
- ListBox:여러 항목을 리스트 형태로 표시하며, 선택된 항목에 대한 이벤트 처리가 가능합니다.주로 다중 선택이 필요한 경우나 항목을 나열할 때 사용됩니다.예시:
<ListBox Name="myListBox" SelectionMode="Multiple">
<ListBoxItem Content="Apple" />
<ListBoxItem Content="Banana" />
<ListBoxItem Content="Cherry" />
</ListBox>ComboBox
- 드롭다운 형태로 선택 가능한 항목을 표시하며, 항목 중 하나만 선택할 수 있습니다.
- 데이터 소스 바인딩 및 커스터마이징이 용이하여 다양한 입력 형태를 제공할 때 사용됩니다.
예시:
<ComboBox Name="myComboBox" SelectedIndex="0">
<ComboBoxItem Content="Option 1" />
<ComboBoxItem Content="Option 2" />
<ComboBoxItem Content="Option 3" />
</ComboBox>DataGrid
- 테이블 형식으로 데이터를 표시하며, 데이터 편집, 정렬, 필터링 기능을 제공합니다.
- 많은 데이터를 행과 열로 정리해서 보여줘야 할 때 사용됩니다.
예시:
<DataGrid Name="myDataGrid" AutoGenerateColumns="True" ItemsSource="{Binding MyDataCollection}" />ListView
ListBox와 유사하지만, 보다 고급 기능을 제공하며 다양한 레이아웃을 설정할 수 있습니다.- 항목을 그리드 형식으로도 표시할 수 있어 커스터마이징된 목록 보기 구현에 적합합니다.
예시:
<ListView Name="myListView">
<ListView.View>
<GridView>
<GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}" Width="100" />
<GridViewColumn Header="Age" DisplayMemberBinding="{Binding Age}" Width="50" />
</GridView>
</ListView.View>
</ListView>활용 예시
다음은 주어진 XAML 예제를 포함한 전체 WPF 코드입니다. 이 코드는 사용자 목록을 표시하고, 선택된 사용자의 세부 정보를 표시하는 기능을 제공합니다.
1. MainWindow.xaml
<Window x:Class="WpfApp241113.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApp241113"
Title="User List Example" Height="400" Width="600">
<StackPanel>
<ListView Name="userListView" ItemsSource="{Binding UserList}" SelectedItem="{Binding SelectedUser, Mode=TwoWay}">
<ListView.View>
<GridView>
<GridViewColumn Header="ID" DisplayMemberBinding="{Binding ID}" Width="50" />
<GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}" Width="150" />
<GridViewColumn Header="Email" DisplayMemberBinding="{Binding Email}" Width="200" />
</GridView>
</ListView.View>
</ListView>
<TextBlock Text="Selected User Details:" FontWeight="Bold" Margin="10,20,0,0" />
<StackPanel DataContext="{Binding SelectedUser}">
<TextBlock Text="Name: " />
<TextBlock Text="{Binding Name}" />
<TextBlock Text="Email: " />
<TextBlock Text="{Binding Email}" />
<TextBlock Text="Phone: " />
<TextBlock Text="{Binding Phone}" />
</StackPanel>
</StackPanel>
</Window>
2. MainWindow.xaml.cs
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Windows;
namespace WpfApp241113
{
public partial class MainWindow : Window, INotifyPropertyChanged
{
private User _selectedUser;
public ObservableCollection<User> UserList { get; set; }
public User SelectedUser
{
get => _selectedUser;
set
{
_selectedUser = value;
OnPropertyChanged();
}
}
public MainWindow()
{
InitializeComponent();
UserList = new ObservableCollection<User>
{
new User { ID = 1, Name = "John Doe", Email = "john.doe@example.com", Phone = "123-456-7890" },
new User { ID = 2, Name = "Jane Smith", Email = "jane.smith@example.com", Phone = "098-765-4321" },
new User { ID = 3, Name = "Bob Johnson", Email = "bob.johnson@example.com", Phone = "555-123-4567" }
};
DataContext = this;
}
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
public class User
{
public int ID { get; set; }
public string Name { get; set; }
public string Email { get; set; }
public string Phone { get; set; }
}
}실행 결과
설명
ObservableCollection<User>:UserList는 사용자 목록을 보유하며ListView의ItemsSource에 바인딩됩니다.SelectedUser프로퍼티: 선택된 사용자 항목을 저장하며, UI에서 항목을 선택할 때SelectedItem과 바인딩됩니다.INotifyPropertyChanged:SelectedUser가 변경될 때 UI가 이를 감지하고 업데이트할 수 있도록PropertyChanged이벤트를 구현합니다.DataContext:MainWindow의DataContext로 설정되어 XAML에서 바인딩할 수 있습니다.
실행 결과
ListView에는 사용자 목록이 표시되고, 항목을 클릭하면 선택된 사용자의 이름, 이메일, 전화번호가 TextBlock에 표시됩니다.
