[Expression Blend 4] Toggle 버튼으로 윈도우 최대화/기존화면 버튼 만들기

안녕하세요? 정진희입니다. 오랫만에 강좌를 쓰게 됩니다.

데스크탑 어플리케이션이나 디자인 된 윈도우 창을 보면 [닫기] [최대화] [최소화]의 모양이 디자인 된 것을 볼 수 있습니다. 이렇게요.

윈도우 창에 쓰는 버튼이 스타일화 된 모습

[닫기]버튼이나 [최소화] 버튼은 클릭되었을 시의 경우의 수만 만들어주면 되기 때문에 버튼으로 제작해도 상관없습니다. 하지만 여기서 문제인 것은 저 최대화 버튼인데요.
최대화를 클릭 하게 되면 이전 크기로 돌아오기 위한 상태의 모양도 만들어 주어야 합니다.

두가지의 경우를 만들어야 하는 [최대화]버튼

이럴 경우에는 버튼 컨트롤을 사용하지 않고 다른 컨트롤을 사용해 주어야 합니다.
바로! Toggle(토글) 버튼입니다.

이번 시간에는 위와 같이 토글 버튼을 제작하고,
최대화 기능코드를 넣는 것 까지 강좌를 통해 알아보도록 하겠습니다.

1) 실버라이트나 WPF 프로젝트 둘 다 토글버튼 컨트롤을 쓰기 때문에 아무 프로젝트를 열어도 상관없습니다만,
위의 예제와 같이 최대화 버튼을 사용하는 프로젝트는 WPF 데스크탑 어플리케이션이기 때문에 WPF로 열어보도록 하겠습니다.

사각형과 패스를 이용해 다음과 같이 최대화에 필요한 요소들을 그려봅니다. 왼쪽부터 배경 / 기존화면으로 / 최대화 를 간단하게 아이콘으로 그려보았습니다. 사각형이 두개 겹친 기존화면 아이콘은 캔버스로 묶어주었습니다.

2) 간단하게 그린 최대화와 기존화면 아이콘을 배경 가운데에 같이 배치해 줍니다. 그리고 이 요소들을 한꺼번에 전체 선택 후 Ctrl+G 단축키를 눌러 그리드 그룹으로 묶어주도록 합니다. 여기까지가 토글버튼을 만들기 위한 준비가 완료되었습니다!

3) 그리드 그룹을 선택한 상황에서 Tools > Make Into Control을 클릭합니다.

4) 팝업이 뜨며 어떤 컨트롤로 만들 것인지에 대한 설정을 묻게 되는데, 검색창에 토글이라고 검색하면 다음과 같이
토글 버튼 컨트롤이 나타납니다. 선택 후, 컨트롤의 이름을 설정해 주고 확인 버튼을 클릭합니다.

5) 토글 버튼으로 컨트롤이 만들어지며 템플릿안으로 들어와 있는 상태입니다.
여기서 컨텐트 프레젠터라는 레이어는 이 강좌에서 쓰지 않기 때문에 지워주도록 합니다.
States 패널에서 Checked 와 Unchecked 되었을 때가 바로 우리가 하고자 하는 두가지 경우의 상태입니다.

6) Checked 상태를 클릭하여 녹화화면으로 들어갑니다.
MaxIcon이라 이름 붙인 최대화 아이콘은 Visibility를 Hidden으로,
NormalIcon이라 이름 붙인 기존화면 아이콘은 Visible로 설정합니다.

7) 이번엔 Unchecked 녹화상태에서 반대로 visibility를 설정합니다.

8) 토글버튼의 상태작업까지 완료를 하였습니다. 템플릿에서 빠져나옵니다.
내가 맞게 했는지 확인하려면 속성에서 기본속성의 IsChecked를 클릭해보면 알 수 있습니다.

9) 이렇게 만든 토글버튼 컨트롤! 이제 실제로 기능을 넣어보도록 하겠습니다.
체크 되었을 시 (Checked) : 창이 최대화 되게
체크가 안되어있을 시 (Unchecked) : 창이 원래 상태로 돌아오게 할텐데요.

토글버튼에 네임을 주고 속성의 이벤트화면으로 전환 후 Checked일 때의 이벤트를 제작하기 위해 더블클릭합니다.