커스텀 컨트롤에 시각적 상태 추가하기

지난 시간에 이어 이번에는 컨트롤 템플릿을 업데이트 해서 버튼이 포커스를 가질 때 아웃라인을 보여줄 수 있고 페이지에서 버튼이 눌러졌을 때 그  위치를 옮길 수 있는 다른 시각적 상태를 추가할 것이다.

1. [Objects and Timeline] 패널에서, [Border] 컨트롤을 선택한다.
2. 이제 [States] 패널로 전환해 해당 버튼 컨트롤에 대해 사용할 수 있는 시각적 상태를 검토해보자.

[그림 57] 상태 패널은 선택된 Base를 보여준다

[States] 패널은  해당 컨트롤의 모든 시각적 상태를 표시한다. [Base]  상태는 모든 상태에 공통으로 존재하는 요소를 정의한다.이 상태에서 해당 컨트롤의 기본 모양을 정의하는 템플릿을 조정할 수 있다. 그 다음 다른 상태의 각각에 대해,  해당 상태의 시각적 신호를 제공하는 식으로 템플릿을 변경한다.예를 들면 [Focused] 상태에서는 컨트롤 주의의 테드리를 표시한다.

3. [FocusStates] 범주 아래에서, [Unfocused] 상태를 선택해 버튼이 포커스를 가지지 못할 때 해당 상태가 신호하는 것을 기록하도록 만든다. 이 모드 동안의 해당 템플릿에 대한 모든 변경은 특정 상태에만 적용한다.

[그림 58] 익스프레션 블렌드에서 상태 기록

상태를 선택할 때 몇 가지 변경이 발생한다. 먼저 선택한 상태의 레이블 옆에 있는 붉은 색 원은 현재 활성이라는 것을 가리킨다. 그 다음 디자인 영역 주위에 붉은 색 아웃라인이 나타난다. 마지막으로 디자인 영역의 왼쪽 구성에 캡션이 표시되고 상태 기록이 켜졌음을 가리킨다. 이 모드에서 템플릿의 해당 요소에 대한 모든 변경은 기록되고 XAML 문서에 저장된다. 실행시, 이러한 변경은 그 상태가 활성화 될 때 기본 템플릿에 적용된다.

4. 버튼이 포커스를 잃을 때 버튼 주위의 테두리를 숨기려면, 다음의 작업을 수행한다.

• [Objects and Timeline] 패널에서 [Border]를 선택한다.
• [속성] 창에서 [Brushes] 범주를 확장하고 [BorderBrush] 속성을 선택한다.
• [Show advanced properties] 아이콘을 클릭하고 브러시의 [Opacity] 속성을 0으로 설정한다.

[그림 59] [Unfocused] 상태일 경우 테두리를 투명하게 만들기

5. Go back to the [States] 패널로 다시 돌아가서  [CommonStates] 범주에서 [Pressed] 상태를 선택해 마우스가 클릭될 때 발생한 상태를 기록하도록 만든다.

6. [Properties] 패널에서, [Transform] 범주를 확장하고 [Translate] 변환을 선택한다. X 와 Y 값을 2로 설정한다. 이렇게 하면 버튼이 클릭될 때 마다 버튼의 위치를 약간 이동해서, 버튼이 눌러졌다는 것을 알려준다.

[그림 60] [Pressed] 상태 동안 버튼의 위치 이동하기

7. 마지막으로, [States] 패널에서 [Base] 템플릿을 선택해 레코딩 모드를 끈다.

8. [CTRL + S]를 눌러 갱신된 파일을 저장한다.

9. 이제 커스텀 컨트롤에 대한 시각적 상태 추가를 완료 했으므로, 업데이트된 버튼을 테스트할 준비가 되었다.

• [F5]를 눌러 애플리케이션을 빌드하고 실행한다.
• 텍스트를 입력하고 Tab 키를 눌러 버튼으로 입력 포커스를 변경한다.
• 버튼이 포커스를 받을 때, 버튼이 활성화되었음을 가리키기 위해 테두리가 버튼 주위에 표시된다.
• 이제 스페이스 바를 누르거나 버튼을 클릭해 버튼의 위치가 얼마나 이동하는지 보자.