WPF 단순한 스타일에 대한 스타일 팁

Microsoft Expression Blend에서는 응용 프로그램의 UI(사용자 인터페이스)를 디자인할 때 기본 컨트롤이나 시스템 컨트롤을 좀 더 구체적이고도 다양하게 사용할 수 있습니다. 원하는 대로 컨트롤을 사용자 지정하고 스타일을 적용하여 다양한 방식으로 컨트롤을 활용할 수 있으며, Expression Blend의 리소스를 이용하여 사용자 지정 컨트롤에 고유하면서도 멋진 모양을 제공하여 더욱 독보적인 환경을 구축함으로써 나만의 차별화된 응용 프로그램을 만들고 모든 응용 프로그램에 걸쳐 일관된 UI를 만들 수 있습니다.

단순한 스타일이란?

단순한 스타일이란 Button, ListBox 컨트롤과 같은 공용 시스템 컨트롤 집합에 대해 미리 생성된 사용자 지정 스타일 리소스 집합입니다. 시스템 컨트롤의 스타일을 수정할 때 컨트롤의 기능이 손상되지 않도록 하려면 WPF(Windows Presentation Foundation) 스타일과 템플릿에 대한 사전 지식이 필요합니다. 이러한 점을 고려하여 Expression Blend는 단순한 스타일 리소스를 제공하고 있습니다. Expression Blend에서는 WPF 스타일 및 템플릿에 대한 지식이 없어도, 손쉽게 수정하여 응용 프로그램의 고유한 모양을 만들 수 있도록 완전하게 구성된 리소스 집합의 역할을 하는 단순한 스타일 리소스를 사용할 수 있습니다.

단순한 스타일 컨트롤 만들기

단순한 스타일은 자산 패널의 스타일 범주에서 단순한 스타일을 클릭하여 찾을 수 있습니다. 자산 패널에서 단순한 스타일을 선택하면 단순한 스타일의 아이콘이 자산 단추 아래에 나타나고 이 아이콘을 선택하여 아트보드에 그릴 수 있습니다. 예를 들어 아트보드에 SimpleButton 스타일을 그리면 실제로는 Button과 같은 시스템 컨트롤의 인스턴스가 만들어지지만 이미 SimpleButton 스타일이 적용된 것입니다.

사용 가능한 단순한 스타일 컨트롤이 표시된 자산 패널

다음 표에 사용 가능한 단순한 스타일 및 해당 스타일이 적용되는 컨트롤 목록이 나와 있습니다.

단순한 스타일	적용 대상 컨트롤	아이콘
SimpleButton	단추
SimpleCheckBox	CheckBox
SimpleComboBox	ComboBox
SimpleComboBoxItem	ComboBoxItem
SimpleExpander	Expander
SimpleLabel	Label
SimpleListBox	ListBox
SimpleListBoxItem	ListBoxItem
SimpleMenu	Menu
SimpleMenuItem	MenuItem
SimpleProgressBar	ProgressBar
SimpleRadioButton	RadioButton
SimpleRepeatButton	ListBox 컨트롤의 RepeatButton
SimpleScrollBar	ScrollBar
SimpleScrollBarRepeatButtonStyle	ScrollBar 컨트롤의 RepeatButton
SimpleScrollViewer	ScrollViewer
SimpleSeparator	ListBox, Menu 또는 ToolBar 컨트롤의 Separator
SimpleSlider	Slider
SimpleSliderThumb	Slider 컨트롤의 Thumb
SimpleTabControl	TabControl
SimpleTabItem	TabControl의 TabItem
SimpleTextBox	TextBox
SimpleThumbStyle	ListBox 컨트롤 ScrollBar의 Thumb
SimpleTreeView	TreeView
SimpleTreeViewItem	TreeView 컨트롤의 TreeViewItem
SimpleTreeViewItemToggleButton	TreeView 컨트롤의 ToggleButton

단순한 스타일 수정

단순한 스타일 리소스는 SimpleStyles.xaml이라는 리소스 사전에 들어 있습니다. 도구 패널에서 아트보드에 단순한 스타일을 추가하면 SimpleStyles.xaml 리소스 사전이 프로젝트에 추가되고 단순한 스타일 리소스가 모두 리소스 패널에 표시됩니다.

SimpleStyles.xaml 리소스 사전에는 단순한 스타일에서 사용하는 브러시 리소스 및 기타 템플릿이 있습니다. 다음과 같이 단순한 스타일을 변경할 수 있습니다.

• 색 변경 - 모든 단순한 스타일에 사용되는 색은 변경할 수 있는 리소스로 저장됩니다.

  색 리소스 중 하나를 변경하려면 리소스 패널에서 색 리소스 옆에 있는 아래쪽 화살표 단추를 클릭합니다.

  브러시에 대한 자세한 내용은 색, 브러시 및 마스크 설정를 참조하십시오.

  리소스 패널에서 스타일 리소스를 편집하도록 선택

  

• 스타일 변경 - Expression Blend에서는 컨트롤의 스타일을 사용하여 스타일이 적용되는 컨트롤에서 기본값으로 사용할 속성 및 트리거를 지정할 수 있습니다. 배경 브러시 색과 같은 속성은 컨트롤의 모양에 영향을 주고, 트리거는 컨트롤이 속성 변경 및 이벤트에 응답하는 방식에 영향을 줍니다. 예를 들어 SimpleButton 스타일에는 사용자가 컨트롤 위로 마우스 포인터를 이동하면 단추의 모양이 변경되도록 하는 IsMouseOver 속성에 대한 트리거가 들어 있습니다. 트리거는 IsMouseOver 속성이 False에서 True로 변경될 때 발생합니다.

  단순한 스타일 중 하나를 변경하려면 리소스 패널에서 단순한 스타일 옆에 있는 리소스 편집 단추를 클릭합니다.

  리소스 패널에서 스타일 리소스를 편집하도록 선택

  

• 컨트롤 템플릿 변경 - 컨트롤 템플릿은 컨트롤 내에 들어 있는 자식 요소를 정의하여 컨트롤의 모양을 정의합니다. 예를 들어 SimpleTextBox 요소의 컨트롤 템플릿에 Grid 요소가 포함되며 Grid 요소에는 Border 요소가 포함되고 Border 요소에는 PART_ContentHost라는 ScrollViewer 요소가 포함됩니다. 아트보드의 TextBox에 SimpleTextBox 스타일을 적용하면 ScrollViewer 요소에는 TextBox의 콘텐츠가 표시됩니다. 이 스타일과 마찬가지로 컨트롤 템플릿에서 속성 및 이벤트 트리거도 설정할 수 있습니다.

  단순한 스타일의 컨트롤 템플릿을 변경하려면 리소스 패널에서 단순한 스타일 옆에 있는 리소스 편집 단추를 클릭하고 개체 및 타임라인 패널에 나타나는 Style 요소를 마우스 오른쪽 단추로 클릭한 다음 템플릿 편집을 가리킨 후 현재 템플릿 편집을 클릭합니다.

  스타일 편집 범위에서 시작할 때 컨트롤 템플릿을 편집하도록 선택

  

  팁:
  컨트롤 템플릿은 스타일 내에서 래핑되므로 컨트롤에 적용되는 스타일에는 컨트롤의 모양(구성 요소)과 동작이 모두 포함됩니다. 복사본 편집과 현재 템플릿 편집 중에서 선택할 때 이 점을 반드시 기억해야 합니다.

스타일과 템플릿에 대한 자세한 비교 정보는 템플릿을 지원하는 컨트롤의 스타일 지정을 참조하십시오.

아트보드의 기존 컨트롤에 스타일 리소스 적용

단순한 스타일은 다른 모든 리소스처럼 적용하고 관리할 수 있는 리소스입니다.

스타일 리소스 적용에서 예를 참조하십시오.

리소스에 대한 자세한 내용은 재사용 가능한 리소스 만들기를 참조하십시오.