템플릿을 지원하는 컨트롤의 스타일 지정

컨트롤 템플릿과 스타일을 만들고 수정하여 Windows Presentation Foundation (WPF) 및 Microsoft Silverlight 컨트롤을 사용자 지정할 수 있습니다. 이렇게 하면 응용 프로그램의 모양을 고유하고 일관되게 유지할 수 있습니다.

템플릿과 스타일은 각각 컨트롤을 구성하는 요소와 컨트롤의 기본 동작을 정의합니다. 시스템 스타일 및 템플릿은 수정할 수 없으므로 컨트롤에 대한 기본 시스템 스타일 및 템플릿의 복사본을 만들어 템플릿과 스타일을 만듭니다. 코드를 사용하지 않고 템플릿과 스타일을 수정하여 Microsoft Expression Blend의 디자인 보기에서 새 컨트롤을 쉽게 만들 수 있습니다.

다음 표에서는 컨트롤의 스타일을 수정할지, 컨트롤의 템플릿을 수정할지 또는 둘 다 수정할지를 결정하는 데 도움이 되는 스타일과 템플릿에 대한 자세한 비교를 제공합니다.

특징

스타일

템플릿

용도

스타일을 사용하면 스타일이 적용되는 컨트롤에 설정되는 속성의 기본값을 수정할 수 있습니다. 예를 들어 단추(Button)와 같은 컨트롤의 배경, 테두리 및 전경의 기본 색을 지정할 수 있습니다.

이러한 스타일 속성은 아트보드에서 컨트롤을 그릴 때 해당 컨트롤 자체에 설정되는 값으로 다시 정의할 수 있습니다. 예를 들어 단추의 스타일에서 배경색을 파랑으로 설정한 경우 아트보드에 단추를 그리면 파랑으로 나타나지만 색을 변경할 수 있습니다.

스타일에서는 기존 속성만 설정할 수 있습니다. 예를 들어 템플릿에 추가한 새 구성 요소에 속하는 속성의 기본값은 설정할 수 없습니다.

마지막으로 스타일을 사용하여 컨트롤의 기본 동작을 지정할 수 있습니다. 예를 들어 사용자가 단추 위로 포인터를 이동하면 배경색이 변경되도록 하는 트리거를 단추의 스타일에서 지정할 수 있습니다. 이러한 속성 변경은 즉각적이므로 점진적으로 변하는 애니메이션 효과는 적용할 수 없습니다.

템플릿을 사용하면 템플릿이 적용되는 컨트롤의 구조를 수정할 수 있습니다. 컨트롤 템플릿을 수정하여 컨트롤 내에서 요소(또는 구성 요소)를 다시 정렬하거나, 추가하거나, 삭제할 수 있습니다. 예를 들어 단추(Button)와 같은 컨트롤에 배경 이미지나 디자인을 추가할 수 있습니다.

템플릿이 적용되는 컨트롤에 설정된 속성(예: 배경색)의 값을 수정할 수도 있습니다. 이러한 템플릿 값은 아트보드에서 컨트롤을 그릴 때 해당 컨트롤 자체에 설정되는 값으로 다시 정의할 수 없습니다. 그러나 템플릿 바인딩을 사용하면 아트보드에서 컨트롤을 그릴 때 컨트롤의 속성 값에 따라 템플릿의 속성을 설정할 수 있습니다.

템플릿을 수정할 때는 스타일을 수정할 때보다 더 많은 컨트롤 구성 요소에 액세스할 수 있습니다. 예를 들어 팝업 목록이 콤보 상자에 나타나는 방식을 변경하거나 항목 템플릿을 수정하여 콤보 상자에서 팝업 목록을 트리거하는 단추의 모양을 변경할 수 있습니다. 일부 템플릿은 다음과 같은 요소로 구성됩니다.

  • ContentPresenter   콘텐츠 프리젠터는 템플릿이 적용되는 컨트롤의 콘텐츠를 표시하는 컨트롤 템플릿의 자리 표시자입니다. 단추(Button)의 콘텐츠 속성이나 텍스트 상자(TextBox)의 텍스트 속성 값이 될 수 있습니다.

  • Header   일부 컨트롤에는 콘텐츠를 포함하는 속성이 여러 개 있습니다. 이런 경우 템플릿에서는 헤더(Header)로 사용되는 콘텐츠 형식에 대한 자리 표시자로 ContentPresenter를 추가로 이용합니다. 헤더가 있는 컨트롤의 예로는 TabItem 컨트롤이 있습니다. 이 컨트롤에서 헤더는 탭의 레이블이고 콘텐츠는 헤더 아래에 표시됩니다.

  • ItemsHost   항목 호스트는 컨트롤의 자식 요소에 대한 자리 표시자로 사용됩니다. 템플릿의 항목 호스트 구성 요소는 속성 패널에서 IsItemsHost = True로 식별됩니다.

  • ItemContainerTemplate   항목 컨테이너(ItemContainer) 템플릿은 Menu 또는 List 컨트롤과 같은 항목이 포함된 컨트롤에 적용됩니다. 목록에 항목이 추가될 때 이 템플릿이 사용됩니다.

마지막으로 트리거를 사용하여 템플릿에서 새 구성 요소 및 기존 구성 요소의 동작을 지정할 수 있습니다. 예를 들어 사용자가 단추 위로 포인터를 이동하면 구성 요소 중 하나의 색이 변경되도록 하는 트리거를 지정할 수 있습니다. 이러한 속성 변경은 부드러운 전환을 생성하는 즉각적인 변경이나 애니메이션 변경이 될 수 있습니다.

Cc295273.alert_note(KO-KR,Expression.30).gif참고:
템플릿 바인딩된 속성이나 색 리소스의 값에서 다른 값으로 애니메이션 효과를 적용할 수 없습니다. 트리거에서 애니메이션을 사용할 때는 특정 속성 값을 사용하십시오.

편집 방법

다음과 같은 방식으로 스타일의 편집 모드를 시작할 수 있습니다.

메뉴 사용

  1. 개체 및 타임라인 패널에서 컨트롤을 선택합니다.

  2. 개체 메뉴에서 스타일 편집을 가리킵니다.

  3. 다음 작업 중 하나를 수행합니다.

    • 현재 컨트롤에 적용되어 있는 스타일을 변경하려면 현재 템플릿 편집을 클릭합니다.

    • 현재 컨트롤에 적용되어 있는 스타일의 새 복사본을 동시에 만들어 컨트롤에 새 스타일을 적용하려면 복사본 편집을 클릭합니다.

컨트롤에 시스템 스타일이 적용되어 있으면 스타일 편집 옵션을 사용할 수 없습니다.

스타일 만들기 에서 예를 참조하십시오.

리소스 패널을 사용하여 기존 스타일 수정

  • 리소스 패널에서 스타일을 찾은 다음 스타일 옆에 있는 리소스 편집 단추를 클릭합니다.

Cc295273.alert_note(KO-KR,Expression.30).gif참고:
스타일과 템플릿은 다양한 방식으로 컨트롤에 적용할 수 있고 응용 프로그램의 여러 위치에 저장할 수 있는 리소스입니다. 스타일 만들기에서 스타일 만들기의 예를 참조하십시오.

다음과 같은 방식으로 컨트롤 템플릿의 편집 모드를 시작할 수 있습니다.

메뉴 사용

  1. 개체 및 타임라인 패널에서 컨트롤을 선택합니다.

  2. 다음 작업 중 하나를 수행합니다.

    • 개체 메뉴에서 템플릿 편집을 가리킵니다.

    • 컨트롤을 마우스 오른쪽 단추로 클릭하고 템플릿 편집을 가리킵니다.

  3. 현재 컨트롤에 적용되어 있는 템플릿을 수정하려면 현재 템플릿 편집을 클릭하고, 현재 컨트롤에 적용되어 있는 템플릿의 새 복사본을 동시에 만들어 컨트롤에 새 템플릿을 적용하려면 복사본 편집을 클릭합니다. 컨트롤에 시스템 템플릿이 적용되어 있으면 현재 템플릿 편집 옵션을 사용할 수 없습니다.

    템플릿 만들기 또는 수정 에서 예를 참조하십시오.

리소스 패널을 사용하여 기존 템플릿 수정

  1. 리소스 패널에서 템플릿이 포함된 스타일을 찾은 다음 스타일 옆에 있는 리소스 편집 단추를 클릭합니다.

  2. 개체 및 타임라인 패널에서 스타일 요소를 마우스 오른쪽 단추로 클릭하고 템플릿 편집을 가리킨 다음 현재 템플릿 편집을 클릭합니다.

Cc295273.alert_tip(KO-KR,Expression.30).gif팁:
컨트롤 템플릿은 스타일 내에서 래핑되므로 컨트롤에 적용되는 스타일에는 컨트롤의 모양(구성 요소)과 동작이 모두 포함됩니다. 스타일의 복사본에는 템플릿이 포함되기 때문에 복사본 편집 대신 현재 템플릿 편집을 클릭합니다.주 문서의 편집 범위로 돌아가려면 상위 범위로 이동Cc295273.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(KO-KR,Expression.30).png을 두 번 클릭해야 합니다. 한 번만 클릭하면 스타일의 편집 모드로 돌아갑니다.
Cc295273.alert_note(KO-KR,Expression.30).gif참고:
스타일과 템플릿은 다양한 방식으로 컨트롤에 적용할 수 있고 응용 프로그램의 여러 위치에 저장할 수 있는 리소스입니다. 템플릿 만들기 또는 수정에서 템플릿 만들기의 예를 참조하십시오.

적용 방법

다음과 같은 방식으로 아트보드의 컨트롤에 기존 스타일을 적용할 수 있습니다.

메뉴 사용

  1. 개체 및 타임라인 패널에서 컨트롤을 선택합니다.

  2. 개체 메뉴에서 스타일 편집리소스 적용을 차례로 가리킨 다음 표시되는 드롭다운 목록에서 스타일을 선택합니다. 드롭다운 목록에는 선택한 컨트롤에서 사용할 수 있는 스타일만 표시됩니다. 예를 들어 단추(Button)에는 텍스트 상자(TextBox) 스타일을 적용할 수 없습니다.

자산 패널을 사용하여 아트보드에 스타일이 적용된 컨트롤 그리기

  1. 자산 Cc295273.0d8b8d29-1af9-418f-8741-be3097d76eab(KO-KR,Expression.30).png을 클릭하여 자산 패널을 엽니다.

  2. 다음 작업 중 하나를 수행합니다.

    • 작업하고 있는 문서에서 스타일을 만든 경우 스타일 범주를 클릭합니다.

    • 리소스 사전에 스타일을 만든 경우 스타일 범주를 확장한 다음 사전 이름을 클릭합니다.

  3. 원하는 스타일을 선택하고 아트보드에서 그립니다.

다음과 같은 방식으로 아트보드의 컨트롤에 기존 템플릿을 적용할 수 있습니다.

메뉴 사용

  1. 개체 및 타임라인 패널에서 컨트롤을 선택합니다.

  2. 개체 메뉴에서 템플릿 편집리소스 적용을 차례로 가리킨 다음 표시되는 드롭다운 목록에서 템플릿을 선택합니다. 드롭다운 목록에는 선택한 컨트롤에 사용할 수 있는 템플릿만 표시됩니다. 예를 들어 단추에는 텍스트 상자 템플릿을 적용할 수 없습니다.

자산 패널을 사용하여 아트보드에 템플릿이 적용된 컨트롤 그리기

템플릿은 스타일 안에 포함되어 있습니다. 따라서 아트보드의 컨트롤에 템플릿을 적용하려면 스타일 적용 방법과 같은 방법을 사용합니다.

Expression Blend에서는 WPF 프로젝트에서 리소스 사전에 패키지화되어 있는 단순한 스타일 및 템플릿 집합을 제공합니다. 리소스 사전을 사용하여 응용 프로그램에 적합한 테마를 디자인할 수 있습니다. 자세한 내용은 이 항목의 뒷부분에 나오는 "단순한 스타일 및 리소스 사전" 섹션을 참조하십시오.

Expression Blend에서 스타일 또는 템플릿의 편집 범위에 있으면 이동 경로 탐색 막대가 아트보드의 왼쪽 위에 나타납니다.

템플릿 편집 모드가 선택된 이동 경로 탐색 막대

Cc295273.eb50efd9-44c6-41f9-8f50-7d40f6c42e61(KO-KR,Expression.30).png

이동 경로 탐색 막대에 있는 단추를 클릭하여 템플릿 편집 모드, 스타일 편집 모드 및 선택한 개체의 개체 편집 범위 사이를 간편하게 이동할 수 있습니다. 사용자 지정 스타일 또는 템플릿이 적용된 모든 선택 개체에 대해 이동 경로 탐색 막대가 나타납니다.

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

스타일 또는 템플릿 수정 시 다음 모범 사례를 사용하십시오.

  • 색 브러시만 변경하는 경우를 제외하고는 기존 트리거를 변경하지 마십시오.

  • 이름이 "PART_"로 시작하는 요소는 컨트롤을 구현하는 코드에서 참조되므로 수정하거나 이름을 바꾸지 마십시오.

  • SimpleTabControlTabPanel이나 SimpleScrollBarTrack과 같은 도우미 요소를 제거하지 마십시오. 이들 요소는 컨트롤의 기능을 유지하기 위해 반드시 필요합니다.

  • 속성 패널에서 바인딩을 다시 설정하거나 변경하지 마십시오. 이러한 바인딩은 속성을 둘러싼 노란색 강조 표시나 노란색 고급 속성 옵션 단추 Cc295273.e3343378-f63e-4d8f-9847-97c1a58aadc5(KO-KR,Expression.30).png로 식별됩니다. 템플릿 바인딩은 템플릿이 적용되는 컨트롤의 속성에 템플릿의 속성을 바인딩하는 데 사용됩니다.

  • 템플릿에 Presenter 요소(예: ContentPresenter 또는 ItemsPresenter 요소)가 포함되어 있으면 해당 요소를 템플릿에 유지해야 합니다. Presenter 요소에는 템플릿을 사용할 컨트롤에서 정의되는 콘텐츠가 표시됩니다.

Cc295273.alert_caution(KO-KR,Expression.30).gif 주의:

스타일 및 템플릿 수정 시 스타일이나 템플릿이 적용된 시스템 컨트롤의 기능이 손상되지 않도록 하려면 다음과 같은 몇 가지 사항에 유의해야 합니다.

테마는 사용자 인터페이스 컨트롤에 대해 일관된 모양을 생성하는 스타일과 템플릿의 집합입니다. 예를 들어 WPF에서는 Windows XP에서 실행되는 WPF 응용 프로그램과 Windows Vista에서 실행되는 WPF 응용 프로그램에 대해 서로 다른 테마를 사용합니다. 따라서 같은 단추의 모양이 두 운영 제체에서 다르게 나타납니다.

단추(Button)와 같은 컨트롤의 모양을 확인하기 위해 응용 프로그램에서는 다음 위치를 검색합니다.

  1. 컨트롤에 설정된 속성 - 예를 들어 Expression Blend에서 단추를 만든 다음 단추에서 직접 배경색을 변경하려는 경우 컨트롤에서 직접 설정한 속성은 다른 위치에서 설정된 해당 속성의 값보다 우선적으로 적용됩니다.

  2. 컨트롤에서 사용하는 사용자 지정 스타일이나 템플릿에 설정된 속성 - 예를 들어 Expression Blend에서 단추를 만든 다음 템플릿의 복사본을 수정하여 템플릿의 배경색을 설정하려는 경우 단추에서 직접 배경 속성을 설정하지 않으면 이 배경색은 단추에 사용됩니다. 컨트롤이 들어 있는 문서 내에서 리소스를 정의하거나, 응용 프로그램 수준에서 리소스를 정의하여 응용 프로그램의 모든 문서에서 리소스를 사용할 수 있도록 설정할 수 있습니다. 문서 수준 리소스는 응용 프로그램 수준 리소스보다 우선적으로 적용됩니다.

  3. 컨트롤에서 사용하는 시스템 템플릿에 설정된 속성 - WPF는 테마(즉, 운영 체제)에 따라 시스템 템플릿을 결정합니다.

Cc295273.alert_note(KO-KR,Expression.30).gif 참고:

Silverlight 프로젝트에서는 단순한 스타일을 지원하지 않습니다.

리소스 사전으로 불리는 개별 파일에서 속성, 스타일 및 템플릿 리소스를 만들어 테마를 효과적으로 만들 수 있습니다. 리소스 사전을 사용하면 여러 응용 프로그램에서 테마를 다시 사용할 수 있습니다. 또한 동일한 형식의 리소스를 다른 값으로 제공하는 여러 리소스 사전을 정의하여 전환 가능한 테마를 만들 수 있습니다. 한 예로, Expression Blend 응용 프로그램 자체도 블랙(어둡게) 테마와 실버(밝게) 테마에 각기 다른 리소스 사전을 사용하므로 도구 메뉴에서 옵션을 클릭한 다음 작업 영역에 대한 테마를 변경하여 전환할 수 있습니다.

Expression 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 파일에 연결되어 응용 프로그램 범위에서 스타일이 정의됩니다. 모든 스타일은 리소스 패널에서 확인할 수 있습니다.

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

커뮤니티 추가 항목

추가
표시: