TreeView 컨트롤 이해하기 – ③

 

 

안녕하세요! 반짝반짝 빛나는 성남미입니다 :-)
트리뷰 컨트롤의 헤더를 씌었었는데요, 나머지 뎁스의 디자인도 씌어보겠습니다.

 

<헤더까지 디자인 씌운 모습>

 

 

여기서 잠깐!

헤더 아래 2뎁스(1-1, 1-2)의 정렬을 왼쪽으로 수정하고 싶습니다.

 

 

스테이트의 Expanded를 활성화 시키면 아래 뎁스의 영역을 수정할 수 있습니다.

 

 

 

ColumSpan의 숫자를 조절해 아래뎁스의 영역을 수정합니다.

 

이제 헤더 아래의 뎁스 디자인을 수정해 보도록 하겠습니다.

2뎁스 레이어 > 오른쪽 마우스 > Edit Templete > edit a copy > 이름지정 > ok

 

 

앞에서 계속 했듯이 ExpanderButton의 버튼을 전체 영역으로 잡아준 줍니다.

이렇게 하면 클릭했을 때 영역을 지정해 줄 수 있습니다.

 

 

ExpanderButton > 오른쪽 마우스 > Edit Templete > edit a copy > 이름지정 > ok

 

 

기본으로 되어 있는 화살표를 Collapsed로 안보이게 숨깁니다.

 

 

다시 ExpanderButton을 수정하는 영역으로 나옵니다.

 

 

2뎁스에 들어갈 아이콘과 연결 패스를 넣어줍니다.

 

 

같은 2뎁스에 있는 아이콘을 연결해주는 패스를 넣어줍니다.

이 패스는 같은 2뎁스의 아이콘을 연결해주는 선이 됩니다.

 

 

State 상태가 Expander일 때 즉, 아랫 뎁스의 이미지가 펼쳐 졌을 때의 상태를 놓고

아래 아이콘과 연결해 주는 점선을 넣습니다.

StrokeDashArray를 1로 설정해 주어 1px의 선과 1px의 사이값을 줍니다.

Stretch는 UniformToFill로 설정해 주면 늘어났을 때

점선의 1px의 선과 1px의 사이 값을 유지한 체 길이만 늘어나게 됩니다.

아래 뎁스 수가 늘어날 때 마다 유동적으로 늘어나야 하기 때문에 Height는 Auto로 놓습니다.

 

 

그림과 같이 아래 뎁스가 열렸을 때, 점선이 들어가게 되었습니다.

 

 

다시 기본상태로 돌아옵니다.

 

 

펼쳐지지 않았을 때는 나타나지 않아도 되는 패스를 보이지 않게 Collapsed 시켜줍니다.

 

 

메인으로 나와서,

2뎁스의 메뉴를 아래로 펼쳐졌을 때 패스가 나타나는 스타일을 씌웁니다.

스타일을 안씌운 2뎁스 레이어 > Edit Templte > Apply Resource > 2뎁스 디자인 스타일 이름

 

 

그림과 같이 디자인이 바뀐 것을 확인할 수 있습니다.

그런데,

제일 아래에 있는 2번째 뎁스는 펼쳐졌을 때 아래로 펼쳐지는 패스가 필요가 없습니다.

그래서 아래로 펼쳐진 스타일을 입힌 후 새로운 이름으로 복사해 패스 부분을 지워주도록 하겠습니다.

 

 

2뎁스 레이어 > 오른쪽 마우스 > Edit Templete > edit a copy > 이름지정 > ok

패스가 없는 2뎁스 스타일을 만들기 위해 새로운 복사합니다.

 

 

패스를 보이지 않게 Collapsed 시켜줍니다.

 

 

자 그럼 2뎁스의 메뉴의 디자인을 모두 씌워보았습니다.

그림과 같이 보여지겠습니다.

 

 

이제 3번째 뎁스의 디자인을 씌어보도록 하겠습니다.

3번 째 메뉴는 펼쳐졌을 때를 생각하지 않아도 되기 때문에 디자인 수정이 훨씬 쉽습니다.

같은 방법으로 3뎁스의 디자인 스타일을 복사합니다.

3뎁스 레이어 > 오른쪽 마우스 > Edit Templete > edit a copy > 이름지정 > ok

 

 

3뎁스의 디자인 스타일 모드로 들어가서 필요한 이미지를 넣습니다.

그리고 같은 선상에 있는 3뎁스의 디자인에도 같은 리소스를 적용시켜줍니다.

 

 

네 이렇게 접었다 폈다 할 수 있는 트리뷰의 디자인을 모두 씌웠습니다 :)