● 라디오버튼(RadioButton)
라디오버튼 컨트롤은 여러 옵션중 하나의 선택을 나타낼 때 쓰입니다. ‘Checked’, ‘Unchecked’ 상태를 가진다는 점에서 체크박스와 유사하나 라디오버튼 컨트롤에 그룹을 지어주어 그중 한 개의 버튼에만 ‘Checked’상태를 나타내게 합니다.


[따라하기] 라디오버튼

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



02. <F5>를 눌러 웹 브라우저를 실행합니다. 방금 생성한 라디오버튼의 동작을 실행해 봅니다. 4개의 라디오버튼 중 하나의 버튼만 선택이 됩니다.



03. 실행 창을 끄고 다시 블렌드로 돌아옵니다. 오른쪽 상단 [Properties]-[Common Properties] 패널을 보시면 ‘GroupName' 옵션이 있습니다. 첫 번째 두 번째 라디오버튼 컨트롤에는 ’Group1' 세 번째 네 번째 라디오버튼에는 ‘Group2'라고 그룹명을 입력합니다.



04. <F5>를 눌러 웹 브라우저를 실행합니다. 라디오버튼의 동작을 실행해 봅니다. 2개의 그룹에 각각 하나씩 선택이 되는 것을 볼 수 있습니다.



라디오버튼 컨트롤을 간단히 살펴보았습니다.

저작자 표시 비영리 변경 금지
신고
Posted by 도온


● 체크박스(CheckBox)
체크박스는 여러 옵션에 대한 선택을 지정할 때 쓰이는 컨트롤 입니다. 선택과 선택하지 않음을 나타내는 토글버튼(ToggleButton)과 같이 ‘Checked’, ‘Unchecked’ 상태를 가지고 있습니다.


[따라하기] 체크박스

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



02. 오른쪽 상단 [Properties] 패널에서 [Common Properties]를 살펴보겠습니다. 앞서 살펴본 버튼컨트롤에는 없는 'IsChecked','IsThreeState' 옵션들이 보입니다. ‘IsChecked' 옵션을 체크하면 체크박스가 선택됐을 상태로 보여줍니다.



03. 오른쪽 상단 [Properties]-[Common Properties] 패널에서 'IsThreeState' 옵션을 선택하게 되면 체크박스는 Unchecked, Checked, Indeterminate 세가지 상태로 표시됩니다.



04. 체크박스를 선택하여 마우스 오른쪽을 클릭하면 서브메뉴들이 보입니다. [Edit Templates]-[Edit a Copy]를 클릭합니다. 컨트롤의 시스템 템플릿은 접근이 불가능하기 때문에 템블릿의 복사본을 만든 다음 접근합니다.



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



06. 템플릿 모드로 전환되었습니다. 화면의 왼쪽 상단 패널 [States]에서 ‘CheckStates’라는 스테이츠 그룹을 확인하고 'Checked'일 때 템플릿의 변화를 확인해봅니다.



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

 

저작자 표시 비영리 변경 금지
신고
Posted by 도온

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

 

저작자 표시 비영리 변경 금지
신고
Posted by 도온

익스프레션 블렌드의 컨트롤

익스프레션 블렌드(Expression Blend)는 WPF(Windows Presentation Foundation) 및 실버라이트 어플리케이션(Silverlight 3 Application)의 디자인적 접근이 용이하여 디자이너와 개발자가 협업하는데 많은 도움을 주고 있으며, 그 대표적인 것으로 다양한 컨트롤을 제공한다는 점을 꼽을 수 있습니다.

실버라이트3 에서는 WPF보다 많은 컨트롤들을 제공 하고 있진 않지만, 추가적으로 개발된 실버라이트 어플리케이션 컨트롤들을 직접 블렌드로 추가하여 사용할 수도 있고, 블렌드의 버전이 UP될 때 마다 WPF에서 사용되어지는 컨트롤들이 계속적으로 추가될 것이라고 예상하고 있습니다.

이번 장에서는 실버라이트 어플리케이션에서 제공하는 컨트롤들을 다루어 보면서 컨트롤에 대해 알아봅니다.

 


[실버라이트 컨트롤들]

저작자 표시 비영리 변경 금지
신고
Posted by 도온

티스토리 툴바