WPF Data Binding (Concept, Mode, UpdateSourceTrigger)

김정환(John.Kim)
OldbeeDev
Published in
6 min readOct 17, 2017
©PublicDomainPictures (pixabay)

Data Binding이란 데이터와 UI 요소 간에 연결 고리를 맺어주는 것을 말한다. 바인딩이 되어있으면 데이터가 변경될 때마다 자동으로 UI가 바뀐다. 반대로 UI에 값을 입력하면 자동으로 데이터가 변경된다. 이로써 수많은 UpdateUI() 류의 메소드가 사라진다.

Concept

바인딩은 Target 객체의 Dependency Property와 Source 객체의 Property 사이의 연결 고리이다. Target은 UI 요소가 되고 Source는 주로 데이터가 된다. 이 연결은 Target을 Source에 연결하는 (binding target to source) 관계이다. 예를 들어 Data Binding을 사용해서 XML 데이터를 ListBox에 표시했다면, “ListBox를 XML 데이터에 바인딩한다” 라고 말한다.

기본 예제

Guess Who? 버튼을 클릭하면 레이블에 “John Kim”을 표시하는 예제이다.

Label 요소가 Binding Target이다.
Label.Content 속성이 Dependency Property이다.
Content에 바인딩된 Name 속성이 Source Property이다.

Binding Source 는 MainViewModel 타입의 객체이다. MainViewModel 클래스는 INotifyPropertyChanged 인터페이스를 구현해야 하고, Property가 변경될 때마다 OnPropertyChanged 메소드를 호출해야 한다.

GuessWho() 메소드는 Guess who? 버튼을 클릭하면 호출되는 메소드로서 Name 속성을 “John Kim”으로 바꾸는 작업만 수행한다.

MainWindow의 DataContext를 MainViewModel 객체로 지정함으로써 Source가 Target과 연결된다. 이제 버튼을 클릭하면 레이블에 “John Kim”이 표시되는 것을 볼 수 있을 것이다.

Binding Mode

바인딩 방식에는 크게 3가지 옵션이 있다.

  1. OneWay : Source Property가 변경되면 Target Property도 바뀐다. 그러나 Target Property가 바뀌어도 Source Property는 변하지 않는다.
  2. TwoWay : Source Property가 변경되면 Target Property도 바뀐다. 그리고 Target Property가 변경되면 Source Property 도 바뀐다.
  3. OneWayToSource : OneWay와 반대 방식으로 동작한다.

이 외에 2가지 옵션이 더 존재한다.

  1. OneTime : 바인딩이 이루어지는 최초 한번만 OneWay로 동작한다.
  2. Default : Target Property별로 정의된 바인딩 기본값에 따른다. 대부분은 OneWay이고, TextBox.Text, ComboBox.Text, ToggleButton.IsChecked 등은 TwoWay가 기본값이다.

위의 옵션들은 Binding Mode 속성에 입력하는 값이며, 입력을 하지 않으면 Default를 의미한다.

Binding Mode 예제

ComboBox에서 친구를 선택하면 TextBox에 선택된 이름을 표시하는 간단한 예제이다.

ComboBox.Text Property는 TwoWay, TextBox.Text Property는 OneWay로 바인딩 되어 있다. ComboBox에서 선택을 변경하면 Source Property인 Name이 변경되고, 여기에 바인딩되어 있는 TextBox.Text도 함께 바뀐다. 그러나 반대로 TextBox에 값을 입력하는 경우에는 Name 변수 값이 변하지 않는다.

UpdateSourceTrigger

TwoWay 및 OneWayToSource Mode인 경우, Target Property가 바뀌면 Source Property도 바뀐다. 이렇게 Source Property가 바뀌는 것을 “Source를 업데이트한다. (updating the source)” 라고 말한다.

Source를 업데이트하는 트리거를 말 그대로 SourceUpdateTrigger라고 하며 아래와 같이 4가지 옵션이 있다.

  1. PropertyChanged : Target Property 입력값이 변경될 때마다.
  2. LostFocus : Target 객체에서 다른 객체로 포커스가 이동될 때.
  3. Explicit : 명시적으로 UpdateSource() 메소드를 호출할 때만.
  4. Default : Target Property별로 정의된 바인딩 기본값에 따른다. 대부분은 PropertyChanged이고, TextBox.Text 속성은 LostFocus가 기본값이다.

위의 옵션들은 Binding UpdateSourceTrigger 속성에 입력하는 값이며, 입력을 하지 않으면 Default를 의미한다.

UpdateSourceTrigger 예제

입력된 이름의 유효성을 실시간으로 검사하는 예제이다.

TextBox의 UpdateSourceTrigger 속성이 ‘PropertyChanged’이므로 사용자가 한 글자 입력할 때마다 Name 변수 값이 변경된다.

Name 값이 바뀔 때마다 ValidateName() 메소드가 수행되어 이름 규칙을 검증한다. 만약 규칙에 어긋나면 NameStatus를 “Fail”로 변경함으로써 화면에 빨간 Fail 글자가 표시된다.

Wrapup :

바인딩 없는 XAML은 앙꼬 없는 찐빵이다. WPF로 넘어와서 MFC처럼 쓰지 말자.

References :

--

--