TreeView 컨트롤 이해하기 – ②

 

 

안녕하세요! 반짝반짝 빛나는 성남미입니다 :-)
트리뷰 컨트롤에 디자인을 씌어보도록 하겠습니다.

 

<기본 컨트롤의 모습>

 

 

먼저 헤더1의 디자인을 바꿔보겠습니다.

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

 

 

디자인 편집모드로 들어가면 레이어 ExpanderButton의 영역이 전체 다 잡힐 수 있도록

ColumSpan을 3으로 잡아주고, 전체 마진을 모두 0으로 놓습니다.

이렇게 하면 나중에 헤더의 영역을 글자가 아닌 내가 설정한 전체 영역으로 설정되게 됩니다.

 

 

ExpanderButton의 화살표 이미지를 수정하기 위해

ExpanderButton > Edit Templete > Edit a copy > 이름지정 > ok

버튼디자인 편집모드로 들어갑니다.

 

 

앞에서 ColumSpan을 3으로 수정했기 때문에 오른쪽으로 쏠려있는 화살표를 확인할 수 있습니다.

그리드의 가로 세로를 모두 오토로 놓고 잡혀있는 마진을 모두 0으로 놓습니다.

 

 

모두 오토로 되어 있는 그리드에 색깔을 넣어줍니다.

전체영역을 오토로 잡고 마진값을 빼면 헤더버튼을 클릭할 때 영역을 노란색의 영역만큼 잡게 됩니다.

 

 

쓰지 않는 그리드 안에 있는 화살표는 모두 Collapse로 설정합니다.

 

 

다시 헤더디자인 수정화면으로 넘어와

ExpanderButton의 영역을 충분히 크게 잡아준 상태이기 때문에

헤더의 ContentPresenter를 싸고 있는 버튼의 설정을 제거합니다.

Header 레이어를 클릭하고 오른쪽의 Common Preperties의 창의 숨겨진 영역을 열어

IsHitTestVisible의 체크를 풀어준다. 그러면 텍스트의 버튼 속성이 사라지게 됩니다.

 

 

그리고 State의 상태를 확인해 보면서 내가 원치 않는 속성을 빼거나 더합니다.

기본으로 Selected 되었을때 들어간 파란색 네모를 Opacity를 0으로 세팅해 나타나지 않게 설정 했습니다.

 

 

그리고 버튼위에 마우스를 올렸을 때 손모양이 나오도록 설정합니다.

 

 

다시 메인 화면으로 돌아와

다른 헤더에도 같은 디자인 리소스를 적용합니다.

헤더2 레이어 > 오른쪽 마우스 > Edit a Template > Apply Resource > 내가 설정한 헤더스타일 이름

 

 

내가 적용한 헤더의 스타일이 입혀진 것을 확인할 수 있습니다.

그리고 빌드해서 확인해 보면 노란색의 영역만큼 헤더버턴의 영역을 잡힌 것을 알 수 있습니다.

또 마우스가 손모양으로 설정되어 있음을 확인할 수 있습니다.

 

 

- 헤더 아래의 2뎁스의 디자인은 다음에..
:-)