31
1.
WPF(Windows Presentation Foundation)에서 목록 컨트롤은 여러 항목을 화면에 표시하고, 사용자가 항목을 선택할 수 있도록 하는 UI 요소입니다. 목록 컨트롤은 데이터 바인딩을 지원하여 동적으로 데이터를 표시할 수 있고, 항목의 스타일과 템플릿을 커스터마이징할 수 있습니다.
주요 목록 컨트롤 종류 및 설명
- ListBox:
- 여러 항목을 세로로 나열하여 표시하며, 단일 또는 다중 선택을 지원합니다.
- 단순한 리스트를 보여줄 때 유용합니다.
- ComboBox:
- 드롭다운 형태로 항목을 표시하며, 하나의 항목만 선택할 수 있습니다.
- 사용자가 선택한 항목을 표시하는 입력 필드와 옵션 리스트로 구성됩니다.
- ListView:
ListBox
와 비슷하지만,GridView
와 함께 사용하여 항목을 테이블 형태로 표시할 수 있습니다.- 다양한 데이터 형식의 항목을 표 형태로 시각화할 때 적합합니다.
- DataGrid:
- 데이터를 테이블 형식으로 표시하며, 항목의 편집, 정렬, 필터링 기능을 제공합니다.
- 복잡한 데이터 구조를 표시하거나 편집할 때 사용됩니다.
활용 예시 및 코드
ListView
를 사용하여 사용자 목록을 표시하고, 선택된 사용자의 세부 정보를 표시하는 예시를 소개하겠습니다.
1. MainWindow.xaml
(XAML 코드)
<Window x:Class="WpfApp241113.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
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>
: 데이터 소스 역할을 하며ListView
에 바인딩됩니다. 데이터 변경 시 UI가 자동으로 업데이트됩니다.SelectedUser
프로퍼티: 사용자가 선택한 항목을 저장하며, UI에서 해당 항목의 세부 정보를 표시할 수 있도록 합니다.INotifyPropertyChanged
:SelectedUser
가 변경될 때 UI가 업데이트되도록PropertyChanged
이벤트를 구현합니다.DataContext
:MainWindow
의DataContext
로 설정되어 XAML에서 바인딩할 수 있습니다.
실행 결과
ListView
에는 사용자 목록이 표시됩니다.- 목록에서 항목을 클릭하면 선택된 사용자의 세부 정보(이름, 이메일, 전화번호)가 아래에 표시됩니다.
이 코드는 WPF에서 목록 컨트롤을 사용하여 사용자 목록을 표시하고, 선택된 사용자의 세부 정보를 동적으로 보여주는 방법을 보여줍니다.