단순한 스타일 사용
.png "이 페이지는 WPF 프로젝트에만 적용됨")
Microsoft Expression Blend에서는 응용 프로그램의 UI(사용자 인터페이스)를 디자인할 때 기본 컨트롤이나 시스템 컨트롤을 좀 더 구체적이고도 다양하게 사용할 수 있습니다. 원하는 대로 컨트롤을 사용자 지정하고 스타일을 적용하여 다양한 방식으로 컨트롤을 활용할 수 있으며, Expression Blend의 리소스를 이용하여 사용자 지정 컨트롤에 고유하면서도 멋진 모양을 제공하여 더욱 독보적인 환경을 구축함으로써 나만의 차별화된 응용 프로그램을 만들고 모든 응용 프로그램에 걸쳐 일관된 UI를 만들 수 있습니다.
[!참고]
Microsoft Silverlight 1.0 프로젝트에서는 Expression Blend의 단순한 스타일을 사용할 수 없지만 JavaScript 클래스를 만들어 재사용 가능한 컨트롤을 정의할 수 있습니다. 시작 화면(도움말 메뉴)의 예제 탭에서 선택할 수 있는 ButtonGallery 예제의 Button 클래스에서 예를 참조하십시오. 자세한 내용은 Silverlight 학습 센터를 참조하십시오.
단순한 스타일이란?
단순한 스타일(Simple Style)이란 Button, ListBox 컨트롤과 같은 공용 시스템 컨트롤 집합에 대해 미리 생성된 사용자 지정 스타일 리소스 집합입니다. 시스템 컨트롤의 스타일을 수정할 때 컨트롤의 기능이 손상되지 않도록 하려면 WPF(Windows Presentation Foundation) 스타일과 템플릿에 대한 사전 지식이 필요합니다. 이러한 점을 고려하여 Expression Blend는 단순한 스타일 리소스를 제공하고 있습니다. Expression Blend에서는 WPF 스타일 및 템플릿에 대한 지식이 없어도, 손쉽게 수정하여 응용 프로그램의 고유한 모양을 만들 수 있도록 완전하게 구성된 리소스 집합의 역할을 하는 단순한 스타일 리소스를 사용할 수 있습니다.
.gif "Cc294894.7e183f1f-37d8-4dcb-980c-19a5d61ca087(ko-kr,Expression.10).gif")
맨 위로 이동
단순한 스타일 컨트롤 만들기
단순한 스타일(simple style)은 자산 라이브러리의 컨트롤 탭에서 Simple Styles를 클릭하여 찾을 수 있습니다. 사용 가능한 단순한 스타일을 모두 표시하려면 모두 표시 확인란을 선택합니다. 자산 라이브러리에서 단순한 스타일을 선택하면 해당 아이콘이 자산 라이브러리 단추 .png "Cc294894.0224cabd-5da1-4e01-bddd-4a647401a098(ko-kr,Expression.10).png")
위에 나타나고 이 아이콘을 선택하여 아트보드에 그릴 수 있습니다. 예를 들어 아트보드에 SimpleButton 스타일을 그리면 실제로는 Button과 같은 시스템 컨트롤의 인스턴스가 만들어지지만 이미 SimpleButton 스타일이 적용된 것입니다.
도구 상자에서 드롭다운 목록으로 제공되는 몇 가지 도구에 단순한 스타일을 적용하려면 자산 라이브러리의 컨트롤 탭에서 Simple Styles를 선택할 때 기본값으로 사용 단추를 클릭하면 됩니다.
단순한 스타일 컨트롤 목록이 나와 있는 자산 라이브러리 및 단순한 스타일을 기본 스타일로 설정하는 옵션
.png "Cc294894.7ac13e33-029a-4ce3-aa85-ca623b6b9caa(ko-kr,Expression.10).png")
다음 표에 사용 가능한 단순한 스타일 및 해당 스타일이 적용되는 컨트롤 목록이 나와 있습니다.
단순한 스타일 |
적용 대상 컨트롤 |
아이콘 |
|---|---|---|
SimpleButton |
단추 |
.png "Cc294894.05df1779-a68f-436b-b834-a91b7995a3ec(ko-kr,Expression.10).png") |
SimpleCheckBox |
CheckBox |
.png "Cc294894.91bc7bff-27d2-4dfe-93ab-844f2952186f(ko-kr,Expression.10).png") |
SimpleComboBox |
ComboBox |
.png "Cc294894.b174a511-dd12-4a45-a986-034de7693de9(ko-kr,Expression.10).png") |
SimpleComboBoxItem |
ComboBoxItem |
|
SimpleExpander |
Expander |
.png "Cc294894.a9e00db8-c14d-404f-88cb-5f37a41bc783(ko-kr,Expression.10).png") |
SimpleLabel |
Label |
.png "Cc294894.a27042f1-4067-4239-b99a-8b2e4c223de0(ko-kr,Expression.10).png") |
SimpleListBox |
ListBox |
.png "Cc294894.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(ko-kr,Expression.10).png") |
SimpleListBoxItem |
ListBoxItem |
|
SimpleMenu |
Menu |
.png "Cc294894.015a263c-0b2b-4253-ac57-b86fcb8c9591(ko-kr,Expression.10).png") |
SimpleMenuItem |
MenuItem |
.png "Cc294894.82c89430-1209-4aa1-b534-cf1cedac74c7(ko-kr,Expression.10).png") |
SimpleProgressBar |
ProgressBar |
.png "Cc294894.1a4a4117-497e-4920-acaa-d84cb5a1ce83(ko-kr,Expression.10).png") |
SimpleRadioButton |
RadioButton |
.png "Cc294894.33646a24-f5a1-4b74-9496-e0aaddb922c6(ko-kr,Expression.10).png") |
SimpleRepeatButton |
ListBox 컨트롤의 RepeatButton |
|
SimpleScrollBar |
ScrollBar |
.png "Cc294894.6513a026-499e-4296-8a67-7558b466bd33(ko-kr,Expression.10).png") |
SimpleScrollBarRepeatButtonStyle |
ScrollBar 컨트롤의 RepeatButton |
|
SimpleScrollViewer |
ScrollViewer |
.png "Cc294894.5ca26a94-31cd-4fda-83c5-a9564b5b019d(ko-kr,Expression.10).png") |
SimpleSeparator |
ListBox, Menu 또는 ToolBar 컨트롤의 Separator |
|
SimpleSlider |
Slider |
.png "Cc294894.bf689d92-3c74-4218-815c-e98c930ac189(ko-kr,Expression.10).png") |
SimpleSliderThumb |
Slider 컨트롤의 Thumb |
|
SimpleTabControl |
TabControl |
.png "Cc294894.f13847cd-7fdf-4757-a648-d5ece98fcaea(ko-kr,Expression.10).png") |
SimpleTabItem |
TabControl의 TabItem |
|
SimpleTextBox |
TextBox |
.png "Cc294894.343296b4-5c7d-4145-84cc-91b08ba67a1b(ko-kr,Expression.10).png") |
SimpleThumbStyle |
ListBox 컨트롤 ScrollBar의 Thumb |
|
SimpleTreeView |
TreeView |
.png "Cc294894.39c99139-8723-49c9-a3e7-f99232d939cb(ko-kr,Expression.10).png") |
SimpleTreeViewItem |
TreeView 컨트롤의 TreeViewItem |
|
SimpleTreeViewItemToggleButton |
TreeView 컨트롤의 ToggleButton |
맨 위로 이동
단순한 스타일 수정
단순한 스타일(simple style) 리소스는 SimpleStyles.xaml이라는 리소스 사전에 들어 있습니다. 도구 상자에서 아트보드에 단순한 스타일을 추가하면 SimpleStyles.xaml 리소스 사전이 프로젝트에 추가되고 단순한 스타일 리소스가 모두 리소스 패널에 표시됩니다.
SimpleStyles.xaml 리소스 사전에는 단순한 스타일에서 사용하는 브러시 리소스 및 기타 템플릿이 있습니다. 다음과 같이 단순한 스타일을 변경할 수 있습니다.
색 변경 - 모든 단순한 스타일에 사용되는 색은 변경할 수 있는 리소스로 저장됩니다. 색 리소스 중 하나를 변경하려면 리소스 패널에서 색 리소스 옆에 있는 아래쪽 화살표 단추를 클릭합니다. 브러시에 대한 자세한 내용은 모양 개요를 참조하십시오.
리소스 패널에서 스타일 리소스를 편집하도록 선택
.png "Cc294894.64136c65-52bc-4225-a948-b1171634baca(ko-kr,Expression.10).png")
스타일 변경 - Expression Blend에서는 컨트롤의 스타일을 사용하여 스타일이 적용되는 컨트롤에서 기본값으로 사용할 속성 및 트리거를 지정할 수 있습니다. 배경 브러시 색과 같은 속성은 컨트롤의 모양에 영향을 주고, 트리거는 컨트롤이 속성 변경 및 이벤트에 응답하는 방식에 영향을 줍니다. 예를 들어 SimpleButton 스타일에는 사용자가 컨트롤 위로 마우스 포인터를 이동하면 단추의 모양이 변경되도록 하는 IsMouseOver 속성에 대한 트리거가 들어 있습니다. 트리거는 IsMouseOver 속성이 False에서 True로 변경될 때 발생합니다. 단순한 스타일 중 하나를 변경하려면 리소스 패널에서 단순한 스타일 옆에 있는 리소스 편집 단추를 클릭합니다.
리소스 패널에서 스타일 리소스를 편집하도록 선택
.png "Cc294894.a6080791-03cf-43ae-9476-22d33e9d8ce4(ko-kr,Expression.10).png")
컨트롤 템플릿 변경 - 컨트롤 템플릿은 컨트롤 내에 들어 있는 자식 요소를 정의하여 컨트롤의 모양을 정의합니다. 예를 들어 SimpleTextBox 요소의 컨트롤 템플릿에 Grid 요소가 포함되며 Grid 요소에는 Border 요소가 포함되고 Border 요소에는 PART_ContentHost라는 ScrollViewer 요소가 포함됩니다. 아트보드의 TextBox에 SimpleTextBox 스타일을 적용하면 ScrollViewer 요소에는 TextBox의 콘텐츠가 표시됩니다. 스타일과 마찬가지로 컨트롤 템플릿에서 속성 및 이벤트 트리거를 설정할 수 있습니다. 단순한 스타일에 대한 컨트롤 템플릿을 변경하려면 리소스 패널에서 단순한 스타일 옆에 있는 리소스 편집 단추를 클릭하고 개체 및 타임라인 아래 나타나는 Style 요소를 마우스 오른쪽 단추로 클릭한 다음 컨트롤 구성 요소(템플릿) 편집을 가리키고 템플릿 편집을 클릭합니다.
스타일 편집 범위에서 시작할 때 컨트롤 템플릿을 편집하도록 선택
.png "Cc294894.a64c8f57-1243-4482-87ad-b9d5aac62867(ko-kr,Expression.10).png")
.gif "팁")
팁:컨트롤 템플릿은 스타일 내에서 래핑되므로 컨트롤에 적용되는 스타일에는 컨트롤의 모양(구성 요소)과 동작이 모두 포함됩니다. 복사본 편집과 템플릿 편집 중에서 선택할 때 이 점을 반드시 기억해야 합니다.
스타일과 템플릿에 대한 자세한 비교 정보는 스타일 및 템플릿을 참조하십시오. 단순한 스타일에 대한 구체적인 정보 및 단순한 스타일과 컨트롤 템플릿을 수정하는 방법에 대한 예는 단순한 스타일의 참조 정보 및 실습 정보 아래 나와 있는 항목을 참조하십시오.
맨 위로 이동
아트보드의 기존 컨트롤에 스타일 리소스 적용
단순한 스타일(simple style)은 다른 모든 리소스처럼 적용하고 관리할 수 있는 리소스입니다. 이 사용자 가이드의 스타일 리소스 적용에서 예를 참조하십시오. 리소스에 대한 자세한 내용은 이 사용자 가이드의 리소스 개요를 참조하십시오.
맨 위로 이동