프로젝트에서 컨트롤용 스킨 만들기

정적 리소스를 사용하여 컨트롤에 적용되는 템플릿을 정의하는 방식으로 컨트롤 모양을 사용자 지정할 수 있습니다. 예를 들어 사각형 대신 이미지를 사용하여 단추의 모양을 구성한 단추 템플릿을 만들 수 있습니다.

여러 컨트롤 템플릿 간에 또는 여러 사용자 정의 컨트롤 간에 공통된 모양을 만들려면 개별 속성을 정적 리소스로 변환한 다음 템플릿 및 사용자 정의 컨트롤에 적용할 수 있습니다. 예를 들어 단추 템플릿의 테두리 색을 리소스로 변환한 다음 해당 색 리소스를 확인란(CheckBox) 템플릿 또는 사용자 정의 컨트롤의 테두리 속성에 적용할 수 있습니다.

템플릿과 리소스를 다른 프로젝트에 다시 사용하려면 리소스를 리소스 사전 파일로 이동한 다음 이 파일을 다른 프로젝트에 추가합니다. 리소스 사전 파일은 응용 프로그램 스킨의 리포지토리가 됩니다.

컨트롤의 템플릿 만들기

사용자 정의 컨트롤 만들기

속성을 정적 리소스로 변환

  1. 아트보드에서 다른 컨트롤에 다시 사용할 속성 값이 있는 개체를 선택합니다.

  2. 속성 패널의 속성 보기 Dd185519.cee1494c-ef95-4dd4-9fbc-9d02edfa78b7(KO-KR,Expression.30).png에서 다시 사용할 속성을 찾습니다.

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

    속성 패널의 검색 텍스트 상자를 사용하여 속성 이름에 있는 문자를 기준으로 속성을 빠르게 찾을 수 있습니다.

    Dd185519.a1e4026a-4e48-4f0c-8898-3783121e57fa(KO-KR,Expression.30).png

    입력한 텍스트에 따라 속성 목록이 필터링됩니다.

    Dd185519.c286ad76-70a6-41f7-bed6-d6d4ad69e549(KO-KR,Expression.30).png

    속성 패널을 복원하려면 검색 텍스트 상자 옆의 지우기 Dd185519.1d1f5548-6c7a-46bd-9d93-591edc576888(KO-KR,Expression.30).png를 클릭하십시오.

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

    • 브러시를 다시 사용하려면 브러시 속성 옆의 고급 속성 옵션 Dd185519.12e06962-5d8a-480d-a837-e06b84c545bb(KO-KR,Expression.30).png(Fill 또는 Background 속성)을 클릭한 다음 새 리소스로 변환을 클릭합니다.

    • 브러시에 적용되는 색을 다시 사용하려면 단색 브러시 Dd185519.3a66ec96-47bb-47fc-8876-6b9456feec3a(KO-KR,Expression.30).png인 경우에는 브러시를, 그라데이션 브러시 Dd185519.91fb0c61-7b3b-4ae7-8a59-760e625e3bd7(KO-KR,Expression.30).png인 경우에는 다시 사용할 색의 그라데이션 중지점 Dd185519.a3c9e482-e99b-4504-8a02-9507487d1791(KO-KR,Expression.30).png을 선택합니다. 그런 다음 색을 리소스로 변환 Dd185519.6bf68607-add8-4d87-b6f4-100c8f05dd17(KO-KR,Expression.30).png을 클릭합니다.

      Dd185519.89203705-cf66-46e0-b153-52a23cd744f7(KO-KR,Expression.30).png

    • 숫자 또는 기타 값 형식을 다시 사용하려면 속성 옆의 고급 속성 옵션 단추 Dd185519.12e06962-5d8a-480d-a837-e06b84c545bb(KO-KR,Expression.30).png를 클릭한 다음 새 리소스로 변환을 클릭합니다.

      Dd185519.3f69215a-f522-4347-88fb-f6b219f5419e(KO-KR,Expression.30).png

  4. <type> 리소스 만들기 대화 상자가 나타나면 의미 있는 리소스 이름을 입력한 다음 확인을 클릭합니다.

    리소스가 만들어져 리소스 패널에 나열됩니다.

    Dd185519.97203920-a26b-4bb5-b0ed-9c71ae6973d3(KO-KR,Expression.30).png

    리소스를 만든 후 수정하는 방법에 대한 자세한 내용은 리소스 수정을 참조하십시오.

리소스를 다른 리소스에 적용

여러 가지 방식으로 리소스를 속성에 적용할 수 있습니다.

리소스 패널에서 끌어 놓아 리소스 적용

  1. 리소스 패널에 있는 리소스를 아트보드의 컨트롤에 끌어 놓습니다.

    글꼴 패밀리 리소스를 확인란(CheckBox) 컨트롤에 끌어 놓기

    Dd185519.8290ff37-d8e8-479f-89f3-a04118ab186b(KO-KR,Expression.30).png

  2. 드롭다운 메뉴가 나타나면 리소스를 적용할 컨트롤 속성을 선택합니다.

    글꼴 패밀리 리소스를 CheckBox의 FontFamily 속성에 적용

    Dd185519.2063f03b-e8ad-46cb-9f12-7898b6bc1f43(KO-KR,Expression.30).png

고급 속성 옵션 메뉴를 사용하여 리소스 적용

  1. 속성 패널의 속성 보기 Dd185519.cee1494c-ef95-4dd4-9fbc-9d02edfa78b7(KO-KR,Expression.30).png에서 리소스로 설정할 속성을 찾습니다.

  2. 고급 속성 옵션 Dd185519.12e06962-5d8a-480d-a837-e06b84c545bb(KO-KR,Expression.30).png을 클릭하고 로컬 리소스를 가리킨 다음 드롭다운 목록이 나타나면 리소스 이름을 선택합니다.

브러시 리소스 적용

  1. 속성 패널의 속성 보기 Dd185519.cee1494c-ef95-4dd4-9fbc-9d02edfa78b7(KO-KR,Expression.30).png에서 리소스로 설정할 브러시를 선택합니다.

  2. 브러시 리소스 탭 Dd185519.415db740-5a54-48d2-8678-245ccfa7ee8b(KO-KR,Expression.30).png에서 리소스 이름을 선택합니다.

    Dd185519.af28e5e4-4861-45ac-b02d-e65386520ed7(KO-KR,Expression.30).png

색 리소스 적용

  1. 속성 패널의 속성 보기 Dd185519.cee1494c-ef95-4dd4-9fbc-9d02edfa78b7(KO-KR,Expression.30).png에서 리소스로 설정할 색이 있는 브러시를 선택합니다. 그라데이션 브러시 Dd185519.91fb0c61-7b3b-4ae7-8a59-760e625e3bd7(KO-KR,Expression.30).png인 경우에는 색의 그라데이션 중지점 Dd185519.a3c9e482-e99b-4504-8a02-9507487d1791(KO-KR,Expression.30).png을 선택합니다.

  2. 색 리소스 탭에서 리소스 이름을 선택합니다.

    Dd185519.5cb88f90-c17a-4dad-be87-b6be7d74f410(KO-KR,Expression.30).png

템플릿을 동일한 형식의 다른 컨트롤에 적용

여러 가지 방식으로 템플릿을 컨트롤에 적용할 수 있습니다.

자산 패널에서 선택하고 새 컨트롤을 그려 템플릿 적용

  1. 도구 패널에서 자산Dd185519.0d8b8d29-1af9-418f-8741-be3097d76eab(KO-KR,Expression.30).png을 클릭합니다.

  2. 자산 패널의 스타일 범주에서 직접 만든 템플릿을 선택합니다.

  3. 아트보드에서 포인터를 사용하여 경계 상자를 그립니다.

    선택한 템플릿과 일치하는 컨트롤이 새로 그려지고 템플릿이 자동으로 적용됩니다.

리소스 패널에서 끌어 놓아 템플릿 적용

  1. 리소스 패널에 있는 템플릿 리소스를 아트보드의 컨트롤에 끌어 놓습니다.

  2. 드롭다운 메뉴가 나타나면 Style 속성을 선택합니다.

고급 속성 옵션 메뉴를 사용하여 템플릿 적용

  1. 템플릿을 적용할 개체를 선택합니다.

  2. 속성 패널의 속성 보기 Dd185519.cee1494c-ef95-4dd4-9fbc-9d02edfa78b7(KO-KR,Expression.30).png에서 Style 속성을 찾습니다.

  3. Style 속성 옆의 고급 속성 옵션 Dd185519.12e06962-5d8a-480d-a837-e06b84c545bb(KO-KR,Expression.30).png을 클릭하고 로컬 리소스를 가리킨 다음 드롭다운 목록이 나타나면 템플릿 이름을 선택합니다.

리소스를 App.xaml 파일로 이동

  • 리소스를 만들 때 App.xaml 파일에서 정의하지 않은 경우 리소스 패널에서 리소스를 끌어 App.xaml 파일로 이동할 수 있습니다.

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

    리소스가 표시되지 않으면 문서 노드(대개 Page.xaml) 아래의 노드를 확장해야 할 수 있습니다.

리소스를 다른 프로젝트에 복사

  1. 프로젝트 패널에서 App.xaml 파일을 두 번 클릭하여 아트보드에 엽니다.

  2. 디자인 보기에서 App.xaml 파일을 볼 수 없으므로 아트보드 오른쪽의 XAML 탭을 선택합니다.

  3. 리소스는 <Application.Resources> 태그 사이에서 정의됩니다.

    <Application.Resources>
    </Application.Resources>
    

    이러한 태그 사이에서는 속성 형식을 나타내는 태그 안에 속성 리소스가 정의됩니다. Key 특성은 리소스에 제공한 이름을 나타냅니다.

      <FontFamily x:Key="ApplicationFont">Segoe UI</FontFamily>
      <LinearGradientBrush x:Key="BorderBrush" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF000000"/>
        <GradientStop Color="#FFC64545" Offset="1"/>
      </LinearGradientBrush>
    

    템플릿은 <Style> 태그 사이에서 정의됩니다. Key 특성은 템플릿에 제공한 이름을 나타냅니다.

      <Style x:Key="ImageButton" TargetType="Button">
        <Setter Property="Background" Value="#FF1F3B53"/>
        <Setter Property="Template">
          ...
        </Setter>
      </Style>
    
  4. 다른 프로젝트로 이동할 리소스를 나타내는 XAML을 강조 표시한 다음 Ctrl+C를 눌러 복사합니다.

  5. Expression Blend에서 다른 프로젝트를 열고 아트보드에서 XAML 보기로 App.xaml 파일을 연 다음 <Application.Resources> 태그 바로 뒤에 포인터를 삽입하고 Ctrl+V를 눌러 리소스를 붙여 넣습니다.

  6. 기존 리소스에 중복된 키 이름이 없어야 합니다.

  7. 프로젝트를 빌드(Ctrl+Shift+B)하여 새 리소스가 올바르게 복사되었는지 확인합니다.

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

    또는 전체 App.xaml 파일을 새 프로젝트에 복사한 다음 x:Class 특성에 있는 이름을 새 프로젝트 이름으로 변경할 수 있습니다.

    <Application

    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"

    x:Class="ProjectName.App" ...

다음 단계

  • Expression 커뮤니티 웹 사이트에서 제공되는 "작업 방법(How Do I?)" 비디오 자습서를 통해 단추(Button)와 확인란(CheckBox)의 컨트롤 스킨을 만드는 방법을 참조할 수 있습니다.

참조

개념

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

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