내보내기(0) 인쇄
모두 확장

대화형 컨트롤 선택 및 사용

Microsoft Expression Blend에서는 Windows Presentation Foundation (WPF) 및 Microsoft Silverlight 응용 프로그램의 사용자 인터페이스를 디자인할 수 있도록 풍부한 컨트롤을 제공합니다.

Expression Blend에서는 기본 컨트롤이나 시스템 컨트롤을 좀 더 구체적이고도 다양하게 사용할 수 있습니다. 원하는 대로 컨트롤을 사용자 지정하고 스타일을 적용하여 다양한 방식으로 컨트롤을 활용할 수 있습니다. 또한 Expression Blend의 리소스를 이용하여 사용자 지정 컨트롤에 고유하면서도 멋진 모양을 제공하여 더욱 독보적인 환경을 구축함으로써 나만의 차별화된 응용 프로그램을 만들고 모든 응용 프로그램에 걸쳐 일관된 UI(사용자 인터페이스)를 만들 수 있습니다. Expression Blend에서 제공되는 컨트롤 편집 모델의 가장 큰 장점 중 하나는 개발자가 프로그래밍 논리를 작성하는 것과 동시에 디자이너가 응용 프로그램의 모양을 디자인할 수 있다는 점입니다. 디자이너가 직접 디자인을 만들 수 있기 때문에 기획 단계에서 구현 단계로 전환될 때 디자인이 손실될 염려가 없습니다.

컨트롤 또는 UI 디자인 요소는 응용 프로그램에 표시되는 구성 요소입니다. 단추나 선택 가능한 항목 목록과 같은 컨트롤을 통해 사용자는 응용 프로그램과 상호 작용할 수 있습니다. Expression Blend에서 사용할 수 있는 컨트롤 형식과 컨트롤을 사용자 지정하는 방법을 알고 있으면, 응용 프로그램의 모양과 동작을 정확히 원하는 방식대로 설정할 수 있습니다.

Expression Blend를 사용하면 아트보드에서 시각적으로 컨트롤을 사용하고 속성 패널 및 개체 및 타임라인 패널에서 모양과 동작을 구성할 수 있습니다. 예를 들어 아트보드에 Button 컨트롤을 추가하고 속성 패널에서 값을 수정하여 모양을 변경한 다음 자산 패널에서 동작을 추가하여 단추를 클릭할 때 애니메이션 타임라인이 시작되도록 할 수 있습니다.

자세한 내용은 속성 패널개체 및 타임라인 패널을 참조하십시오.

이렇게 간단한 액션뿐만 아니라 다음과 같은 작업도 컨트롤에서 수행할 수 있습니다.

Expression Blend에서는 다양한 형식의 컨트롤을 사용하여 시각적으로 고유한 응용 프로그램을 간편하게 디자인할 수 있습니다.

도구 패널 아래쪽에 있는 자산Cc294749.0d8b8d29-1af9-418f-8741-be3097d76eab(KO-KR,Expression.30).png을 클릭하면 자산 패널에서 모든 컨트롤을 사용할 수 있습니다. 도구 패널은 Expression Blend의 왼쪽에 있습니다. 자산 패널에서 UI 요소를 선택하면 해당 요소에 대한 아이콘이 자산 단추 아래에 나타나 나중에 다시 해당 요소를 쉽게 선택할 수 있습니다. 가장 일반적인 UI 요소는 자산 단추 아래에 이미 표시되어 있으므로 빠르게 찾을 수 있습니다.

자세한 내용은 자산 패널도구 패널을 참조하십시오.

다음 그림에서는 일반적인(공용) 몇 가지 UI 요소가 개체로 추가된 후의 아트보드를 보여 줍니다. 도구 Cc294749.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(KO-KR,Expression.30).png경로 개체 Cc294749.e1882d38-c773-4abe-a2b9-10abd293e119(KO-KR,Expression.30).png를 생성합니다. 이미지 아이콘 Cc294749.adb61060-da5f-4279-8c0d-3681bfeb145c(KO-KR,Expression.30).png이미지 컨트롤이 자산 패널에서 선택된 후 도구 패널에 표시됩니다.

도구 패널과 아트보드

Cc294749.abd88d9d-ab6c-444e-8037-469cdcb5586a(KO-KR,Expression.30).png
Cc294749.25182a96-9a69-478a-9cfe-5b360e6a9bea(KO-KR,Expression.30).png

주황색 견본을 나타내는 Path_40이라는 패스 개체

Cc294749.eb6fad93-f17e-4f62-a926-8c8651862891(KO-KR,Expression.30).png

응용 프로그램에서 레이블이 "Reset Image"로 지정된 단추를 나타내는 명명되지 않은 단추 개체. 개체 및 타임라인 패널에서 밑줄(_)은 단추의 선택키를 식별하는 데 사용됩니다.

Cc294749.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(KO-KR,Expression.30).png

색 견본의 페인트 칩 중 하나를 나타내는 Rectangle_44라는 사각형 개체

Cc294749.a5d608f2-bba2-48c5-8b15-2c115db86acc(KO-KR,Expression.30).png

공간의 배경 이미지를 나타내는 photo_bathroom이라는 이미지 개체

Cc294749.f0c1ff71-7814-42ba-806b-7ea92d616e69(KO-KR,Expression.30).png

"Color Swatch Sample Pack 1"이라는 응용 프로그램 제목을 나타내며 포함된 텍스트로 식별되는, 명명되지 않은 텍스트 블록

다음 범주를 고려해서 컨트롤을 검토하여 어떤 컨트롤을 사용할 것인지 결정하시기 바랍니다.

범주

기능

도형

타원, 선, 사각형을 이용하여 풍부한 시각적 요소를 만드는 데 사용되며, 원하는 모양(단순하거나 복잡하거나 화려한 색이 지정된 모양 등)을 자유롭게 만들 수 있습니다.

자세한 내용은 도형 및 패스 그리기를 참조하십시오.

Expression Blend에서는 속성 패널을 사용하거나 스타일만 사용(템플릿은 사용 안 함)하여 요소의 모양과 동작을 사용자 지정할 수 있습니다.

자세한 내용은 스타일 편집을 참조하십시오.

Rectangle Cc294749.ae750268-92e8-403a-9e07-b662da4e9e1e(KO-KR,Expression.30).png

Ellipse Cc294749.d7a04618-e35a-44f9-b78c-1f22e38016c1(KO-KR,Expression.30).png

Path(선 Cc294749.eb618397-5283-48be-8396-3449be7b6fbf(KO-KR,Expression.30).png, 펜 Cc294749.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(KO-KR,Expression.30).png 및 연필 Cc294749.509dc167-734f-46c9-b012-987ee63450cd(KO-KR,Expression.30).png 그리기 도구로 생성)

레이아웃 패널

다른 UI 요소의 컨테이너로 사용되어 위치 및 창 크기 조정 동작을 지정합니다.

대부분의 UI 요소와 달리 Grid와 같은 일부 레이아웃 패널에는 둘 이상의 자식 요소를 넣을 수 있습니다. 이를 이용해서 응용 프로그램 디자인을 다양하게 구성하고 배치할 수 있습니다.

자세한 내용은 개체 정렬을 참조하십시오.

Expression Blend에서는 속성 패널을 사용하거나 스타일을 사용(템플릿은 사용 안 함)하여 요소의 모양과 동작을 사용자 지정할 수 있습니다.

자세한 내용은 스타일 편집을 참조하십시오.

Canvas Cc294749.95e40288-f7a6-4ddc-9d6a-68d0aa46d621(KO-KR,Expression.30).png

Dock Cc294749.db9f1ff5-6bca-441d-b289-c6781a478a5b(KO-KR,Expression.30).png

Grid Cc294749.a87ee957-7fbf-4135-a6ab-6de7e63160aa(KO-KR,Expression.30).png

Stack Cc294749.ec58af86-cc2a-4e1f-91c0-883c5406fdfb(KO-KR,Expression.30).png

Wrap Cc294749.91486eda-6173-4ce8-9610-4f296dcb83d7(KO-KR,Expression.30).png

문서/텍스트

문서 프레젠테이션 및 텍스트 서식을 정의하는 데 사용됩니다.

자세한 내용은 텍스트 그리기를 참조하십시오.

Expression Blend에서는 속성 패널을 사용하거나 스타일 및 템플릿을 사용하여 요소의 모양과 동작을 사용자 지정할 수 있습니다.

자세한 내용은 템플릿 만들기 또는 수정스타일 편집을 참조하십시오.

TextBox Cc294749.343296b4-5c7d-4145-84cc-91b08ba67a1b(KO-KR,Expression.30).png

TextBlock Cc294749.42165963-00f7-4a33-abcd-b0849edebada(KO-KR,Expression.30).png

RichTextBox Cc294749.0ee48635-456b-4ebd-b8e4-ce3658417b8e(KO-KR,Expression.30).png

Label Cc294749.a27042f1-4067-4239-b99a-8b2e4c223de0(KO-KR,Expression.30).png

PasswordBox Cc294749.31e4dc7e-8cf4-4014-83e4-9b50ec6ee663(KO-KR,Expression.30).png

컨트롤

사용자가 응용 프로그램과 상호 작용하는 방법을 제공합니다.

Expression Blend에서는 속성 패널을 사용하거나 스타일 및 템플릿을 사용하여 요소의 모양과 동작을 사용자 지정할 수 있습니다.

자세한 내용은 템플릿 만들기 또는 수정스타일 편집을 참조하십시오.

Button Cc294749.05df1779-a68f-436b-b834-a91b7995a3ec(KO-KR,Expression.30).png

ListBox Cc294749.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(KO-KR,Expression.30).png

Menu Cc294749.015a263c-0b2b-4253-ac57-b86fcb8c9591(KO-KR,Expression.30).png

RadioButton Cc294749.33646a24-f5a1-4b74-9496-e0aaddb922c6(KO-KR,Expression.30).png

CheckBox Cc294749.91bc7bff-27d2-4dfe-93ab-844f2952186f(KO-KR,Expression.30).png

데코레이터

다른 요소에 효과를 적용하는 데 사용됩니다. 데코레이터(Decorator)에는 자식 요소를 하나만 넣을 수 있습니다. 일반적으로 모양에 영향을 주는 요소입니다.

데코레이터 요소는 대개 단추의 템플릿에 있는 ButtonChrome 요소처럼 다른 컨트롤에 적용되는 템플릿 내에서 사용됩니다. 속성 패널을 사용하거나 스타일만 사용하여(템플릿 아닌) Decorator 요소의 모양과 동작을 사용자 지정할 수 있습니다.

자세한 내용은 스타일 편집을 참조하십시오.

Border Cc294749.be354518-c54c-4f86-9c57-0b4a9d384b3e(KO-KR,Expression.30).png

ButtonChrome

Viewbox

이러한 컨트롤 형식의 특성에 대한 자세한 내용은 MSDN의 Windows Presentation Foundation 섹션에서 Type Families(형식 패밀리) 항목을 참조하십시오.

도구 패널에서 아이콘을 두 번 클릭하거나 도구 패널에서 아이콘을 선택한 다음 마우스를 사용하여 아트보드에 요소를 그려 아트보드에 컨트롤을 추가할 수 있습니다.

자세한 내용은 대화형 컨트롤 선택 및 사용 아래에 나열된 작업 방법 정보 항목을 참조하십시오.

자산 패널에서 컨트롤을 두 번 클릭하면 컨트롤이 기본 크기로 현재 활성 요소에 삽입됩니다. 대부분의 경우 기본 크기는 Auto로 설정되기 때문에 컨트롤에 콘텐츠를 추가할 때 컨트롤의 크기를 정확하게 조정하려는 경우에 유용합니다.

Expression Blend에서 아트보드에 컨트롤을 추가하면 응용 프로그램의 개체가 됩니다. 개체에 표시되는 핸들을 사용하여 개체의 크기를 조정하고 이동하고 회전하고 대칭 이동하고 기울이거나, 속성 패널에서 정확한 크기, 위치 및 회전 값을 직접 입력하는 등 다양한 방식으로 개체를 수정할 수 있습니다.

자세한 내용은 개체 추가 또는 수정을 참조하거나 개체 및 속성 사용의 작업 방법 정보 항목을 참조하십시오.

Expression Blend에서는 고유한 방식으로 컨트롤을 조작할 수 있습니다. 즉, 하나의 컨트롤 안에 다른 어떤 컨트롤, 패널 또는 도형 요소도 넣을 수 있습니다. 따라서 컨트롤을 함께 결합하려는 경우에 유용합니다. 예를 들어 이미지와 텍스트가 들어 있는 단추를 만들려는 경우 단추에 StackPanel 레이아웃 패널을 끌어다 놓은 다음 StackPanel 레이아웃 패널에 이미지와 텍스트 컨트롤을 추가하면 됩니다.

컨트롤은 특정한 상속 규칙을 따릅니다. 예를 들어 일부 컨트롤은 부모 요소 역할을 하며 자식 요소(콘텐츠)를 중첩하여 포함할 수 있습니다. 또 다른 일부 컨트롤은 자식 요소를 지원하지 않습니다. Expression Blend는 항상 문서 내의 루트나 최상위 패널에 자식 요소를 추가하려고 합니다. 즉, 처음에 Expression Blend를 사용할 때는 LayoutRoot 요소가 루트로 간주되며 기본적으로 문서에 삽입되는 모든 자식 요소의 대상이 됩니다. 문서 내의 다른 컨트롤에 자식 요소를 추가하려면 개체 및 타임라인 패널에서 컨트롤의 이름을 두 번 클릭하여 해당 컨트롤을 활성화해야 합니다. 활성화된 요소에는 노란색 강조 표시가 나타나 새 컨트롤이 추가될 위치를 파악할 수 있습니다.

Expression Blend에서는 다음과 같이 다양한 형식의 컨트롤을 지원하며 이러한 컨트롤은 지원하는 상속 형식에 따라 그 범주가 구분됩니다.

범주

설명

단순한 컨트롤

단순한 컨트롤은 자신과 자신에게 설정될 수 있는 속성으로 구성됩니다. 단순한 컨트롤은 콘텐츠를 사용하지 않습니다. 즉, 자식 요소를 가질 수 없습니다.

이미지 Cc294749.adb61060-da5f-4279-8c0d-3681bfeb145c(KO-KR,Expression.30).png

ScrollBar Cc294749.6513a026-499e-4296-8a67-7558b466bd33(KO-KR,Expression.30).png

콘텐츠 컨트롤

콘텐츠 컨트롤은 다른 요소를 사용하거나 간단한 시나리오에 대한 텍스트로 문자열을 표시할 수 있습니다. 콘텐츠 컨트롤에는 Content 속성이 있습니다. 즉, 문자열과 같은 단일 콘텐츠를 넣을 수 있습니다. 또한 콘텐츠 컨트롤에는 레이아웃 패널과 같은 다른 요소를 넣을 수 있습니다.

콘텐츠 컨트롤 그리기 항목에서 예를 참조하십시오.

CheckBox Cc294749.91bc7bff-27d2-4dfe-93ab-844f2952186f(KO-KR,Expression.30).png

RadioButton Cc294749.33646a24-f5a1-4b74-9496-e0aaddb922c6(KO-KR,Expression.30).png

항목 컨트롤

항목 컨트롤에는 여러 자식 요소를 넣을 수 있습니다. Items 컬렉션 속성에 항목을 수동으로 추가하거나 ItemsSource 속성에 데이터 컬렉션을 바인딩할 수 있습니다. 항목 컨트롤은 항목 컬렉션을 표시하며 Content 속성 및 Header 속성을 갖지 않습니다.

항목 컨트롤 그리기 항목에서 예를 참조하십시오.

ComboBox Cc294749.b174a511-dd12-4a45-a986-034de7693de9(KO-KR,Expression.30).png

ListBox Cc294749.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(KO-KR,Expression.30).png

헤더가 있는 컨트롤

헤더가 있는 컨트롤에는 컨트롤의 레이블을 지정하는 헤더 자식 요소가 있습니다. 헤더가 있는 컨트롤에는 콘텐츠(헤더가 있는 콘텐츠 컨트롤)나 항목의 컬렉션(헤더가 있는 항목 컨트롤)이 포함될 수 있습니다.

헤더가 있는 컨트롤 그리기 항목에서 예를 참조하십시오.

TabControl Cc294749.f13847cd-7fdf-4757-a648-d5ece98fcaea(KO-KR,Expression.30).png

TabItem

MenuItem Cc294749.82c89430-1209-4aa1-b534-cf1cedac74c7(KO-KR,Expression.30).png

이러한 컨트롤 형식의 특성에 대한 자세한 내용은 MSDN의 Windows Presentation Foundation 섹션에서 "콘텐츠 모델" 항목을 참조하십시오.

이제까지 설명한 것처럼, 컨트롤의 템플릿과 스타일을 만드는 등 여러 가지 방식으로 컨트롤을 사용자 지정하여 응용 프로그램에 고유하면서도 일관된 모양을 제공할 수 있습니다. 템플릿과 스타일은 각각 컨트롤을 구성하는 요소와 컨트롤의 기본 동작을 정의합니다. 시스템 스타일 및 템플릿은 수정할 수 없으므로 컨트롤에 대한 기본 시스템 스타일 및 템플릿의 복사본을 만들어 템플릿과 스타일을 만듭니다. 기본적으로 템플릿과 스타일을 수정하면 코드를 사용하지 않고도 Expression Blend의 디자인 보기에서 새 컨트롤을 손쉽게 만들 수 있습니다.

자세한 내용은 템플릿을 지원하는 컨트롤의 스타일 지정를 참조하십시오.

커뮤니티 추가 항목

추가
Microsoft는 MSDN 웹 사이트에 대한 귀하의 의견을 이해하기 위해 온라인 설문 조사를 진행하고 있습니다. 참여하도록 선택하시면 MSDN 웹 사이트에서 나가실 때 온라인 설문 조사가 표시됩니다.

참여하시겠습니까?
표시:
© 2015 Microsoft