WPF 강좌, 데이터 바인딩을 통한 리스트 데이터 표시

Windows Presentation Foundation(WPF)은 마이크로소프트가 만든 데스크탑 애플리케이션 개발을 위한 프레임워크입니다. WPF의 주요 특징 중 하나는 데이터 바인딩(Data Binding)입니다. 데이터 바인딩을 통해 UI 요소와 데이터를 효율적으로 연결할 수 있으며, 이는 개발자가 애플리케이션의 비즈니스 로직과 UI를 명확하게 구분할 수 있게 해줍니다. 본 강좌에서는 WPF에서 데이터 바인딩을 사용하여 리스트 데이터를 어떻게 표시할 수 있는지 자세히 살펴보겠습니다.

1. 데이터 바인딩의 기본 개념

데이터 바인딩은 UI 요소(예: 텍스트박스, 리스트박스 등)와 데이터 소스 간의 연결을 의미합니다. 이를 통해 데이터가 변경되었을 때 UI가 자동으로 업데이트되며, 반대로 UI에서 사용자가 입력한 데이터가 데이터 소스에 동기화됩니다. WPF에서는 이러한 바인딩을 쉽게 수행할 수 있도록 지원하는 다양한 기능을 제공합니다.

데이터 바인딩을 사용하면 다음과 같은 이점이 있습니다:

코드의 간결성: UI 요소와 데이터 소스를 직관적으로 연결할 수 있어 코드가 간결해집니다.
분리된 관심사: 비즈니스 로직과 UI를 명확히 구분하여 각각을 독립적으로 개발하고 테스트할 수 있습니다.
자동 업데이트: 데이터가 변경될 때 UI가 자동으로 업데이트 되므로 사용자 경험을 향상시킬 수 있습니다.

2. 데이터 소스 준비하기

이제 WPF 애플리케이션에서 리스트 데이터를 표시하기 위한 데이터 소스를 준비해보겠습니다. 예를 들어, 학생 정보를 포함하는 간단한 리스트를 정의하겠습니다.


public class Student
{
    public string Name { get; set; }
    public int Age { get; set; }
    public string Major { get; set; }
}

public class StudentViewModel
{
    public ObservableCollection<Student> Students { get; set; }

    public StudentViewModel()
    {
        Students = new ObservableCollection<Student>
        {
            new Student { Name = "John Doe", Age = 20, Major = "Computer Science" },
            new Student { Name = "Jane Smith", Age = 22, Major = "Mathematics" },
            new Student { Name = "Sam Brown", Age = 21, Major = "Physics" }
        };
    }
}

위 코드에서는 학생 정보를 나타내는 Student 클래스를 정의하였고, 이를 담을 수 있는 ObservableCollection을 생성하였습니다. ObservableCollection은 데이터가 변경될 때 UI에 자동으로 알림을 보내는 컬렉션입니다.

3. XAML에서 데이터 바인딩 설정하기

이제 XAML 파일에서 데이터 바인딩을 설정할 차례입니다. StudentViewModel을 데이터 컨텍스트(DataContext)로 설정하고, UI 요소에 리스트 데이터를 바인딩하겠습니다.

위 XAML 코드에서 중요한 부분은 ItemsSource 속성과 DataTemplate입니다. ItemsSource 속성은 리스트 박스에 표시할 데이터 소스를 지정하며, DataTemplate은 각 개별 항목의 표시 방식을 정의합니다.

4. UI와 데이터의 상호작용

데이터 바인딩을 통해 UI와 데이터 간의 원활한 상호작용을 구현할 수 있습니다. 예를 들어, 사용자가 리스트 박스에서 학생을 선택했을 때 해당 학생의 정보를 상세히 보여주는 기능을 추가할 수 있습니다.

위 코드에서 SelectedItem 속성을 사용하여 사용자가 선택한 학생 정보를 SelectedStudent 속성에 바인딩했습니다. 이후 상세 정보를 표시하는 TextBlock에 바인딩하여 자동으로 업데이트됩니다.

5. MVVM 패턴과 데이터 바인딩

WPF에서 데이터 바인딩은 MVVM(Model-View-ViewModel) 패턴과 함께 사용하는 것이 일반적입니다. MVVM 패턴은 애플리케이션의 구조를 명확하게 구분하여 유지 보수성을 높이는 데 도움을 줍니다.

이 패턴을 적용하면 다음과 같은 구조를 갖습니다:

Model: 애플리케이션의 데이터와 비즈니스 로직을 포함합니다.
View: UI 요소를 정의하며 사용자 상호작용을 처리합니다.
ViewModel: Model과 View를 연결하며 데이터 바인딩을 통해 UI와 데이터 간의 상호작용을 관리합니다.

6. ObservableCollection과 INotifyPropertyChanged

WPF에서 데이터가 변경될 때 UI에 알리기 위해서는 INotifyPropertyChanged 인터페이스를 구현해야 합니다. 이 인터페이스는 프로퍼티 값이 변경되었을 때 이벤트를 발생시켜 UI에 그 변경 사항을 알려줍니다.


public class Student : INotifyPropertyChanged
{
    private string name;
    public string Name
    {
        get { return name; }
        set
        {
            if (name != value)
            {
                name = value;
                OnPropertyChanged(nameof(Name));
            }
        }
    }

    // Age와 Major에 대해서도 같은 방식으로 구현...
    
    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

위와 같이 Student 클래스에 INotifyPropertyChanged를 구현함으로써, 이름이 변경될 때 UI에 자동으로 반영됩니다.

7. 실습 예제: 리스트 뷰에 데이터 표시하기

이제까지 배운 내용을 바탕으로 리스트 뷰를 사용하여 데이터 바인딩을 구현하는 실습을 진행해보겠습니다. 이 예제에서는 학생 정보를 테이블 형식으로 표시하겠습니다.

위 코드에서는 DataGrid를 사용하여 학생 정보를 테이블 형식으로 나열했습니다. 각 DataGridTextColumn의 Binding 속성을 통해 UI 요소와 데이터 소스를 연결하였습니다.

8. 데이터 추가 및 삭제

이제 학생 정보를 추가하고 삭제할 수 있는 기능도 구현해보겠습니다. StudentViewModel 클래스에 메서드를 추가하여 학생 데이터를 업데이트할 수 있도록 합니다.


public class StudentViewModel : INotifyPropertyChanged
{
    public ObservableCollection<Student> Students { get; set; }
    public ICommand AddStudentCommand { get; set; }
    public ICommand RemoveStudentCommand { get; set; }

    public StudentViewModel()
    {
        Students = new ObservableCollection<Student>();
        AddStudentCommand = new RelayCommand(AddStudent);
        RemoveStudentCommand = new RelayCommand(RemoveStudent);
    }

    private void AddStudent()
    {
        Students.Add(new Student { Name = "New Student", Age = 18, Major = "Undeclared" });
    }

    private void RemoveStudent()
    {
        if (SelectedStudent != null)
            Students.Remove(SelectedStudent);
    }
}

위 코드에서 RelayCommand는 ICommand 인터페이스의 구현으로 명령을 처리하는 역할을 합니다. 학생을 추가하는 AddStudent 메서드와, 선택된 학생을 삭제하는 RemoveStudent 메서드를 정의했습니다.

9. UI에 추가 및 삭제 버튼 추가하기

학생 정보를 추가하고 삭제할 수 있는 버튼을 UI에 추가해봅시다.

이렇게 하면, 사용자가 “Add Student” 버튼을 클릭하여 새로운 학생을 추가하고, “Remove Student” 버튼을 클릭하여 선택된 학생을 삭제할 수 있습니다.

10. 마무리

이번 강좌에서는 WPF에서 데이터 바인딩을 사용하여 리스트 데이터를 표시하는 방법에 대해 알아보았습니다. 객체와 UI 요소 간의 원활한 연결을 통해 애플리케이션의 가독성을 높이고 유지 보수성을 향상시키는 방법에 대해 배웠습니다.

데이터 바인딩은 WPF에서 매우 강력하면서도 유용한 기능으로, MVVM 패턴과 함께 사용하면 더욱 효과적입니다. 이러한 기법을 통해 더 나은 사용자 경험을 제공하는 애플리케이션을 개발할 수 있습니다.

마지막으로, 데이터 바인딩에 대한 이해를 바탕으로 더 깊이 있는 WPF 애플리케이션을 개발할 수 있기를 바랍니다. 감사합니다!