데이터 바인딩 (2)

WPF 의 바인딩 시스템을 사용하면 지금까지 우리가 수동으로 진행했던 UI 와 데이터 객체의 통신(동기화)를 자동으로 구축할 수 있다.

 

바인딩 시스템의 핵심 기능은 두 가지로

UI 의 변경을 데이터 객체로 데이터 객체의 변경을 UI 로 자동 통신하는 동기화 기능과

서로 다른 형식의 동기화를 위한 적절한 형식 변환 기능이다.

 

바인딩 시스템은 UI 의 의존속성과 데이터 객체의 속성이 연결되는 형태로 동작한다.

 

 

---

바인딩을 이용하여 이름과 전화번호 TextBox 컨트롤 UI 에 Person 객체를 출력

 

결과

 

 

<TextBox Text="{Binding Path=Name}"/> 

 XAML 에서는 이것이 바인딩 코드의 전부다.

 

이제 UI 의 의존 속성 Text 와 바인딩 할(연결할) 데이터 객체(데이터 원본이라한다)를 설정하는 것 뿐이다.

이것은 C# 코드에서 panel.DataContext = per; 이와 같이 설정했다.

이후에 보면 알겠지만 이 데이터 원본 또한 XAML 에서 설정 가능하다.

 

 

UI 의 Text 의존속성과 데이터 원본 객체의 Name 속성을 바인딩 한다.

 

데이터 원본 객체의 속성은 의존 속성이나 일반 .Net 속성 등 모두 가능 하지만 UI 의 바인딩 속성은 꼭 의존 속성만 가능하다 바인딩 시스템이 의존 속성을 사용하여 동작하기 때문이다.

 

또 바인딩 원본은 구체적으로 기록되지 않으며 이것으로 UI 의 Text 의존 속성은 얼마든지 데이터 원본을 변경할 수 있는 유연성을 갖게 된다.

---

 

또 바인딩 데이터 원본은 UI 요소에 설정할 수 있지만 바인딩 UI 요소에 데이터 원본이 없다면,

부모 요소를 탐색하며 바인딩 데이터 원본을 찾게 된다.

 

이런 설계를 더 많이 사용하는데 이와 같이 구성하면 부모 요소 하나를 사용하는 모든 자식 요소들이 설정된 데이터 원본을 공유 하여 각각의 자식 요소 변경을 갱신할 필요 없이 자동으로 자식 요소들의 변경을 갱신할 수 있도록 한다.

 

여기에 사용되는 속성이 DataContext 속성이며 부모 요소의 트리를 검색하며 데이터 원본을 찾는다.

 

위 예제는 StackPanel(panel)의 DataContext 가 C# 코드에서 panel.DataContext = per;

이처럼 설정되어 데이터 원본으로 사용되며,

자식 요소인 이름 TextBox 컨트롤과 전화번호 TextBox 컨트롤이 같은 데이터 원본인 per 객체가 된다.

---

다음 예제는 부모 요소 StackPanel 의 DataContext 속성의 데이터 원본을 공유하는 TextBox 컨트롤과 Label 컨트롤 UI 의 바인딩 예제다.

단지 다음 코드를 추가한 것 외에는 다른 곳이 없다.

 

 

부모 요소 트리를 검색하여 데이터 원본을 설정하므로 Label 의 데이터 원본은 StackPanel 객체에 설정된 per 객체

 

만약 이름이나 전화번호의 TextBox 컨트롤을 수정하여 다른 곳으로 포커스를 이동하면,

데이터 원본이 변경되는 것을 확인할 수 있다.

 

기본적으로 바인딩 엔진에서 데이터 원본과 UI 속성의 동기화를 수행하며 기본 동작은 포커스가 다른 곳으로 변경될 때 동기화 되도록 설정되어 있기 때문이다. 

 

UI 가 변경되면 데이터 원본이 변경되도록 동기화된다는 것을 확인했으니

다음에는 반대로 데이터 원본이 변경되면 UI 가 변경되는지 바인딩을 통해 알아 보도록 하자.