C# WPF] INotifyPropertyChanged 인터페이스를 이용한 데이터 바인딩 방법

  이번에는 WPF(Windows Presentation Foundation)에서 MVVM패턴을 구현하기 위해 꼭 써야하는 인터페이스 중에 하나인 INotifyPropertyChanged에 대해 알아보도록 하겠습니다.

 

  먼저 INotifyPropertyChanged(참조 : https://docs.microsoft.com/ko-kr/dotnet/framework/winforms/how-to-implement-the-inotifypropertychanged-interface)란 XAML에서 디자인 한 폼에서 데이터의 즉각적인 변화 또는 데이터를 가져올 때 쓰는 인터페이스 입니다.

 

  Model에서 멤버 변수를 생성하고 ViewModel에서 INotifyPropertyChanged의 인터페이스를 상속 받고, 메서드를 생성해서 데이터의 변화를 감지하도록 셋팅하고 View(XAML)에서 데이터의 송수신이 필요한 곳에 {Binding ___}를 하면 값들을 가져오도록 설계하는 것입니다.

  한 가지 중요한 점은 일반적으로 버튼을 클릭 했을 때에 Click이라는 이벤트 처리를 하는데 MVVM패턴으로 보면 이 방법은 좋지는 않습니다. 이럴 때는 Command라는 인터페이스를 사용하여 버튼과 같은 이벤트를 처리해야 합니다.(이건 다음 포스팅때 하겠습니다!)

 

  이번 예제에서는 Command 인터페이스는 쓰지 않고 INotifyPropertyChanged 인터페이스를 이용해서 데이터를 받아오는 작업을 하겠습니다. 

예제는 간단하게 라벨에 쓴 글자가 바로 아래에 출력되도록 만들어보겠습니다. WPF를 공부하면서 포스팅하는 거라 틀린 부분이 있을 수 있습니다 :(

 

CallMeNames.zip

다운로드

 

  저번 포스팅에서 언급했던 것처럼 일반적으로 MVVM패턴은 View와 View Model이 통신하는 것입니다. 그렇기 때문에 View에서는 Binding 작업을 통해서 ViewModel에서 변경될 값을 연결하고 ViewModel에서 변경되는 점을 확인하는 것입니다. INotifyPropertyChanged도 이를 토대로 ViewModel에서 작업하는 것이 바람직한 것 같습니다.

 

 

  위 이미지를 보시면 일단 프로젝트를 기능별로 나누고 작업하였습니다. Model에서는 해당 프로젝트에 필요한 비지니스로직들을 만들었으며, ViewModel에서는 그러한 비즈니스로직을 가져와서 INotifyPropertyChanged 인터페이스를 연결하였습니다.

  또한, 파란색 으로 체크한 곳에서 데이터 콘텍스트를 해서 값을 받아올 수 있는데 이 방법 외에 다른 방법으로도 호출이 가능합니다. 일반적으로 INotifyPropertyChanged는 단일 데이터의 변경을 감지하는 것이고 만약에 리스트처럼 다수의 데이터를 조작하고 싶으면, INotifyCollectionChanged 인터페이스를 적용하고 ObservableCollection<T>라는 클래스를 이용해서 데이터를 삽입해야 합니다.

 

  그리고 View에서 주황색 상자처럼 Binding을 해줘야 합니다. Binding에서도 OneWay, TwoWay 등 다양한 방법이 있으니, 이 부분은 데이터에 따라 달라질거라 생각합니다. :)

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.ComponentModel;

namespace CallMeNames.ViewModels
{
    public class MainViewModel : INotifyPropertyChanged
    {
        public MainViewModel()
        {
            mainModel = new Models.MainModel();
        }

        Models.MainModel mainModel;
        public Models.MainModel MainModel
        {
            get { return mainModel; }
            set { mainModel = value; }
        }
        public string Name
        {
            get { return MainModel.Name; }
            set
            {
                if (MainModel.Name != value)
                {
                    MainModel.Name = value;
                    RaisePropertyChanged("Name");
                }
            }
        }

        #region INotifyPropertyChanged Member

        public event PropertyChangedEventHandler PropertyChanged;

        #endregion

        #region INotifyPropertyChanged Methods

        private void RaisePropertyChanged(string propertyName)
        {
            // take a copy to prevent thread issues
            PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(propertyName));
            }
        }
        #endregion
    }
}

  

이 코드는 MainViewModel의 코드입니다. INotifyPropertyChanged를 상속 받고 메서드를 만들어서 30번 라인에 메서드를 삽입하여 값이 변경할 때마다 즉각적으로 알려주기 위한 인터페이스라고 생각하시면 됩니다.

 

일반적으로 WPF에서의 인터페이스는 이렇게 생성하여 상황에 따라 삽입하는 건데 3가지(INotifyPropertyChanged, INotifyCollectionChanged, ICommand) 정도만 숙달되시면 왠만한 프로젝트에서는 문제없이 사용할 수 있을 것 같네요.

 

다음에는 버튼과 리스트뷰를 활용한 WPF MVVM패턴을 만들어보도록 하겠습니다.