실버라이트 팁

STEP03. 익스프레션 블렌드의 툴 박스 II 짱묜 평점: 없음 조회: 3520

기본적인 툴의 사용법을 마쳤으니 이제 컨트롤 툴을 사용하는 방법을 알아볼 차례입니다. 컨트롤 중 레이아웃 컨트롤은 컨테이너의 성격이 강하기 때문에 보이는 모습에는 특징이 없습니다. 따라서 처음 접하는 사용자에게는 그 차이가 잘 와닿지 않을 수 있습니다. 지금은 레이아웃을 생성하는 방법 정도만 알아보도록 하고 자세한 내용은 다음 스텝에서 다루도록 하겠습니다.

 

Grid 컨트롤
실버라이트나 WPF 프로젝트의 유저컨트롤, 페이지 등과 같은 대부분의 문서 내에서 최상위 레이아웃으로 사용됩니다. 또한 행과 열의 속성을 가지고 있기 때문에 표 형태의 레이아웃을 구성할 때에 많이 사용됩니다. [Grid] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성합니다.


그리드는 왼쪽과 윗쪽의 파란 영역에 마우스를 갖다 대면 행과 열을 삽입할 수 있는 노란색 막대가 나타납니다. 원하는 지점을 클릭하면 행과 열이 삽입됩니다.




Canvas 컨트롤
영역을 기준으로 하는 좌표를 사용하여 자식요소를 절대배치 합니다. 자식요소와 부모 캔버스 사이의 거리를 나타내는 Left, Top 값을 가지고 있습니다. [Canvas] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성합니다.

 


StackPanel 컨트롤
패널 내에 자식요소를 차례차례 쌓을 수 있습니다. 가로, 세로 속성을 이용하여 자식요소가 쌓이는 방향을 정의할 수 있으며 기본값은 세로입니다. [StackPanel] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성합니다.

 


ScrollViewer 컨트롤
컨텐츠가 화면에서 보여줄 영역보다 클 경우에 사용합니다. 하나의 자식요소만 가질 수 있으며 다양한 스크롤 지원 프로퍼티와 메소드가 있습니다. [ScrollViewer] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성합니다.



Border 컨트롤

개체 주위의 테두리를 그리거나 배경을 넣을 때 사용합니다. 하나의 자식요소만 가질 수 있으며 테두리의 둥글기나 두께 등의 속성을 설정할 수 있습니다. [Border] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성합니다.




Viewbox 컨트롤

자식요소를 늘이거나 확대할 경우 사용합니다. 뷰박스에 여러 개의 자식요소를 그룹화하여 넣게 되면 뷰박스의 사이즈를 따라 자식요소들의 크기가 같은 비율로 변경됩니다. 또한 사이즈가 동일한 여러 개의 뷰박스에 크기가 다른 개체들를 각각 넣으면 개체들의 크기가 뷰박스의 사이즈에 꽉차게 맞추어져 보이게 됩니다. [Viewbox] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성합니다.

TextBlock 컨트롤
주로 두 줄 이상의 텍스트 단락을 필요로 하지 않는 한 줄 단위의 간단한 텍스트를 표시합니다. [TextBlock] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성하고 텍스트를 입력합니다.




TextBox 컨트롤

주로 입력 폼과 같은 곳에서 사용자의 텍스트 입력을 받거나 수정할 수 있습니다. [TextBox] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성하고 텍스트를 입력합니다.

RichTextBox 컨트롤
서식이 있는 텍스트나 이미지, 표 등과 같은 풍부한 컨텐츠를 표시합니다. 이미지와 서식이 필요한 기사나 블로그와 같은 형식의 컨텐츠를 작성할 경우 사용합니다. [RichTextBox] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성하고 텍스트 및 이미지를 입력합니다.



PasswordBox 컨트롤
암호 입력을 위한 컨트롤입니다. 비밀번호와 같은 암호를 입력할 경우에 사용되며 자동으로 마스킹 문자로 처리됩니다. 이 때 마스킹 문자의 기본값은 글머리기호 문자(●) 입니다. [PasswordBox] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성하고 텍스트를 입력합니다.

 


Button 컨트롤

클릭 이벤트를 가지고 있는 컨트롤로 제일 자주 사용되는 컨트롤입니다. [Button] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성합니다. 한번 더 더블 클릭하면 버튼의 이름을 변경할 수 있습니다.

 


ChechBox 컨트롤

항목을 선택하거나 선택을 취소하는 옵션을 설정할 경우에 사용합니다. 하나 혹은 둘 이상의 항목에 적용할 수 있습니다. [CheckBox] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성합니다. 한번 더 더블 클릭하면 체크박스의 이름을 변경할 수 있습니다.




ComboBox 컨트롤
항목을 선택할 수 있는 목록이 들어있으며 드롭다운 할 수 있는 컨트롤입니다. [ComboBox] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성하고, 컨트롤이 선택된 상태에서 마우스 오른쪽 버튼을 눌러 나오는 메뉴중 [Add ComboBoxItem]을 선택하여 콤보박스 아이템을 삽입합니다.

콤보박스 아이템을 더블 클릭하면 이름을 변경할 수 있습니다.



RadioButton 컨트롤
여러 개의 항목 중 하나의 항목만 선택할 수 있는 옵션을 설정할 경우 사용합니다. 둘 이상의 항목에 적용되며 사용자는 아무것도 선택하지 않을 수 없습니다. [RadioButton] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성합니다. 한번 더 더블 클릭하면 라디오버튼의 이름을 변경할 수 있습니다.

 

ListBox 컨트롤
[ComboBox]와 보여주는 방식만 다른 컨트롤입니다. 여러 개의 항목을 선택할 수 있는 목록이 들어있으며 보여줄 영역보다 항목이 길 경우 스크롤이 나타납니다. [ListBox] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성하고, 컨트롤이 선택된 상태에서 마우스 오른쪽 버튼을 눌러 나오는 메뉴 중 [Add ListBoxItem]을 선택하여 리스트박스 아이템을 삽입합니다.


리스트박스 아이템을 더블 클릭하면 이름을 변경할 수 있습니다.

 

ScollBar 컨트롤
[ScrollViewer]나 [ListBox] 안에 들어있는 스크롤바와 기능이 같습니다. 제한된 영역에서 보다 많은 컨텐츠를 보여주기 위한 컨트롤이며 일반적으로 다른 컨트롤에 포함되어 있습니다. [ScrollBar] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성합니다.



Slider 컨트롤
소리의 크기나 이미지의 투명도 등의 값의 범위를 설정하고 키를 이용하여 범위 내의 값을 선택합니다. 선택한 값에 따라 개체의 상태가 변경됩니다. [Slider] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성합니다.

 

TabControl 컨트롤
같은 공간에 여러 개의 화면을 보여주기 위해 사용합니다. 화면의 갯수만큼 탭아이템이 생성되며 사용자는 탭아이템을 눌러 화면간 이동을 할 수 있습니다. [TabControl] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성합니다.


[Properties]-[Common Properties]패널에서 [Heder]를 이용하여 탭아이템의 이름을 변경할 수 있습니다.


GridSplitter 컨트롤

그리드의 행과 열을 사용자가 다시 배분하기 위해 사용합니다. 우리가 일상적으로 접하는 워드나 파워포인트와 같은 다양한 프로그램에서 화면의 분할을 조절하기 위해 사용하는 것과 같습니다. 먼저 위에서 학습한 경험을 이용하여 2열로 분할된 Grid를 생성하고 열을 구분하기 위하여 각각의 열에 색이 다른 사각형을 꽉 채워 넣습니다.

 

그리고 [GridSplitter] 컨트롤을 선택하여 생성된 그리드의 열이 나눠지는 영역(가운데 빨간 점선)에 갖다 놓으면 됩니다. 프로그램을 실행한 후에 [GridSplitter]을 조절하면 그리드 영역이 재분배 됩니다.

 

 

태그 : 블렌드, 블렌드강좌, 익스프레션 짱묜, 툴박스 Blend, Blend4, Expression
작성자 정보
짱묜
Level 82
 [EXP.36/250]

메일:  비공개

글등록 +12 2618 덧글등록 +3 1639
자기소개
(。◕‿◕。)ZzangMyon♡ 랑이엄마 Jang Mi Yeon
2008~2012 Microsoft Expression Blend MVP
HOONS닷넷(http://www.hoons.kr) Expression 시삽
글 공유하기 |
  tweet facebook
2011-06-13 오전 3:49:43
나도한마디
사용자
맨날맑음            [2011-06-13]
Level 74
 [EXP.183/250]
감사합니다!!
태그로 엮인글
[WPF Q&A] Blend 관련 질문입니다.[1]+1  Robs
[구인&교육정보] WPF, 실버라이트, Expression Blend 디자이너 찾습니다.  슬로우소프트
[구인&교육정보] 블랜드 디자이너 찿고 있습니다.[1]  kimtoa
[구인&교육정보] <재택근무 환영> Blend 프리랜서 디자이너를 구인합니다  바보쿠우
[실버라이트 팁] blend 단축키[1]  sa2랑
[실버라이트 팁] vs2010에서 silverlight5프로젝트를 할때 open in expression blend 수정  시선
[실버라이트 Q&A] Visual Studio 2010에 비해서 Expression Blend의 장점은?[1]  심플리즘
[구인&교육정보] Blend 사용없이 Xaml Layout 구현 가능자 구인[1]+3  좋은친구들
[구인&교육정보] Blend UI Designer를 모십니다.  ㅎㅎ
[실버라이트 Q&A] ms expression 설치 관련 문의  제시카
글리스트
vs2010에서 silverlight5프로젝트를 할때 open in expression blend 수정  시선
Behavior 로 구현한 Silverlight TextBox Watermark[1]+1  joseph
DrawingVisual 객체를 이용해서 컨트롤 그리기  Linus
[실버라이트 스터디 3주차] 데이터그리드의 Row Detail과 Javascript Access #2 파일첨부 시선
[실버라이트 스터디 3주차] 데이터그리드의 Row Detail과 Javascript Access #1 파일첨부 시선
[실버라이트 스터디 2주차] 데이터그리드에서 이미지 추가/수정/삭제[1]  시선
SECTION02. 익스프레션 블렌드의 레이아웃  짱묜
[실버라이트 스터디] 6월 25일 더디어 실버라이트 스터디를 시작했습니다[5]  시선
실버라이트4에서 XAML 디버깅하기[4]+1  Linus
STEP03. 익스프레션 블렌드의 툴 박스 III  짱묜
 ★현재글->   STEP03. 익스프레션 블렌드의 툴 박스 II[1]  짱묜
STEP03. 익스프레션 블렌드의 툴 박스 I[2]  짱묜
Silverlight의 Navigation Framework 사용하기 - (1)[1]  Linus
STEP02. 익스프레션 블렌드의 인터페이스 - Results 패널, 그 외  짱묜
STEP02. 익스프레션 블렌드의 인터페이스 - Objects and Timeline 패널  짱묜
STEP02. 익스프레션 블렌드의 인터페이스 - Properties 패널  짱묜
STEP02. 익스프레션 블렌드의 인터페이스 - Projects 패널[1]  짱묜
STEP02. 익스프레션 블렌드의 인터페이스 - Help 메뉴  짱묜
STEP02. 익스프레션 블렌드의 인터페이스 - Window 메뉴  짱묜
STEP02. 익스프레션 블렌드의 인터페이스 - Tools 메뉴  짱묜
STEP02. 익스프레션 블렌드의 인터페이스 - Project 메뉴  짱묜