문서를 영문으로 보려면 영문 확인란을 선택하세요. 마우스 포인터를 텍스트 위로 이동시켜 팝업 창에서 영문 텍스트를 표시할 수도 있습니다.
번역
영문

Blend에서 WPF 단순한 스타일에 대한 스타일 지정 팁

이 페이지는 WPF 프로젝트에만 적용됨

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

단순한 스타일은 , Button ListBox 컨트롤 같은, 공용 시스템 컨트롤 집합에 대한 즉시 사용할 사용자 지정 스타일 리소스의 집합입니다. 시스템 컨트롤 스타일을 수정할 때 컨트롤의 기능을 손상시키지 않기 위해서 스타일 및 템플릿에 대한 약간의 지식이 필요합니다. 때문에 Blend은 단순한 스타일 리소스를 제공합니다. Blend에서는 WPF 스타일 및 템플릿에 대한 지식이 없어도, 손쉽게 수정하여 응용 프로그램의 고유한 모양을 만들 수 있도록 완전하게 구성된 리소스 집합의 역할을 하는 단순한 스타일 리소스를 사용할 수 있습니다.

단순한 스타일은 자산 패널의 스타일 범주에서 단순한 스타일을 클릭하여 찾을 수 있습니다. 자산 패널에서 단순한 스타일을 선택하면 단순한 스타일의 아이콘이 자산 단추 JJ171022.0d8b8d29-1af9-418f-8741-be3097d76eab(ko-kr,VS.120).png 아래에 나타나고 이 아이콘을 선택하여 아트보드에 그릴 수 있습니다. 예를 들어 아트보드에 SimpleButton과 같은 단순한 스타일을 그리면 실제로는 Button과 같은 시스템 컨트롤의 인스턴스가 만들어지지만 이미 SimpleButton 스타일이 적용된 것입니다.



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

JJ171022.7ac13e33-029a-4ce3-aa85-ca623b6b9caa(ko-kr,VS.120).png

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

단순한 스타일

적용 대상 컨트롤

아이콘

SimpleButton

Button

JJ171022.05df1779-a68f-436b-b834-a91b7995a3ec(ko-kr,VS.120).png

SimpleCheckBox

CheckBox

JJ171022.91bc7bff-27d2-4dfe-93ab-844f2952186f(ko-kr,VS.120).png

SimpleComboBox

ComboBox

JJ171022.b174a511-dd12-4a45-a986-034de7693de9(ko-kr,VS.120).png

SimpleComboBoxItem

ComboBoxItem

SimpleExpander

Expander

JJ171022.a9e00db8-c14d-404f-88cb-5f37a41bc783(ko-kr,VS.120).png

SimpleLabel

Label

JJ171022.a27042f1-4067-4239-b99a-8b2e4c223de0(ko-kr,VS.120).png

SimpleListBox

ListBox

JJ171022.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(ko-kr,VS.120).png

SimpleListBoxItem

ListBoxItem

SimpleMenu

Menu

JJ171022.015a263c-0b2b-4253-ac57-b86fcb8c9591(ko-kr,VS.120).png

SimpleMenuItem

MenuItem

JJ171022.82c89430-1209-4aa1-b534-cf1cedac74c7(ko-kr,VS.120).png

SimpleProgressBar

ProgressBar

JJ171022.1a4a4117-497e-4920-acaa-d84cb5a1ce83(ko-kr,VS.120).png

SimpleRadioButton

RadioButton

JJ171022.33646a24-f5a1-4b74-9496-e0aaddb922c6(ko-kr,VS.120).png

SimpleRepeatButton

ListBox 컨트롤의 RepeatButton

SimpleScrollBar

ScrollBar

JJ171022.6513a026-499e-4296-8a67-7558b466bd33(ko-kr,VS.120).png

SimpleScrollBarRepeatButtonStyle

ScrollBar 컨트롤의 RepeatButton

SimpleScrollViewer

ScrollViewer

JJ171022.5ca26a94-31cd-4fda-83c5-a9564b5b019d(ko-kr,VS.120).png

SimpleSeparator

ListBox , Menu 또는 ToolBar 컨트롤의 Separator

SimpleSlider

Slider

JJ171022.bf689d92-3c74-4218-815c-e98c930ac189(ko-kr,VS.120).png

SimpleSliderThumb

Slider 컨트롤의 Thumb

SimpleTabControl

TabControl

JJ171022.f13847cd-7fdf-4757-a648-d5ece98fcaea(ko-kr,VS.120).png

SimpleTabItem

TabControl TabItem

SimpleTextBox

TextBox

JJ171022.343296b4-5c7d-4145-84cc-91b08ba67a1b(ko-kr,VS.120).png

SimpleThumbStyle

ListBox 컨트롤에 있는 ScrollBarThumb

SimpleTreeView

TreeView

JJ171022.39c99139-8723-49c9-a3e7-f99232d939cb(ko-kr,VS.120).png

SimpleTreeViewItem

TreeView 컨트롤의 TreeViewItem

SimpleTreeViewItemToggleButton

TreeView 컨트롤의 ToggleButton

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

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

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

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

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



    리소스 패널에서 브러시 리소스를 편집하도록 선택

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

    리소스 패널에서 단순한 스타일 중 하나를 변경하려면, Simple Styles.xaml을 선택한 다음 편집하고자 하는 단순한 스타일 옆의 리소스 편집단추를 선택합니다.

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

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



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

    JJ171022.a64c8f57-1243-4482-87ad-b9d5aac62867(ko-kr,VS.120).png
    팁

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

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

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

예제를 보려면 Blend에서 스타일 리소스 적용를 참조하십시오.

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

표시: