STEP 01_1. 기본 컨트롤 _ 버튼

STEP 01. 기본 컨트롤

컨트롤이란 윈도우 폼이나 인터넷 창으로 띄워지는 응용 프로그램에 표시되는 버튼이나 체크박스, 스크롤바, 리스트박스 등과 같이 사용자가 응용 프로그램과 상호 작용할 수 있도록 하는 구성 요소입니다. 그리고 작업자는 블랜드에서 컨트롤의 템플릿과 스타일을 이용하여 컨트롤에 쉽게 접근할 수 있고, 외관적인 속성 뿐만 아니라 동작이나 구조도 원하는 방향으로 설정 할 수 있습니다. 또한 컨트롤의 컬러와 같은 속성들을 리소스로 변환하여 일관적으로 적용할 수 있어서 디자이너의 다양한 디자인 활용을 이끌어 냅니다. 그러한 디자인 활용이전에 실버라이트가 제공하는 컨트롤이 어떠한 것들이 있는지 먼저 단일항목을 나타내는 기본 컨트롤부터 살펴보겠습니다.


● 버튼(Button)
버튼은 UI(User Interface)를 구성할 때 많이 쓰이는 컨트롤 중 하나입니다. 실버라이트에서 제공하는 버튼 컨트롤은 우리가 일반적으로 버튼을 사용하면서 눈으로 보는 버튼동작들 마우스 오버, 마우스 클릭과 같은 동작들과 버튼의 구성요소들이 미리 구현되어 있으며, 디자이너들은 블렌드에서 컨트롤의 템플릿과 스테이츠로 접근하여 확인할 수 있습니다.


[따라하기] 버튼

01. 블렌드를 실행하고 [File] -[New Project] 메뉴를 실행하여 실버라이트 애플리케이션 프로젝트를 생성합니다. 화면의 왼쪽 상단 패널중 [Assets] 패널에서 [Controls]-[Button] 메뉴를 선택한 다음 아트보드에 드래그 하여 버튼을 생성합니다.

02. <F5>를 눌러 웹 브라우저를 실행합니다. 방금 생성한 버튼의 동작을 실행해 봅니다. 마우스 오버, 마우스 클릭, 마우스 리브 등의 동작들이 버튼의 컬러 변화로 확인할 수 있습니다.

 

03. 실행 창을 끄고 다시 블렌드로 돌아옵니다. 오른쪽 상단 [Properties] 패널에서 [Common Properties]를 통해 버튼컨트롤의 기능들을 엿볼 수 있습니다.(그외 속성창들의 정의는 세션2- STEP 01. 익스프레션 블랜드의 인터페이스-03. 속성패널에서 확인할 수 있습니다.) 먼저 [Properties]-[Common Properties] 의 [ToolTip]에 ‘버튼에 대한 설명 입니다.’라고 텍스트를 입력합니다.
 

04. 그다음 [ClickMode] 는 ‘Release’로 그대로 두고 [Content] '클릭하기'라고 텍스트를 입력합니다.

NOTE ClickMode 버튼의 속성중 클릭이벤트 발생시기를 [Properties]-[Common Properties]의 [ClickMode]에서 설정할 수 있습니다.   - Release : 마우스 커서로 버튼 컨트롤을 눌렀다가 뗐을때 클릭 이벤트가 발생합니다. - Press : 마우스 커서로 버튼 컨트롤을 눌렀을 때 클릭 이벤트가 발생합니다. - Hover : 마우스 커서가 버튼 컨트롤에 오버됐을 때 클릭이벤트가 발생합니다.

05. 그다음 [Cursor]를 ‘Hand’로 선택합니다.

NOTE Cursor Arrow Eraser Hand IBeam None 커서가 나타나지 않습니다. SizeNS SizeWE Stylus Wait

06. <F5>를 눌러 웹 브라우저를 실행합니다. 버튼에 커서가 오버될 때 손 모양으로 바뀌고 툴 팁이 뜨는 것을 확인할 수 있습니다.

 
07. 실행 창을 끄고 다시 블렌드로 돌아옵니다. 버튼을 선택하여 마우스 오른쪽을 클릭하면 서브메뉴들이 보입니다. [Edit Templates]-[Edit a Copy]를 클릭합니다. 컨트롤의 시스템 템플릿은 접근이 불가능하기 때문에 템블릿의 복사본을 만든 다음 접근합니다.

08. 스타일 리소스 생성 창이 띄워지면 Name(Key)에 스타일 이름을 적당히 넣어준 다음 OK 버튼을 클릭합니다.

10. 템플릿 모드로 전환되었습니다. 화면의 왼쪽 상,하단 패널 [States]와 [Objects and Timeline]을 살펴보겠습니다. 먼저 [States]패널을 보면 ‘CommonStates’와 ‘FocusStates’란 스테이츠 그룹 안에 ‘MouseOver’ ,‘Pressed’ ,‘Disabled’, ‘Focused’와 같은 상태들을 확인할 수 있습니다. [Objects and Timeline]패널의 Template 에서는 버튼이 어떤 구성으로 이루어져 있는지 레이어 별로 확인 할 수 있습니다.

11. [States]패널의 ‘CommonStates’ 그룹 안에 ‘MouseOver’를 선택합니다. [Objects and Timeline]패널의 ‘Show Timeline‘에 ’MouseOver’상태표시가 뜨고 버튼 템플릿 구성요소중 ‘BackgroundAnimation’레이어와 ‘BackgroundGradient’ 레이어에 빨간불이 들어오고 아트보드에 버튼의 컬러가 바뀐 것을 확인 하였습니다.

12. 이번에는 [States]패널의 ‘CommonStates’ 그룹 안에 ‘Pressed’를 선택합니다. 스테이츠이 상태에 맞게 템플릿의 컬러 속성이 바뀌는 것을 볼 수 있습니다.

버튼컨트롤을 간단하게 살펴보았습니다. 스테이츠와 템플릿의 자세한 내용은 세션7 ‘스타일과 템플릿다루기‘에서 알아보겠습니다.

NOTE ContentPresenter 컨덴츠프리젠터(ContentPresenter) 컨트롤은 문자열이나 이미지와 같은 컨덴츠를 담을 수 있습니다. 버튼 컨트롤이나 체크박스, 라디오버튼과 같은 컨트롤들에 내장되여 많이 쓰이는 기초 컨트롤입니다. 컨트롤의 이름, 또는 모양 등을 바꿀 때 필요합니다. 자식객체를 가지거나 컨덴츠를 담는 컨트롤들이 기본적으로 가지고 있는 구성요소 컨트롤입니다.