Expression Blend 트리뷰와 샘플 데이터로 트리뷰 만들기

 

 

안녕하세요! 반짝반짝 빛나는 성남미입니다 :-)
샘플 데이터로 트리뷰를 만드는 방법을 소개합니다.

 

<기존의 트리뷰를 설정할 때,>

 
- TreeView라는 레이어가 생겼고 화면에는 트리뷰가 나올 박스가 생겼습니다.



                     
- TreeView레이어를 선택하고 오른쪽 마우스 > Add TreeViewItem을 누르면,
상단에 트리뷰의 헤더가 될 부분이 생겼네요.



                     
이- 헤더 아래에 종속되는 트리뷰 아이템을 추가하기 위해,
헤더 레이어를 선택한 후 오른쪽 마우스 > Add TreeViewItem을 누르면 헤더 밑에 트리뷰아이템이 생겼습니다. 

 

이런 식으로 트리뷰의 메뉴를 레이어에 추가했었습니다.
하지만 샘플 데이터를 이용해 쉽게 트리뷰를 설정할 수 있습니다.

 

<샘플 데이터를 이용해 트리뷰를 설정할 때,>

 

TreeView라는 레이어가 생겼고 화면에는 트리뷰가 나올 박스가 생깁니다.

 

 

오른쪽 data탭을 클릭한 뒤

버튼 클릭 > New Sample Data 클릭해 샘플 데이터를 만들어 줍니다.

 

 

이름을 지정해 주고 OK버튼을 클릭합니다.

 

 

오른쪽에 기본 샘플 데이터가 설정 되었습니다.

 

 

기본으로 설정되어 있는 Property2를 오른쪽 마우스를 눌러 삭제해 줍니다.

왜 지워줄까요??

 

 

헤더가 될 부분의 숫자 설정은 Collection 옆의

버튼을 클릭하면

 

 

다음과 같이 숫자를 설정할 수 있어요.

원하는 헤더의 수를 여기서 정하면 되니, 하나의 property만 있으면 되겠네요.

그래서 Property2를 오른쪽 마우스를 눌러 삭제해 줍니다.

 

 

Collection 옆의

버튼을 클릭해 트리뷰 밑의 아이템의 그룸이 될 Collection을 추가해 줍니다.

같은 방법으로 생성된 Collection 아래에 또 하나의 Collection을 추가해 줍니다.

이렇게 설정해주는 Collection의 수에 따라 아래로 펼쳐지는 트리뷰가 생겨납니다.

 

 

TreeView레이어를 선택하고 오른쪽 마우스 > Add TreeViewItem을 누르는 원리와

Collection을 생성하는 것이 같은 원리겠네요.

 

 

생성된 Collection 옆의

버튼을 클릭해 트리뷰 밑의 아이템의 그룸이 될 Collection을 다시 한번 추가합니다.

 

 

총 3개의 뎁스를 가진 샘플 데이터가 만들어 졌습니다.

각각의 값을 설정할 수 있도록 콜렉션 안에 Property를 생성해 줍니다.

 

 

Collection 옆의

버튼을 클릭해 트리뷰 밑의 아이템의 성격을 지정할 Property를 추가합니다

 

 

자 그럼 3뎁스의 Collection 아래에 각각의 Property가 생긴 것을 알 수 있습니다.

(그룹이 보기 좋게 되지 않아 제가 붉은 선으로 짝을 지웠습니다.)

 

 

1뎁스의 Property 샘플 데이터의 내용을

버튼을 눌러 Name으로 설정합니다

 

 

같은 방법으로 2뎁스와 3뎁스의 샘플 내용을 설정해 줍니다.

 

 

제일 위에 있는 Collection을 마우스로 잡고 화면에 열어놓은 트리뷰에 바인딩 해줍니다.

 

 

빌드를 해서 확인해 보겠습니다.

Project > Run Project 또는 F5를 누릅니다.

 

 

짜짠! 샘플 데이터를 이용해 트리뷰를 만들어 보았습니다. J