컨트롤 템플릿 만들기 또는 편집

Microsoft Expression Blend 2 프로젝트에서 컨트롤의 템플릿은 해당 컨트롤에 포함된 자식 컨트롤을 정의하여 그 모양을 정의합니다. 예를 들어 TextBox의 컨트롤 템플릿에 Bd라는 Border 요소가 있고 이 요소에 PART_ContentHost라는 ScrollViewer 요소가 있는 경우, 컨트롤 템플릿을 아트보드의 TextBox에 적용하면 ScrollViewer 요소에 TextBox의 콘텐츠가 표시됩니다.

TextBox 컨트롤의 템플릿 편집

기본 컨트롤 템플릿은 동적 테마를 사용하므로 Blend가 실행되고 있는 운영 체제(Microsoft Windows XP 또는 Windows Vista)에 따라 컨트롤의 모양이 달라집니다. 컨트롤 템플릿에 포함된 요소(컨트롤 구성 요소)를 수정하여 요소를 다시 정렬하거나 컨트롤에 요소를 더 그릴 수 있습니다. 그러나 시스템 컨트롤의 템플릿은 수정해도 Windows XP와 Windows Vista에서 컨트롤이 동일하게 보입니다. 자세한 내용은 스타일 및 템플릿 개요의 "테마 및 단순한 스타일" 단원을 참조하십시오.

컨트롤 템플릿은 동일한 형식의 다른 컨트롤에 적용할 수 있는 스타일 리소스로 저장됩니다.

[!참고]

컨트롤 템플릿에서 속성 변경(예: IsMouseOver)에 응답하는 트리거를 구성할 수 있습니다. 예를 들어 TextBox에 대해, TextBox 위로 마우스 커서를 이동하면 배경색이 바뀌게 하는 속성 트리거를 만들 수 있습니다.

속성을 변경하거나 애니메이션을 시작하여 이벤트에 응답하는 이벤트 트리거를 만들려면 스타일에서 만들어야 합니다. 자세한 내용은 스타일 편집을 참조하십시오.

주의:
컨트롤의 템플릿을 변경하면 해당 컨트롤의 기능이 손상될 수 있습니다. 스타일이 미리 지정된 단순한 컨트롤을 사용하면 시스템 컨트롤의 컨트롤 템플릿을 완전히 자유롭게 디자인할 수 있어 이처럼 기능이 손상되는 위험을 피할 수 있습니다. 자세한 내용은 단순한 스타일 사용을 참조하십시오. 요구 사항에 맞는 단순한 스타일(simple style)이 없는 경우 시스템 컨트롤의 템플릿을 수정하려면 다음 사항에 유의하시기 바랍니다.

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

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

• 속성 패널에서 바인딩을 다시 설정하거나 변경하지 마십시오. 속성을 둘러싼 노란색 강조 표시나 노란색 고급 속성 옵션 단추가 있으면 바인딩이 설정된 것입니다.

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

컨트롤 템플릿 만들기

1. 개체 및 타임라인 또는 아트보드에서 컨트롤 템플릿을 만들 개체를 선택하고 다음 작업 중 하나를 수행합니다.

   • 개체 메뉴에서 컨트롤 구성 요소(템플릿) 편집을 가리킵니다.

   • 개체 및 타임라인에서 개체를 마우스 오른쪽 단추로 클릭한 다음 컨트롤 구성 요소(템플릿) 편집을 가리킵니다.

2. 템플릿 편집을 가리키고 다음 작업 중 하나를 수행합니다.

   • 빈 템플릿을 새로 만들려면 빈 항목 만들기를 클릭합니다.

   • 선택한 요소에서 현재 사용하고 있는 템플릿(개체의 기본 템플릿이든, 이전에 만든 사용자 지정 템플릿이든 관계없이)을 기반으로 새 템플릿을 만들려면 복사본 편집을 클릭합니다.

     [!참고]

     템플릿 편집 옵션이 활성화되어 있으면 이 개체에 템플릿이 이미 적용된 것입니다. 이 템플릿을 선택하여 편집할 수 있습니다.

   Style 리소스 만들기 대화 상자가 나타납니다. 컨트롤 템플릿이 스타일 리소스에 저장되어 있기 때문에 이 대화 상자가 나타납니다.

3. **리소스 이름(키)**에서 다음 작업 중 하나를 수행합니다.

   • 요소의 스타일 이름을 새로 만들려면 키 이름을 입력합니다. 이 이름을 사용하여 다른 요소에서 스타일을 참조하고 템플릿을 적용할 수 있습니다.

   • 동일한 형식의 모든 요소에서 사용할 스타일을 만들려면 모든 항목에 적용을 선택합니다.

     팁:
     XAML에서 스타일 요소를 만들 때 TargetType 특성이 스타일을 만들 요소의 형식으로 설정됩니다. x:Key 특성은 키 이름을 입력한 경우(위 첫 번째 옵션)에만 설정됩니다. x:Key 특성이 있어야만 해당 키 이름으로 스타일을 지정하는 모든 요소에 스타일을 적용할 수 있습니다. x:Key 특성이 없으면 동일한 형식의 모든 요소에 스타일이 적용됩니다. 예를 들어 다음과 같이 지정된 스타일 요소는 아트보드의 일부 단추에만 적용됩니다. <Style x:Key="ButtonStyle1" TargetType="{x:Type Button}"...

4. 정의 위치에서 스타일을 정의할 위치 옵션을 선택합니다.

   • 응용 프로그램의 모든 문서에서 스타일을 사용할 수 있게 하려면 응용 프로그램을 선택합니다.

   • 현재 문서에서만 스타일을 사용할 수 있도록 하려면 **이 문서 (Window: Window)**를 선택합니다.

   • 다른 프로젝트에서 다시 사용할 수 있는 리소스 사전 파일에서 스타일을 정의하려면 리소스 사전을 선택합니다. 그런 다음 기존 리소스 사전 파일을 선택하거나 새로 만들기를 클릭해서 새 항목을 만듭니다.

     [!참고]

     Silverlight 2에서는 리소스 사전을 사용할 수 없습니다.

5. 확인을 클릭하여 대화 상자를 종료하고 스타일을 열어 편집합니다.

   팁:
   실제로는 스타일 내에 새 템플릿 리소스를 만들게 됩니다. 이 템플릿 리소스는 로컬 리소스가 되며 리소스 패널에서 간편하게 보고 수정할 수 있습니다.

6. 아트보드의 맨 위에 새로 표시되는 Expression Blend 2 이동 경로 탐색 막대를 확인합니다.

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

   

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

7. 인터랙션 패널에서 자식 요소를 추가 또는 다시 정렬하거나 속성 트리거를 추가하여 템플릿을 수정합니다. 시스템 컨트롤의 템플릿을 수정하는 경우에는 위에서 설명한 주의 사항을 따르십시오.

8. 스타일의 편집 범위를 종료하려면 개체 및 타임라인에서 상위 범위로 이동 단추 를 클릭합니다. 문서의 편집 범위로 돌아갑니다.

   팁:
   스타일 리소스를 만들거나 개체에 적용하면 선택한 개체의 Style 속성에 대해 속성 패널에 녹색 강조 표시가 나타나 해당 개체가 이 스타일 리소스에 바인딩되거나 연결되어 있음을 표시합니다.

맨 위로 이동

아트보드에 그린 개체의 템플릿 편집

• 아트보드 또는 개체 및 타임라인에서 개체를 클릭하여 선택한 후 다음 작업 중 하나를 수행합니다.

  • 개체 메뉴에서 컨트롤 구성 요소(템플릿) 편집을 가리킨 다음 템플릿 편집을 클릭합니다.

  • 개체 및 타임라인에서 개체를 마우스 오른쪽 단추로 클릭하고 컨트롤 구성 요소(템플릿) 편집을 가리킨 다음 템플릿 편집을 클릭합니다.

  • 속성 패널에서 Style 속성(이 요소에 이미 스타일을 적용했으므로 녹색으로 강조 표시됨)을 클릭한 다음 바로 가기 메뉴에서 리소스 편집을 클릭합니다. 스타일 편집 범위에 있는 경우에는 개체 및 타임라인에서 Style 개체를 마우스 오른쪽 단추로 클릭하고 컨트롤 구성 요소(템플릿) 편집을 가리킨 다음 템플릿 편집을 클릭합니다.

  [!참고]

  템플릿 편집 옵션이 비활성화되어 있으면 개체에 템플릿이 적용되지 않은 것입니다.

  템플릿의 편집 범위로 들어갑니다.

맨 위로 이동

템플릿 리소스 편집

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

  템플릿의 편집 범위로 들어갑니다.

맨 위로 이동

템플릿 수정

1. 템플릿의 편집 범위에 있는 경우 인터랙션 패널에서 속성 트리거를 추가하거나 템플릿에 자식 요소를 추가합니다. 시스템 컨트롤의 템플릿을 수정하는 경우에는 위에서 설명한 주의 사항을 따르십시오.

2. 템플릿의 편집 범위를 종료하려면 개체및 타임라인에서 상위 범위로 이동 단추 를 클릭합니다.

   문서의 편집 범위로 돌아갑니다.

   팁:
   템플릿 리소스를 만들거나 개체에 적용하면 선택한 개체의 Style 속성에 대해 속성 패널에 녹색 강조 표시가 나타나 해당 개체가 이 스타일 리소스에 바인딩되거나 연결되어 있음을 표시합니다.

맨 위로 이동

참조

개념

단순한 스타일 사용

실습 정보: 비트맵 효과를 사용하여 단추 만들기