컨트롤 개요
.png "이 페이지는 WPF 및 Silverlight 2에 적용됨")
Microsoft Expression Blend는 다양한 기능의 WPF(Windows Presentation Foundation) 및 Silverlight 2 응용 프로그램용 사용자 인터페이스를 디자인할 수 있도록 풍부한 컨트롤을 제공합니다.
[!참고]
Microsoft Silverlight 1.0 프로젝트에서 사용할 수 있는 컨트롤의 목록은 Silverlight 1.0 개요의 "컨트롤" 단원을 참조하십시오.
Expression Blend에서는 기본 컨트롤이나 시스템 WPF 컨트롤을 좀 더 구체적이고도 다양하게 사용할 수 있습니다. 원하는 대로 컨트롤을 사용자 지정하고 스타일을 적용하여 다양한 방식으로 컨트롤을 활용할 수 있습니다. 또한 Expression Blend의 리소스를 이용하여 사용자 지정 컨트롤에 고유하면서도 멋진 모양을 제공하여 더욱 독보적인 환경을 구축함으로써 나만의 차별화된 응용 프로그램을 만들고 모든 응용 프로그램에 걸쳐 일관된 UI(사용자 인터페이스)를 만들 수 있습니다. Expression Blend에서 제공되는 컨트롤 편집 모델의 가장 큰 장점 중 하나는 개발자가 프로그래밍 논리를 작성하는 것과 동시에 디자이너가 응용 프로그램의 모양을 디자인할 수 있다는 점입니다. 디자이너가 직접 디자인을 만들 수 있기 때문에 기획 단계에서 구현 단계로 전환될 때 디자인이 손실될 염려가 없습니다.
컨트롤이란?
컨트롤 또는 UI 디자인 요소는 응용 프로그램에 표시되는 구성 요소입니다. 단추나 선택 가능한 항목 목록과 같은 컨트롤을 통해 사용자는 응용 프로그램과 상호 작용할 수 있습니다. Expression Blend에서 사용할 수 있는 컨트롤 형식과 컨트롤을 사용자 지정하는 방법을 알고 있으면, 응용 프로그램의 모양과 동작을 정확히 원하는 방식대로 설정할 수 있습니다.
Expression Blend를 사용하면 아트보드에서 시각적으로 컨트롤을 사용하고 속성 패널 및 인터랙션 패널에서 모양과 동작을 구성할 수 있습니다. 예를 들어 아트보드에 Button 컨트롤을 추가하고 속성 패널에서 값을 수정하여 모양을 변경한 다음 인터랙션 패널에서 단추(Button)에 대한 이벤트 트리거를 추가하여 단추를 클릭할 때 애니메이션 타임라인이 시작되도록 할 수 있습니다.
이렇게 간단한 액션뿐만 아니라 다음과 같은 작업도 컨트롤에서 수행할 수 있습니다.
브러시 색과 같은 속성을 다른 컨트롤에 적용할 수 있는 리소스로 변환하여 고유하면서도 일관된 응용 프로그램 모양을 만듭니다. 리소스 만들기에서 예를 참조하십시오.
컨트롤의 모양과 동작을 정의하는 새로운 템플릿과 스타일을 만들어 고유하면서도 일관된 응용 프로그램 모양을 만들 수도 있습니다. 템플릿과 스타일에 트리거를 포함할 수 있으며 리소스를 사용하여 속성을 설정할 수 있습니다. 자세한 내용은 아래 나와 있는 스타일 및 템플릿을 참조하십시오. 스타일 리소스 만들기 및 컨트롤 템플릿 만들기 또는 편집에서 WPF 예를 참조하십시오. 시스템 컨트롤의 재사용 가능한 템플릿 만들기 및 Silverlight 2 프로젝트에서 컨트롤의 스킨 만들기에서 Silverlight 2 예를 참조하십시오.
컨트롤에 애니메이션 및 대화형 작업을 추가합니다. 간단한 애니메이션 만들기에서 예를 참조하십시오.
코드 숨김 파일의 이벤트 처리기 메서드를 사용하여 더욱 복잡한 컨트롤 동작을 프로그래밍할 수 있습니다. 새 이벤트 처리기 메서드 만들기에서 WPF 예를 참조하십시오. Silverlight 2 응용 프로그램에서 동적으로 새 페이지 로드에서 Silverlight 2 예를 참조하십시오.
나만의 고유한 사용자 지정 컨트롤을 디자인하여 Expression Blend에서 사용할 수 있습니다. 실습 정보: 사용자 지정 WPF 컨트롤 만들기 및 실습 정보: WPF 사용자 정의 컨트롤 만들기에서 WPF 예를 참조하십시오. Silverlight 2 프로젝트에서 새 사용자 정의 컨트롤 만들기에서 Silverlight 2 예를 참조하십시오.
.gif "Cc294749.7e183f1f-37d8-4dcb-980c-19a5d61ca087(ko-kr,Expression.10).gif")
맨 위로 이동
컨트롤의 범주
Expression Blend에서는 다양한 형식의 컨트롤을 사용하여 시각적으로 고유한 응용 프로그램을 간편하게 디자인할 수 있습니다.
모든 컨트롤은 도구 상자의 아래쪽에 있는 자산 라이브러리 .png "Cc294749.0224cabd-5da1-4e01-bddd-4a647401a098(ko-kr,Expression.10).png")
단추를 클릭하여 자산 라이브러리에서 찾을 수 있습니다. 도구 상자는 Expression Blend의 왼쪽에 있습니다. 자산 라이브러리에서 UI 요소를 선택하면 해당 요소에 대한 아이콘이 자산 라이브러리 단추 위에 나타나 나중에 다시 해당 요소를 쉽게 사용할 수 있습니다. 가장 일반적인 UI 요소는 자산 라이브러리 단추 위에 이미 표시되어 있으므로 더 쉽게 찾을 수 있습니다.
다음 그림에서는 일반적인(공용) 몇 가지 UI 요소가 개체로 추가된 후의 아트보드를 보여 줍니다. 펜 .png "Cc294749.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(ko-kr,Expression.10).png")
도구를 사용하면 패스 .png "Cc294749.e1882d38-c773-4abe-a2b9-10abd293e119(ko-kr,Expression.10).png")
개체가 생성됩니다. 자산 라이브러리에서 Image 컨트롤을 선택한 후에는 도구 상자에 이미지 .png "Cc294749.0594f05b-2193-4385-86a0-2d352cacfe55(ko-kr,Expression.10).png")
아이콘이 나타났습니다.
도구 상자와 아트보드
.png "Cc294749.abd88d9d-ab6c-444e-8037-469cdcb5586a(ko-kr,Expression.10).png")
.png "Cc294749.25182a96-9a69-478a-9cfe-5b360e6a9bea(ko-kr,Expression.10).png") |
주황색 견본을 나타내는 Path_40이라는 패스 개체 |
.png "Cc294749.eb6fad93-f17e-4f62-a926-8c8651862891(ko-kr,Expression.10).png") |
응용 프로그램에서 레이블이 "Reset Image"로 지정된 단추를 나타내는 명명되지 않은 단추 개체. 개체 및 타임라인에서 밑줄(_)은 단추의 선택키를 식별하는 데 사용됩니다. |
.png "Cc294749.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(ko-kr,Expression.10).png") |
색 견본의 페인트 칩 중 하나를 나타내는 Rectangle_44라는 사각형 개체 |
.png "Cc294749.a5d608f2-bba2-48c5-8b15-2c115db86acc(ko-kr,Expression.10).png") |
공간의 배경 이미지를 나타내는 photo_bathroom이라는 이미지 개체 |
.png "Cc294749.f0c1ff71-7814-42ba-806b-7ea92d616e69(ko-kr,Expression.10).png") |
"Color Swatch Sample Pack 1"이라는 응용 프로그램 제목을 나타내며 포함된 텍스트로 식별되는, 명명되지 않은 텍스트 블록 |
다음 범주를 고려해서 컨트롤을 검토하여 어떤 컨트롤을 사용할 것인지 결정하시기 바랍니다.
범주 |
기능 |
예 |
|---|---|---|
도형(Silverlight 1.0 프로젝트에서 사용 가능) |
타원, 선, 사각형을 이용하여 풍부한 시각적 요소를 만드는 데 사용되며, 원하는 모양(단순하거나 복잡하거나 화려한 색이 지정된 모양 등)을 자유롭게 만들 수 있습니다. 자세한 내용은 도형 및 패스 그리기를 참조하십시오. Expression Blend에서는 속성 패널을 사용하거나 스타일만 사용(템플릿은 사용 안 함)하여 요소의 모양과 동작을 사용자 지정할 수 있습니다. 자세한 내용은 스타일 편집을 참조하십시오. |
Rectangle Ellipse Path(선 |
레이아웃 패널 |
다른 UI 요소의 컨테이너로 사용되어 위치 및 창 크기 조정 동작을 지정합니다. 대부분의 UI 요소와 달리 Grid와 같은 일부 레이아웃 패널에는 둘 이상의 자식 요소를 넣을 수 있습니다. 이를 이용해서 응용 프로그램 디자인을 다양하게 구성하고 배치할 수 있습니다. 자세한 내용은 레이아웃을 참조하십시오. Expression Blend에서는 속성 패널을 사용하거나 스타일을 사용(템플릿은 사용 안 함)하여 요소의 모양과 동작을 사용자 지정할 수 있습니다. 자세한 내용은 스타일 편집을 참조하십시오. |
Canvas Dock Grid Stack Wrap |
문서/텍스트 |
문서 프레젠테이션 및 텍스트 서식을 정의하는 데 사용됩니다. 자세한 내용은 텍스트 및 입력 체계 개요를 참조하십시오. Expression Blend에서는 속성 패널을 사용하거나 스타일 및 템플릿을 사용하여 요소의 모양과 동작을 사용자 지정할 수 있습니다. 자세한 내용은 컨트롤 템플릿 만들기 또는 편집 및 스타일 편집을 참조하십시오. |
TextBox TextBlock RichTextBox Label PasswordBox |
컨트롤 |
사용자가 응용 프로그램과 상호 작용하는 방법을 제공합니다. Expression Blend에서는 속성 패널을 사용하거나 스타일 및 템플릿을 사용하여 요소의 모양과 동작을 사용자 지정할 수 있습니다. 자세한 내용은 컨트롤 템플릿 만들기 또는 편집 및 스타일 편집을 참조하십시오. |
Button ListBox Menu RadioButton CheckBox |
데코레이터 |
다른 요소에 효과를 적용하는 데 사용됩니다. 데코레이터(Decorator)에는 자식 요소를 하나만 넣을 수 있습니다. 일반적으로 모양에 영향을 주는 요소입니다. 데코레이터 요소는 대개 단추의 템플릿에 있는 ButtonChrome 요소처럼 다른 컨트롤에 적용되는 템플릿 내에서 사용됩니다. 속성 패널을 사용하거나 스타일만 사용하여(템플릿 아닌) Decorator 요소의 모양과 동작을 사용자 지정할 수 있습니다. 자세한 내용은 스타일 편집을 참조하십시오. |
Border ButtonChrome Viewbox |
.png "Cc294749.ae750268-92e8-403a-9e07-b662da4e9e1e(ko-kr,Expression.10).png")
.png "Cc294749.d7a04618-e35a-44f9-b78c-1f22e38016c1(ko-kr,Expression.10).png")
.png "Cc294749.eb618397-5283-48be-8396-3449be7b6fbf(ko-kr,Expression.10).png")
, 펜 .png "Cc294749.509dc167-734f-46c9-b012-987ee63450cd(ko-kr,Expression.10).png")
그리기 도구로 생성).png "Cc294749.95e40288-f7a6-4ddc-9d6a-68d0aa46d621(ko-kr,Expression.10).png")
(Silverlight 1.0 프로젝트에서 사용 가능).png "Cc294749.db9f1ff5-6bca-441d-b289-c6781a478a5b(ko-kr,Expression.10).png")
.png "Cc294749.a87ee957-7fbf-4135-a6ab-6de7e63160aa(ko-kr,Expression.10).png")
.png "Cc294749.ec58af86-cc2a-4e1f-91c0-883c5406fdfb(ko-kr,Expression.10).png")
.png "Cc294749.91486eda-6173-4ce8-9610-4f296dcb83d7(ko-kr,Expression.10).png")
.png "Cc294749.343296b4-5c7d-4145-84cc-91b08ba67a1b(ko-kr,Expression.10).png")
.png "Cc294749.42165963-00f7-4a33-abcd-b0849edebada(ko-kr,Expression.10).png")
(Silverlight 1.0 프로젝트에서 사용 가능).png "Cc294749.0ee48635-456b-4ebd-b8e4-ce3658417b8e(ko-kr,Expression.10).png")
.png "Cc294749.a27042f1-4067-4239-b99a-8b2e4c223de0(ko-kr,Expression.10).png")
.png "Cc294749.31e4dc7e-8cf4-4014-83e4-9b50ec6ee663(ko-kr,Expression.10).png")
.png "Cc294749.05df1779-a68f-436b-b834-a91b7995a3ec(ko-kr,Expression.10).png")
.png "Cc294749.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(ko-kr,Expression.10).png")
.png "Cc294749.015a263c-0b2b-4253-ac57-b86fcb8c9591(ko-kr,Expression.10).png")
.png "Cc294749.33646a24-f5a1-4b74-9496-e0aaddb922c6(ko-kr,Expression.10).png")
.png "Cc294749.91bc7bff-27d2-4dfe-93ab-844f2952186f(ko-kr,Expression.10).png")
.png "Cc294749.be354518-c54c-4f86-9c57-0b4a9d384b3e(ko-kr,Expression.10).png")
이러한 컨트롤 형식의 특성에 대한 자세한 내용은 MSDN의 Windows Presentation Foundation 섹션에서 형식 패밀리 항목을 참조하십시오.
맨 위로 이동
컨트롤 만들기 및 수정
도구 상자에서 컨트롤 아이콘을 두 번 클릭하여 아트보드에 컨트롤을 추가하거나 도구 상자에서 컨트롤 아이콘을 선택한 다음 마우스를 사용하여 아트보드에 요소를 그릴 수 있습니다. 자세한 내용은 컨트롤의 작업 방법 정보 항목을 참조하십시오. 자산 라이브러리에서 컨트롤을 두 번 클릭하면 컨트롤이 기본 크기로 현재 활성 요소에 삽입됩니다. 대부분의 경우 기본 크기는 Auto로 설정되기 때문에 컨트롤에 콘텐츠를 추가할 때 컨트롤의 크기를 정확하게 조정하려는 경우에 유용합니다.
Expression Blend에서 아트보드에 컨트롤을 추가하면 응용 프로그램의 개체가 됩니다. 개체에 표시되는 핸들을 사용하여 개체의 크기를 조정하고 이동하고 회전하고 대칭 이동하고 기울이거나, 속성 패널에서 정확한 크기, 위치 및 회전 값을 직접 입력하는 등 다양한 방식으로 개체를 수정할 수 있습니다. 자세한 내용은 개체 추가 또는 수정을 참조하거나 개체 및 속성 사용의 작업 방법 정보 항목을 참조하십시오.
Expression Blend에서는 고유한 방식으로 컨트롤을 조작할 수 있습니다. 즉, 하나의 컨트롤 안에 다른 어떤 컨트롤, 패널 또는 도형 요소도 넣을 수 있습니다. 따라서 컨트롤을 함께 결합하려는 경우에 유용합니다. 예를 들어 이미지와 텍스트가 들어 있는 단추를 만들려는 경우 단추에 StackPanel 컨트롤을 넣은 다음 스택(Stack) 패널에 이미지와 텍스트 컨트롤을 추가하면 됩니다.
컨트롤은 특정한 상속 규칙을 따릅니다. 예를 들어 일부 컨트롤은 부모 요소 역할을 하며 자식 요소(콘텐츠)를 중첩하여 포함할 수 있습니다. 또 다른 일부 컨트롤은 자식 요소를 지원하지 않습니다. Expression Blend는 항상 문서 내의 루트나 최상위 패널에 자식 요소를 추가하려고 합니다. 즉, 처음에 Expression Blend를 사용할 때는 LayoutRoot 요소가 루트로 간주되며 기본적으로 문서에 삽입되는 모든 자식 요소의 대상이 됩니다. 문서 내의 다른 컨트롤에 자식 요소를 추가하려면 개체 및 타임라인에서 컨트롤의 이름을 두 번 클릭하여 해당 컨트롤을 활성화해야 합니다. 활성화된 요소에는 노란색 강조 표시가 나타나 새 컨트롤이 추가될 위치를 파악할 수 있습니다.
Expression Blend에서는 다음과 같이 다양한 형식의 컨트롤을 지원하며 이러한 컨트롤은 지원하는 상속 형식에 따라 그 범주가 구분됩니다.
범주 |
설명 |
예 |
|---|---|---|
단순한 컨트롤 |
단순한(Simple) 컨트롤은 자신과 자신에게 설정될 수 있는 속성으로 구성됩니다. 단순한 컨트롤은 콘텐츠를 사용하지 않습니다. 즉, 자식 요소를 가질 수 없습니다. |
Image ScrollBar |
콘텐츠 컨트롤 |
콘텐츠 컨트롤은 다른 요소를 사용하거나 간단한 시나리오에 대한 텍스트로 문자열을 표시할 수 있습니다. 콘텐츠 컨트롤에는 Content 속성이 있습니다. 즉, 문자열과 같은 단일 콘텐츠를 넣을 수 있습니다. 또한 콘텐츠 컨트롤에는 레이아웃 패널과 같은 다른 요소를 넣을 수 있습니다. 콘텐츠 컨트롤 만들기 항목에서 예를 참조하십시오. |
CheckBox RadioButton |
항목 컨트롤 |
항목 컨트롤에는 여러 자식 요소를 넣을 수 있습니다. Items 컬렉션 속성에 항목을 수동으로 추가하거나 ItemsSource 속성에 데이터 컬렉션을 바인딩할 수 있습니다. 항목 컨트롤은 항목 컬렉션을 표시하며 Content 속성 및 Header 속성을 갖지 않습니다. 항목 컨트롤 만들기 항목에서 예를 참조하십시오. |
ComboBox ListBox |
헤더가 있는 컨트롤 |
헤더가 있는 컨트롤에는 컨트롤의 레이블을 지정하는 헤더 자식 요소가 있습니다. 헤더가 있는 컨트롤에는 콘텐츠(헤더가 있는 콘텐츠 컨트롤)나 항목의 컬렉션(헤더가 있는 항목 컨트롤)이 포함될 수 있습니다. 헤더가 있는 컨트롤 만들기 항목에서 예를 참조하십시오. |
TabControl TabItem MenuItem |
.png "Cc294749.6513a026-499e-4296-8a67-7558b466bd33(ko-kr,Expression.10).png")
.png "Cc294749.b174a511-dd12-4a45-a986-034de7693de9(ko-kr,Expression.10).png")
.png "Cc294749.f13847cd-7fdf-4757-a648-d5ece98fcaea(ko-kr,Expression.10).png")
.png "Cc294749.82c89430-1209-4aa1-b534-cf1cedac74c7(ko-kr,Expression.10).png")
이러한 컨트롤 형식의 특성에 대한 자세한 내용은 MSDN의 Windows Presentation Foundation 섹션에서 "콘텐츠 모델" 항목을 참조하십시오.
맨 위로 이동
스타일 및 템플릿
이제까지 컨트롤 개요 항목에서 설명한 것처럼, 컨트롤의 템플릿과 스타일을 만드는 등 여러 가지 방식으로 컨트롤을 사용자 지정하여 응용 프로그램에 고유하면서도 일관된 모양을 제공할 수 있습니다. 템플릿과 스타일은 각각 컨트롤을 구성하는 요소와 컨트롤의 기본 동작을 정의합니다. 시스템 스타일 및 템플릿은 수정할 수 없으므로 컨트롤에 대한 기본 시스템 스타일 및 템플릿의 복사본을 만들어 템플릿과 스타일을 만듭니다. 기본적으로 템플릿과 스타일을 수정하면 코드를 사용하지 않고도 Expression Blend의 디자인 보기에서 새 컨트롤을 손쉽게 만들 수 있습니다. 자세한 내용은 스타일 및 템플릿 개요를 참조하십시오.
맨 위로 이동