템플릿 만들기 또는 수정

  • 아티클

컨트롤의 모양은 아트보드의 컨트롤에 적용되는 템플릿에 의해 정의됩니다. 템플릿에는 컨트롤 내에 포함되는 개체가 포함됩니다. 예를 들어 TextBox의 컨트롤 템플릿에 Bd라는 Border 개체가 있고 이 개체에 PART_ContentHost라는 ScrollViewer 개체가 있는 경우, 컨트롤 템플릿을 아트보드의 TextBox에 적용하면 ScrollViewer 개체에 TextBox의 콘텐츠가 표시됩니다.

TextBox 컨트롤의 템플릿 편집

Cc294908.5b3d19c3-460f-4cd1-8a35-262f8b3005b1(KO-KR,Expression.30).png

시스템 컨트롤의 기본 템플릿은 응용 프로그램이 실행되는 운영 체제(Windows XP 컴퓨터 또는 Windows Vista 컴퓨터)에 따라 컨트롤의 모양이 변경되는 동적 테마를 사용합니다. 그러나 시스템 컨트롤의 템플릿은 수정해도 Windows XP와 Windows Vista에서 컨트롤은 동일하게 보입니다.

자세한 내용은 템플릿을 지원하는 컨트롤의 스타일 지정의 "테마" 섹션을 참조하십시오.

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

컨트롤 템플릿 만들기

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

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

    • 개체를 마우스 오른쪽 단추로 클릭한 다음 템플릿 편집을 가리킵니다.

    • 아트보드의 맨 위에 있는 이동 경로 탐색 막대에서 개체의 이름을 클릭합니다.

  2. 드롭다운 메뉴가 나타나면 다음 작업 중 하나를 수행합니다.

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

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

      [!참고]

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

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

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

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

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

      Cc294908.alert_tip(KO-KR,Expression.30).gif팁:

      XAML에서 스타일 요소를 만들 때 TargetType 특성이 스타일을 만들 개체의 형식으로 설정됩니다.

      x:Key 특성은 키 이름을 입력한 경우(위 단계의 첫 번째 옵션)에만 설정됩니다. x:Key 특성이 있어야만 해당 키 이름으로 스타일을 지정하는 모든 개체만 스타일을 적용할 수 있습니다. x:Key 특성이 없으면 동일한 형식의 모든 개체에 스타일이 적용됩니다. 예를 들어 다음 코드 예제의 스타일 개체는 아트보드의 일부 단추에만 적용됩니다.

      <Style x:Key="ButtonStyle1" TargetType="{x:Type Button}"...

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

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

    • 현재 문서에서만 스타일을 사용할 수 있도록 하려면 이 문서를 선택하고 드롭다운 메뉴에서 옵션을 선택합니다.

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

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

    Cc294908.alert_tip(KO-KR,Expression.30).gif팁:

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

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

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

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

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

  7. 자식 개체를 추가하거나 다시 정렬하여 템플릿을 수정합니다.

  8. 다음 중 하나를 수행하여 사용자 상호 작용의 결과에 따라 개체의 모양이나 동작을 변경할 수 있습니다.

    • Windows Presentation Foundation (WPF) 프로젝트에서 작업하는 경우 트리거 패널에서 트리거를 선택하여 트리거 기록을 설정한 다음 템플릿의 개체를 변경합니다. 원하는 트리거가 없는 경우 만들 수 있습니다. 예를 들어 Button 개체의 클릭을 처리할 트리거를 만들려면 속성 트리거 추가를 클릭하고 트리거를 IsPressed=True로 설정한 다음 새 트리거를 선택하고 변경합니다.

      트리거에 대한 자세한 내용은 트리거를 사용하여 WPF 컨트롤의 동작 정의을 참조하십시오.

      자세한 내용은 WPF 단순한 스타일에 대한 스타일 팁을 참조하십시오.

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

      컨트롤의 템플릿의 일부를 변경하면 해당 컨트롤의 기능이 손상될 수 있습니다.

      자세한 내용은 템플릿을 지원하는 컨트롤의 스타일 지정의 "모범 사례"를 참조하십시오.

    • Microsoft Silverlight 프로젝트에서 작업하는 경우 상태 패널에서 상태를 선택하여 상태 기록을 설정한 다음 템플릿의 개체를 변경합니다. 개체 유형에 파트가 지원되는 경우 템플릿의 파트를 다른 개체에 지정할 수 있습니다. 예를 들어 아트를 이미지 개체로 가져온 다음 새 개체를 템플릿의 파트로 변환할 수 있습니다. 상태와 템플릿 파트는 사용자 상호 작용에 따라 함께 개체의 모양을 변경합니다.

      자세한 내용은 Silverlight 컨트롤 템플릿의 구성 요소 스타일 지정 및 공통 Silverlight 컨트롤의 스타일 지정 팁을 참조하십시오.

    • 개체에 별도의 대화형 기능을 추가하려면 상태 패널에서 새 상태를 만든 다음 GoToStateAction 동작을 사용하여 이벤트에 따라 상태를 교대로 변경할 수 있습니다.

      자세한 내용은 컨트롤에 대해 다른 시각적 상태 정의 및 개체에 동작 추가를 참조하십시오.

    • 이벤트에 대한 응답으로 실행되는 코드를 작성할 수 있습니다. 속성 패널의 이벤트 보기에서 이벤트 이름 옆의 입력 필드를 두 번 클릭하여 이벤트 처리기 메서드를 문서의 코드 숨김 파일에 추가합니다.

      자세한 내용은 이벤트에 응답하는 코드 작성을 참조하십시오.

  9. 스타일의 편집 범위를 종료하려면 개체 및 타임라인 패널에서 상위 범위로 이동 Cc294908.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(KO-KR,Expression.30).png을 클릭합니다. 문서의 편집 범위로 돌아갑니다.

    Cc294908.alert_tip(KO-KR,Expression.30).gif팁:

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

기존 사용자 지정 템플릿 편집

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

  • 아트보드의 맨 위에 있는 이동 경로 탐색 막대에서 세 번째 단추를 클릭합니다.

    Cc294908.5bb586ea-6adc-4672-b316-0fab8215ff8c(KO-KR,Expression.30).png

  • 개체 메뉴에서 템플릿 편집을 가리킨 다음 현재 편집을 클릭합니다.

  • 개체를 마우스 오른쪽 단추로 클릭하고 템플릿 편집을 가리킨 다음 현재 편집을 클릭합니다.

  • 속성 패널에서 Style 속성(이 개체에 이미 스타일을 적용했으므로 녹색으로 강조 표시됨) 옆의 고급 속성 옵션 Cc294908.ac1bd7f6-f5e6-494c-bca7-7a57ab314eab(KO-KR,Expression.30).png을 클릭한 다음 바로 가기 메뉴에서 리소스 편집을 클릭합니다. 스타일 편집 범위에 있는 경우에는 개체 및 타임라인 패널에서 Style 개체를 마우스 오른쪽 단추로 클릭하고 템플릿 편집을 가리킨 다음 현재 편집을 클릭합니다.

    [!참고]

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

    Expression Blend는 템플릿의 편집 범위로 전환됩니다.

리소스 패널에서 템플릿 열기

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

    Expression Blend는 스타일의 편집 범위로 전환됩니다.

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

    Expression Blend는 템플릿의 편집 범위로 전환됩니다.

참조

작업

기존 개체에서 사용자 정의 컨트롤 만들기

개념

공통 Silverlight 컨트롤의 스타일 지정 팁

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