Blend에서 템플릿을 지원하는 컨트롤의 스타일 지정
컨트롤 템플릿과 스타일을 만들고 수정하여 WPF(Windows Presentation Foundation) 및 Microsoft Silverlight 컨트롤을 사용자 지정할 수 있습니다. 이렇게 하면 응용 프로그램의 모양을 고유하고 일관되게 유지할 수 있습니다.
템플릿과 스타일은 각각 컨트롤을 구성하는 요소와 컨트롤의 기본 동작을 정의합니다. 시스템 스타일 및 템플릿은 수정할 수 없으므로 컨트롤에 대한 기본 시스템 스타일 및 템플릿의 복사본을 만들어 템플릿과 스타일을 만듭니다. 기본적으로 템플릿과 스타일을 수정하면 코드를 사용하지 않고도 Blend for Visual Studio의 디자인 보기에서 새 컨트롤을 손쉽게 만들 수 있습니다.
스타일과 템플릿의 차이점
다음 표에서는 컨트롤의 스타일을 수정할지, 컨트롤의 템플릿을 수정할지 또는 둘 다 수정할지를 결정하는 데 도움이 되는 스타일과 템플릿에 대한 자세한 비교를 제공합니다.
특성 |
스타일 |
템플릿 |
|---|---|---|
용도 |
스타일을 사용하면 스타일이 적용되는 컨트롤에 설정되는 속성의 기본값을 수정할 수 있습니다. 예를 들어 단추(Button)와 같은 컨트롤의 배경, 테두리 및 전경의 기본 색을 지정할 수 있습니다. 이러한 스타일 속성은 아트보드에서 컨트롤을 그릴 때 해당 컨트롤 자체에 설정되는 값으로 다시 정의할 수 있습니다. 예를 들어 단추의 스타일에서 배경색을 파랑으로 설정한 경우 아트보드에 단추를 그리면 파랑으로 나타나지만 색을 변경할 수 있습니다. 스타일에서는 기존 속성만 설정할 수 있습니다. 예를 들어 템플릿에 추가한 새 구성 요소에 속하는 속성의 기본값은 설정할 수 없습니다. 마지막으로 스타일을 사용하여 컨트롤의 기본 동작을 지정할 수 있습니다. 예를 들어 사용자가 단추 위로 포인터를 이동하면 배경색이 변경되도록 하는 트리거를 단추의 스타일에서 지정할 수 있습니다. 이러한 속성 변경은 즉각적이므로 점진적으로 변하는 애니메이션 효과는 적용할 수 없습니다. |
템플릿을 사용하면 템플릿이 적용되는 컨트롤의 구조를 수정할 수 있습니다. 컨트롤 템플릿을 수정하여 컨트롤 내에서 개체(또는 구성 요소)를 다시 정렬, 추가 또는 삭제할 수 있습니다. 예를 들어 단추(Button)와 같은 컨트롤에 배경 이미지나 디자인을 추가할 수 있습니다. 템플릿이 적용되는 컨트롤에 설정된 속성(예: 배경색)의 값을 수정할 수도 있습니다. 이러한 템플릿 값은 아트보드에서 컨트롤을 그릴 때 해당 컨트롤 자체에 설정되는 값으로 다시 정의할 수 없습니다. 그러나 템플릿 바인딩을 사용하면 아트보드에서 컨트롤을 그릴 때 컨트롤의 속성 값에 따라 템플릿의 속성을 설정할 수 있습니다. 템플릿을 수정할 때는 스타일을 수정할 때보다 더 많은 컨트롤 구성 요소에 액세스할 수 있습니다. 예를 들어 팝업 목록이 콤보 상자에 나타나는 방식을 변경하거나 항목 템플릿을 수정하여 콤보 상자에서 팝업 목록을 트리거하는 단추의 모양을 변경할 수 있습니다. 일부 템플릿은 다음과 같은 요소로 구성됩니다.
마지막으로 트리거를 사용하여 템플릿에서 새 구성 요소 및 기존 구성 요소의 동작을 지정할 수 있습니다. 예를 들어 사용자가 단추 위로 포인터를 이동하면 구성 요소 중 하나의 색이 변경되도록 하는 트리거를 지정할 수 있습니다. 이러한 속성 변경은 부드러운 전환을 생성하는 즉각적인 변경이나 애니메이션 변경이 될 수 있습니다. .gif "참고") 참고
템플릿 바인딩된 속성이나 색 리소스의 값에서 다른 값으로 애니메이션 효과를 적용할 수 없습니다.트리거에서 애니메이션을 사용할 때는 특정 속성 값을 사용하십시오.
|
편집 방법 |
다음과 같은 방식으로 스타일의 편집 모드를 시작할 수 있습니다. 메뉴 사용
컨트롤에 시스템 스타일이 적용되어 있으면 스타일 편집 옵션을 사용할 수 없습니다. 예제를 보려면 Blend에서 스타일 만들기를 참조하십시오. 리소스 패널을 사용하여 기존 스타일 수정
참고
스타일과 템플릿은 다양한 방식으로 컨트롤에 적용할 수 있고 응용 프로그램의 여러 위치에 저장할 수 있는 리소스입니다.Blend에서 스타일 만들기에서 스타일 만들기의 예를 참조하십시오.
|
다음과 같은 방식으로 컨트롤 템플릿의 편집 모드를 시작할 수 있습니다. 메뉴 사용
리소스 패널을 사용하여 기존 템플릿 수정
팁
컨트롤 템플릿은 스타일 내에서 래핑되므로 컨트롤에 적용되는 스타일에는 컨트롤의 모양(파트) 및 동작이 모두 포함됩니다.스타일의 복사본에는 템플릿이 포함되기 때문에 복사본 편집 대신 현재 템플릿 편집을 클릭합니다.주 문서의 편집 범위로 돌아가려면 범위 반환
.png "JJ170513.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(ko-kr,VS.120).png") 을 두 번 클릭해야 합니다. 한 번만 클릭하면 스타일의 편집 모드로 돌아갑니다.
참고
스타일과 템플릿은 다양한 방식으로 컨트롤에 적용할 수 있고 응용 프로그램의 여러 위치에 저장할 수 있는 리소스입니다.Blend에서 템플릿 만들기 또는 수정에서 템플릿 만들기의 예를 참조하십시오.
|
적용 방법 |
다음과 같은 방식으로 아트보드의 컨트롤에 기존 스타일을 적용할 수 있습니다. 메뉴 사용
자산 패널을 사용하여 아트보드에 스타일이 적용된 컨트롤 그리기
|
다음과 같은 방식으로 아트보드의 컨트롤에 기존 템플릿을 적용할 수 있습니다. 메뉴 사용
자산 패널을 사용하여 아트보드에 템플릿이 적용된 컨트롤 그리기 템플릿은 스타일 안에 포함되어 있습니다. 따라서 아트보드의 컨트롤에 템플릿을 적용하려면 스타일 적용 방법과 같은 방법을 사용합니다. |
.png "JJ170513.0d8b8d29-1af9-418f-8741-be3097d76eab(ko-kr,VS.120).png")
을 클릭하여 자산 패널을 엽니다.Blend는 WPF 프로젝트의 리소스 사전에 패키지로 포함되어 있는 단순한 스타일(simple style) 및 템플릿 집합을 제공합니다. 리소스 사전을 사용하여 응용 프로그램에 적합한 테마를 디자인할 수 있습니다. 자세한 내용은 이 항목의 뒷부분에 나오는 "단순한 스타일 및 리소스 사전" 섹션을 참조하십시오.
스타일 및 템플릿 수정
Blend에서 스타일 또는 템플릿의 편집 범위에 있으면 이동 경로 탐색 막대가 아트보드의 왼쪽 위에 나타납니다.
템플릿 편집 모드가 선택된 이동 경로 탐색 막대
.png "JJ170513.eb50efd9-44c6-41f9-8f50-7d40f6c42e61(ko-kr,VS.120).png")
이동 경로 탐색 막대에 있는 단추를 클릭하여 템플릿 편집 모드, 스타일 편집 모드 및 선택한 개체의 개체 편집 범위 사이를 간편하게 이동할 수 있습니다. 사용자 지정 스타일 또는 템플릿이 적용된 모든 선택 개체에 대해 이동 경로 탐색 막대가 나타납니다.
스타일 또는 템플릿을 수정하는 방법에 대한 자세한 내용은 Blend에서 스타일 편집 및 Blend에서 템플릿 만들기 또는 수정을 참조하십시오.
모범 사례
스타일 또는 템플릿 수정 시 다음 모범 사례를 사용하십시오.
색 브러시만 변경하는 경우를 제외하고는 기존 트리거를 변경하지 마십시오.
이름이 "PART_"로 시작하는 모든 개체는 컨트롤을 구현하는 코드에서 참조되므로 수정하거나 이름을 바꾸지 않아야 합니다.
SimpleTabControl의 TabPanel 또는 SimpleScrollBar의 Track과 같은 모든 참조 개체는 제거하지 않아야 합니다. 이러한 개체는 컨트롤의 기능을 유지하기 위해 반드시 필요합니다.
속성 패널에서 바인딩을 다시 설정하거나 변경하지 않아야 합니다. 이러한 바인딩은 속성을 둘러싼 노란색 강조 표시 또는 노란색 고급 옵션 단추
.png "JJ170513.e3343378-f63e-4d8f-9847-97c1a58aadc5(ko-kr,VS.120).png")
로 식별됩니다. 템플릿 바인딩은 템플릿이 적용되는 컨트롤의 속성에 템플릿의 속성을 바인딩하는 데 사용됩니다.템플릿에 Presenter 개체(예: ContentPresenter 또는 ItemsPresenter 개체)가 포함되어 있으면 해당 개체를 템플릿에 유지해야 합니다. Presenter 개체에는 템플릿을 사용할 컨트롤에서 정의되는 콘텐츠가 표시됩니다.
경고
스타일 및 템플릿 수정 시 스타일이나 템플릿이 적용된 시스템 컨트롤의 기능이 손상되지 않도록 하려면 다음과 같은 몇 가지 사항에 유의해야 합니다.
테마
테마는 사용자 인터페이스 컨트롤에 대해 일관된 모양을 생성하는 스타일과 템플릿의 집합입니다.
단추(Button)와 같은 컨트롤의 모양을 확인하기 위해 응용 프로그램에서는 다음 위치를 검색합니다.
컨트롤에 설정된 속성 - 예를 들어, Blend에서 단추를 만든 다음 단추에서 직접 배경색을 변경하려는 경우 컨트롤에서 직접 설정한 속성은 다른 위치에서 설정된 해당 속성의 값보다 우선적으로 적용됩니다.
컨트롤에서 사용하는 사용자 지정 스타일이나 템플릿에 설정된 속성 - 예를 들어, Blend에서 단추를 만든 다음 템플릿의 복사본을 수정하여 템플릿의 배경색을 설정하려는 경우 단추에서 직접 배경 속성을 설정하지 않으면 이 배경색은 단추에 사용됩니다. 컨트롤이 들어 있는 문서 내에서 리소스를 정의하거나, 응용 프로그램 수준에서 리소스를 정의하여 응용 프로그램의 모든 문서에서 리소스를 사용할 수 있도록 설정할 수 있습니다. 문서 수준 리소스는 응용 프로그램 수준 리소스보다 우선적으로 적용됩니다.
컨트롤에서 사용하는 시스템 템플릿에 설정된 속성 - WPF는 테마(즉, 운영 체제)에 따라 시스템 템플릿을 결정합니다.
단순한 스타일 및 리소스 사전
참고
Silverlight 프로젝트에서는 단순한 스타일을 지원하지 않습니다.
리소스 사전으로 불리는 개별 파일에서 속성, 스타일 및 템플릿 리소스를 만들어 테마를 효과적으로 만들 수 있습니다. 리소스 사전을 사용하면 여러 응용 프로그램에서 테마를 다시 사용할 수 있습니다. 또한 동일한 형식의 리소스를 다른 값으로 제공하는 여러 리소스 사전을 정의하여 전환 가능한 테마를 만들 수 있습니다. 한 예로, Blend 응용 프로그램 자체도 블랙(어둡게) 테마와 실버(밝게) 테마에 각기 다른 리소스 사전을 사용하므로 도구 메뉴에서 옵션을 클릭한 다음 작업 영역에 대한 테마를 변경하여 전환할 수 있습니다.
Blend는 응용 프로그램에서 사용할 수 있도록 단추(Button), 목록 상자(ListBox) 등의 공용 컨트롤에 대한 스타일 집합이 있는 미리 생성된 리소스 사전(SimpleStyles.xaml)을 제공합니다. 자산 패널의 스타일 범주에 있는 단순한 스타일에서 이러한 스타일에 액세스할 수 있습니다. 단순한 스타일 중 하나를 사용하여 아트보드에 컨트롤을 그리면 동시에 컨트롤의 시스템 버전이 생성되고 단순한 스타일이 적용됩니다. 예를 들어 아트보드에 시스템 Button을 만들면 결과 XAML(eXtensible Application Markup Language)이 다음과 같이 표시됩니다.
<Button Content="Button" ... />
아트보드에 SimpleButton을 만들면 결과 XAML에는 다음과 같이 SimpleButton 스타일에 대한 참조가 포함됩니다.
<Button Content="Button" Style="{DynamicResource SimpleButton}" ... />
아트보드에 단순한 스타일 컨트롤을 추가하면 SimpleStyles.xaml 리소스 사전 파일이 프로젝트에 추가되고 app.xaml 파일에 연결되어 응용 프로그램 범위에서 스타일이 정의됩니다. 모든 스타일은 리소스 패널에서 확인할 수 있습니다.
리소스를 관리하는 방법에 대한 자세한 내용은 Blend에서 재사용 가능한 리소스 만들기를 참조하십시오.