WPF INotifyPropertyChanged 구현 실습

안녕하세요 까치 입니다.

이번 포스팅은 WPF에서 아주 중요한 INotifyPropertyChanged에 대해 

알아 보겠습니다.

WPF는 MVVM패턴을 이용하기 위해 반전되온

개발 프로그램입니다.

Winform의 한계를 넘어 보려고 View단을 직접

조작하게끔 만들어 놓은 것이지요.

그래도 많이 사용하진 않지만 

사용하긴 한다는거 

 

그래서 이번에 INotyfyPropertyChanged에 대해 알아 보려고 합니다.

 

1. INotifyPropertyChanged는 무엇인가?

WPF를 사용하면 Xaml파일이 보이실 겁니다. 

그 부분에서 view단에 해당하는 것으로

Source(Model)를 바인딩을 시켜서

화면에 보여주게 되는데 

이바인딩된 값이 바뀔때마다 

변하는 것을 인지해주어 

백단의 값을 자동으로 바뀌게 해주는 

역할을 해주어

View 와 ViewModel의 값을 실시간으로 

바꿔주게 되는 것이지요.

 

무슨 말인지 모르겠죠?

저도 처음엔 그랬거든요.

소스를 보면서 살펴 보도록 하겠습니다.

먼저 내용을 만들어 줍니다. 하나하나 만들어 보죠

using System.ComponentModel;

public class Notifier : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        protected void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }

 

자 NotiFier란 cs파일을 만들고 

그 안에 이런 구현체를 만들었습니다.

INotifypropertyChanged는 인터페이스 입니다.

Notifier로 나누어서 사용하는 이유는 

구분 짖기 위함 입니다.

기능을 따로 빼놔서 관리 하는 것입니다.

그럼 예제를 하기 전에 어떤 인터페이스 인지 알아 보죠.

 

namespace System.ComponentModel
{
    //
    // 요약:
    //     속성 값이 변경되었음을 클라이언트에 알립니다.
    public interface INotifyPropertyChanged
    {
        //
        // 요약:
        //     속성 값이 변경될 때 발생합니다.
        event PropertyChangedEventHandler PropertyChanged;
    }
}

안에 내용은 PropertyChanged라는 것 밖에 없습니다.

Property즉 객체의 속성(필드값)이 바뀌는 것을 이벤트 처리 해준다는 뜻입니다.

여기가 값이 바뀌는 것을 인지 하는 부분입니다.

더 깊게 들어 가보면

namespace System.ComponentModel
{
    //
    // 요약:
    //     처리 하는 메서드를 나타내는 System.ComponentModel.INotifyPropertyChanged.PropertyChanged
    //     이벤트는 구성 요소에서 속성이 변경 될 때 발생 합니다.
    //
    // 매개 변수:
    //   sender:
    //     이벤트 소스입니다.
    //
    //   e:
    //     이벤트 데이터를 포함하는 System.ComponentModel.PropertyChangedEventArgs입니다.
    public delegate void PropertyChangedEventHandler(object sender, PropertyChangedEventArgs e);
}

이렇게 델리 게이트로 정의 되어있네요.

참 누가 만들었는지 보기도 좋게 구현해 놓았네요.

 

자 이렇게 Notifier를 구현해 놓고 어떤 역할인지 알아 봤으면

구현을 해 보아야겠죠?

public class ViewModel : Notifier
    {
        string title = "D-day를 새볼까요?";
        public string Title
        {
            get { return title; }
            set
            {
                title = value;
                OnPropertyChanged("Title");
            }
        }
        int num = 0;
        public int Num
        {
            get { return num; }
            set
            {
                num = value;
                OnPropertyChanged("Num");
            }
        }


    }

ViewModel을 하나 만들어 줍니다.

notifier를 상속하고 OnPropertyChanged에 위와 같이 넣어 줍니다.

필드값들의 대문자 소문자 꼭 확인 해서 넣어 주세요

저는 c#을 주로 사용하지 않았어서 

진짜 많이 헤맸습니다.

c#기본이니 꼭 잘 숙지 하고 입력해주세요.

 

<Window x:Class="Wpf_INotified.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Wpf_INotified"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <TextBlock Text="{Binding Title}" HorizontalAlignment="Left" Margin="148,58,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Height="11"/>
        <TextBlock Text="{Binding Num}" HorizontalAlignment="Left" Margin="148,103,0,0" TextWrapping="Wrap" VerticalAlignment="Top"/>
        <TextBox Text="{Binding Path=Num, Mode=TwoWay}" HorizontalAlignment="Left" Height="23" Margin="364,58,0,0" TextWrapping="Wrap"  VerticalAlignment="Top" Width="120"/>
        <TextBox Text="참조" HorizontalAlignment="Left" Height="23" Margin="364,103,0,0" TextWrapping="Wrap"  VerticalAlignment="Top" Width="120"/>
    </Grid>
</Window>

  public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = new ViewModel();
        }
    }

그냥 위에 View단은 대충 만들었습니다 ㅎㅎ.

TwoWay속성을 넣어 주고 그 공간에서 숫자를 바꾸면 바로 

커서가 바뀔때 num의 값이 바뀌게 됩니다.

num의 값을 바꾸고 참조를 클릭 해 줍니다.

실행 화면

바뀐화면