안녕하세요 삽잡이입니다.
이번 시간에는 마스터-디테일 바인딩에 대해서 알아보려고합니다.
리스트에 선택된 데이터에 따라
상태 데이터들이 바뀌는 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)을 바꾸는 기술>
'삽질의 현장 > - .NET' 카테고리의 다른 글
#123_닷넷(.NET)_ WPF_ 계층적 바인딩 (0) | 2015.12.06 |
---|---|
#121_닷넷(.NET)_ WPF_ 데이터 바인딩_필터링 & 정렬 & 그룹핑 (0) | 2015.12.06 |
#120_닷넷(.NET)_ WPF_ 데이터 바인딩_데이터 템플릿 (0) | 2015.12.06 |
#119_닷넷(.NET)_ WPF_ 데이터 바인딩_유효성 검사 (0) | 2015.12.06 |
#118_닷넷(.NET)_ WPF_ 데이터 바인딩_ 형식변환 (Converter) (1) | 2015.12.06 |