삽질의 현장/- .NET

#122_닷넷(.NET)_ WPF_ 마스터 디테일 바인딩

shovelman 2015. 12. 6. 22:59


안녕하세요 삽잡이입니다.


이번 시간에는 마스터-디테일 바인딩에 대해서 알아보려고합니다.



리스트에 선택된 데이터에 따라

상태 데이터들이 바뀌는 UI입니다.

즉, 각 Family를 누르면 각각의 가족 구성원들이 나오고,

각 구성원들을 누를 경우 그들의 특징에 대해서 나옵니다.


이와 같은 UI도 모두 바인딩에 의해 만들어진 것입니다.

선택하면 자동적으로 선택에 맞게 보여진다 이거죠.


잘 보시면,ListBox들이 

UI의 Column 0, 1, 2 순으로 차례대로 놓여있습니다.


이는 xaml 코드만 볼 것이 아닌,

데이터 원본으로 설정 될 코드도 준비가 되어있어야합니다.



Family 안에는 두 그룹이 있는데,

이 그룹이 있는 클래스를 바인딩하게되면 UI에 보여지겠지요.

이를 선형 바인딩이라고 하며,

원소 두개가 Item에 보여집니다.


두번쨰 ListBox의 경우

첫번째 ListBox를 선택하게 될 때,

해당 요소에 들어있는 컬렉션을 보여주도록 바인딩하게 되있습니다.


이름과 나이만을 보여주는 공통적인 패턴을 가지고 있습니다.

즉, 데이터 원본 소스는 바뀔 수 있으나,

속성은 바뀌지 않는다는 것입니다.



두번째 ListBox의 경우

첫번째 ListBox에서 선택된 Family의 멤버들을 보여줘야합니다.

Members라는 녀석이 컬렉션의 속성이 되어 바인딩 됩니다.


첫번째 ListBox의 경우 ItemSource = "{Binding}" 이었지만,

두번째 LIstBox의 경우에는 ItemSource = "{Binding Path=Members}" 입니다.



세번째 ListBox의 경우 각 멤버를 선택시

속성들을 보여줄 Traits가 필요합니다.


정리해보자면,

순차적으로 ListBox가 선택할 데이터 원본 컬렉션을 선택하는 것입니다.


이번 시간은 여기까지 하도록 하겠습니다.


이상 삽잡이였습니다!


<참고 : Programming WPF : 사용자 경험(UX)을 바꾸는 기술>