[Expression Blend 강좌] ComboBox Customize - 1

안녕하세요 -
이번 시간에는 블랜드에서 기본적으로 제공하는 컨트롤 중에 콤보박스의 디자인을 변경해보도록 하겠습니다.

WPF에서의 콤보박스와 실버라이트에서의 콤보박스의 비주얼 트리가 다르기 때문에 이 강좌를 배우시고
실버라이트 콤보박스를 변경하실 때는 이를 고려하시길 바랍니다. ^^ 밑에 캡쳐 이미지를 올려 비교하도록 했습니다.

확연히 차이가 나지요? 왜 이렇게 차이가 많이 나는지는 확실하게 말씀드릴 순 없겠지만,
아무래도 지원하는 방식이 다르기 때문에 (윈도우 시스템 리소스를 지원한다든지) 그런 것 같습니다. 
그래서 WPF의 콤보박스를 디자인 해볼텐데요.

1) 먼저 파일 > 새 프로젝트 > WPF (exe)파일로 엽니다. 그리고 화면에 콤보박스를 하나 그려줍니다.

2) 그리셨으면 오른쪽 클릭 > 템플릿 편집 > 템플릿 복사를 눌러 콤보박스를 복사합니다.
클릭하면 style resource 만들기가 나옵니다. 이름을 정해주시고 확인버튼을 눌러줍니다.

3) 콤보박스 안으로 들어가면 이렇게 복잡한 비주얼 트리가 나옵니다.
어려운 느낌이 솔솔 나지만 차근차근 설명해보도록 하겠습니다.

 

PART_Popup : 콤보박스를 클릭했을 시에 다운되어 나오는 콤보아이템 리스트의 영역
ToggleButton : 우리가 눈에 보이는 콤보박스의 영역
ContentPresenter : 콤보아이템을 선택하면 콤보박스에 아이템이 클릭된 텍스트를 써주는 곳

현재 PART_Popup의 모양이 제대로 보이지 않지만
콤보박스의 아이템을 추가 시킨다음에 템플릿 편집을 한다면 보이게 될 것입니다.
콤보박스 밖으로 나가서 콤보박스 오른쪽 클릭 > ComboItem 추가를 누르면 아이템이 추가됩니다.

4) 다시 콤보박스로 들어와서 우리는 눈에 보이는 ToggleButton을 수정해 보도록 하겠습니다.
컨트롤 구성요소 (템플릿) 편집 에 들어가는데 어랏, 밑의 화면처럼 템플릿 편집이 열려 있습니다.
자신은 한번도 템플릿 복사를 한 적이 없는데 왜 이렇게 되어있을까요? 

그 이유는 방금 콤보박스 전체를 템플릿 복사하면서 콤보박스의 기본적인 시스템 컨트롤들이 그 안에 있는 것들도 전부 복사 했기 때문입니다. 한번 Xaml파일로 보시면 자신이 만든 것 외에 이상한 리소스들이 들어오는데 그것이 전부 기본적으로 콤보박스를 만들기 위해 사용되는 시스템의 리소스들입니다.
그냥 저는 템플릿 편집으로 들어가겠습니다.

5) 자, Window > ComboBox에서 > ToggleButton 으로 들어왔습니다. 이번엔 비주얼트리가 좀 적은데요.
 

Chrome : 윈도우에서 제공하는 기본적인 버튼 컨트롤, 버튼 컨트롤을 템플릿 복사해서 들어가도 이런 레이어가 들어있음
Arrow : 콤보박스의 화살표

크롬의 레이어가 콤보박스의 전체 모양인데요.
오른쪽을 눌러 다시 모양을 수정하려고 하니 더 이상 들어갈 수 없음을 확인하실 수 있을 겁니다. 아 이제 난관에 부딪쳤군요!
이럴 때는 과감히 삭제 해줍니다. 하지만 Allow는 쓸데가 있으니 Grid에 묶인 상태로 오른쪽 클릭 > 잘라주기로 잘라주고 
크롬을 삭제합니다.

잘라줍니다.

그리고 크롬을 삭제합니다.

6) 자 이렇게 빈 영역에 다시 꾸며야겠죠? 레이아웃 패널중에 Grid를 더블클릭하여 넣어주고, 
잘라내었던 Arrow가 들어있는 Grid를 붙여 넣어줍니다. 레이아웃 패널 많은 것 중에 그리드를 넣는 이유는 콤보박스의 사이즈를 조정할 때 Grid가 아닌 다른 걸로 하면 사이즈가 Auto로 늘어나거나 줄어들지 않기 때문입니다.
잘 따라 오셨으면 여기까지 되신 것을 보실 수 있습니다.

7) 이제 도형으로 콤보박스를 그려보겠습니다. 두번째에 Arrow 그리드는 건들지 말고 첫번째 그리드 안에서 꾸며보겠습니다.
사각형을 하나 넣고 색상을 그라데이션을 줍니다.

그리고 오른쪽에 선 하나 넣고 하얀사각형을 path로 변환시켜서 광택나는 효과를 주었습니다. 
Arrow는 흰색으로 변경해 주었습니다. 이로써 콤보박스 디자인은 끝났습니다.
하지만 콤보박스는 클릭했을 때 색상이 변한다거나 반응을 주어야 하겠지요? 반응을 주지 않으면 콤보박스를 클릭해도
밑에 아이템은 나오지만 내가 눌렀다는 느낌은 주기 힘듭니다.

-다음강좌에서 이어지도록 하겠습니다.