WPF ListView 바인딩 실습

WPF의 ListView는 대량의 데이터를 표 형식으로 표시하고 관리하는 데 최적화된 컨트롤이다.

MVVM 패턴에서 ObservableCollection과 연동하여 실시간 데이터 동기화를 구현하는 방법을 정리한다.

ViewModel 구성

데이터의 추가/삭제가 UI에 즉시 반영되도록 ObservableCollection을 사용한다.

using System.Collections.ObjectModel;

public class UserViewModel : INotifyPropertyChanged
{
    // 실시간 동기화 컬렉션
    public ObservableCollection<User> Users { get; set; }

    private User _selectedUser;
    public User SelectedUser
    {
        get => _selectedUser;
        set { _selectedUser = value; OnPropertyChanged(); }
    }

    public UserViewModel()
    {
        Users = new ObservableCollection<User>
        {
            new User { Name = "Kim", Email = "kim@test.com", Age = 20 },
            new User { Name = "Lee", Email = "lee@test.com", Age = 25 }
        };
    }
}

XAML 레이아웃 정의

GridView를 사용하여 열(Column)을 정의하고 각 속성을 바인딩한다.

<ListView ItemsSource="{Binding Users}" 
          SelectedItem="{Binding SelectedUser}">
    <ListView.View>
        <GridView>
            <GridViewColumn Header="이름" DisplayMemberBinding="{Binding Name}" Width="100"/>
            <GridViewColumn Header="이메일" DisplayMemberBinding="{Binding Email}" Width="200"/>
            <GridViewColumn Header="나이" DisplayMemberBinding="{Binding Age}" Width="50"/>

            <!-- 버튼 등 커스텀 UI가 필요한 경우 CellTemplate 사용 -->
            <GridViewColumn Header="관리">
                <GridViewColumn.CellTemplate>
                    <DataTemplate>
                        <Button Content="삭제" Command="{Binding DataContext.DeleteCommand, 
                                RelativeSource={RelativeSource AncestorType=ListView}}"
                                CommandParameter="{Binding}"/>
                    </DataTemplate>
                </GridViewColumn.CellTemplate>
            </GridViewColumn>
        </GridView>
    </ListView.View>
</ListView>

주요 구현 포인트

• ObservableCollection: 컬렉션 내 요소가 추가되거나 삭제될 때 UI가 자동으로 갱신된다.
  (단, 요소 내부의 속성 변경을 감지하려면 해당 클래스가 INotifyPropertyChanged를 구현해야 한다.)
• SelectedItem: 사용자가 리스트에서 특정 행을 클릭하면 뷰모델의 SelectedUser 프로퍼티에 해당 객체가 자동으로 할당된다.
• RelativeSource: CellTemplate 내부에서 버튼의 명령을 바인딩할 때, 현재 행의 데이터가 아닌 뷰모델의 명령에 접근하기 위해 사용한다.

P.S

ListView는 정교한 데이터 표시와 사용자 상호작용을 처리하기 위한 강력한 도구다.

GridView와 DataTemplate을 결합하여 복잡한 표 형식의 UI를 유연하게 설계할 수 있는 것 같다.

웨이호프