기존 개체에서 컨트롤 만들기

아티클
10/11/2017

컨트롤로 만들기 기능을 Microsoft Expression Blend에서 사용하여 아트보드의 개체로부터 컨트롤 템플릿을 만들 수 있습니다. 컨트롤로 만들기 도구는 개체를 다시 사용할 수 있는 스타일 리소스로 배치합니다.

팁:
Expression Blend에서 개체는 레이아웃 패널, 도형, 텍스트 컨트롤, 이미지, 단추, 컨트롤 템플릿, 기타 UI(사용자 인터페이스) 디자인 요소 등 아트보드에 배치할 수 있는 모든 항목을 나타냅니다. 아트보드에 UI 요소를 배치하면 응용 프로그램의 요소에 대한 개체 인스턴스가 만들어집니다.

타원에서 단추 만들기

새 프로젝트를 열거나 만듭니다(아직 열지 않았거나 만들지 않은 경우).

자세한 내용은 새 프로젝트 만들기를 참조하십시오.
아트보드에서 도구 패널의 타원을 사용하여 원을 그립니다. 타원이 더 잘 보이도록 하려면 속성 패널의 브러시에서 해당 속성을 변경하여 모양을 변경할 수 있습니다.

자세한 내용은 개체의 채우기 또는 스트로크에 브러시 적용을 참조하십시오.
타원을 마우스 오른쪽 단추로 클릭하고 그룹으로 묶기를 가리킨 다음 Grid와 같은 레이아웃 컨테이너의 이름을 클릭합니다.
개체 및 타임라인 패널에서 모눈을 선택한 상태에서 도구 메뉴의 컨트롤로 만들기를 클릭하여 모눈을 단추로 변환합니다.

컨트롤로 만들기 대화 상자가 열립니다.
컨트롤 형식에서 Button 컨트롤과 같이 만들 컨트롤 형식을 클릭합니다.
**이름(키)**에서 첫 번째 라디오 단추(기본값)를 선택한 다음 단추 스타일을 식별하는 데 사용할 이름을 입력합니다. 모든 항목에 적용 옵션을 선택하여 이름으로 스타일을 참조하지 않는 아트보드의 모든 단추에 스타일을 적용할 수도 있습니다.
정의 위치에서 단추 스타일을 정의할 위치를 반영하는 옵션을 클릭합니다. 응용 프로그램의 모든 문서에서 단추 스타일을 사용할 수 있도록 하려면 응용 프로그램을 클릭합니다. 현재 문서에서만 단추 스타일을 사용할 수 있도록 하려면 **이 문서 (Window: Window)**를 클릭합니다. 응용 프로그램의 리소스 사전에 단추 스타일을 정의하려면 리소스 사전을 클릭합니다.
확인을 클릭하여 스타일 리소스 만들기 대화 상자를 종료하고 단추 스타일을 만듭니다.

개체 및 타임라인 패널의 타원 개체는 스타일이 새로운 단추 스타일로 설정되는 단추 개체로 변환됩니다.

또한 단추 스타일은 리소스 탭에서 해당 스타일이 정의된 노드(예: Window 노드)에 나열됩니다.

Expression Blend의 리소스 탭에 나타나는 새 단추(Button) 스타일

단추의 스타일 수정

방금 만든 단추 스타일을 수정하려면 개체 및 타임라인 패널에서 새 단추 개체를 마우스 오른쪽 단추로 클릭하고 템플릿 편집을 가리킨 다음 현재 템플릿 편집을 클릭합니다.

아트보드가 컨트롤 템플릿의 편집 범위로 전환됩니다.

팁:
컨트롤 템플릿의 편집 범위는 다음과 같은 여러 가지 방법으로 시작할 수 있습니다. 예를 들어 리소스 탭에서 단추 스타일을 확인한 다음 리소스 이름 옆에 있는 리소스 편집 단추를 클릭하면 스타일의 편집 범위로 들어갑니다. 개체 및 타임라인 패널에서 스타일 개체를 마우스 오른쪽 단추로 클릭하고 템플릿 편집을 가리킨 다음 현재 템플릿 편집을 클릭하여 컨트롤 템플릿의 편집 범위로 이동할 수 있습니다. 컨트롤 템플릿의 편집 범위를 종료하려면 개체 및 타임라인 패널에서 상위 범위로 이동을 클릭합니다. 스타일의 편집 범위에서 컨트롤의 편집 범위를 시작한 경우에는 스타일로 돌아갑니다. 상위 범위로 이동 단추를 다시 클릭하여 문서의 편집 모드로 돌아갑니다.

컨트롤 템플릿의 편집 범위는 다음과 같은 여러 가지 방법으로 시작할 수 있습니다. 예를 들어 리소스 탭에서 단추 스타일을 확인한 다음 리소스 이름 옆에 있는 리소스 편집 단추를 클릭하면 스타일의 편집 범위로 들어갑니다. 개체 및 타임라인 패널에서 스타일 개체를 마우스 오른쪽 단추로 클릭하고 템플릿 편집을 가리킨 다음 현재 템플릿 편집을 클릭하여 컨트롤 템플릿의 편집 범위로 이동할 수 있습니다.

컨트롤 템플릿의 편집 범위를 종료하려면 개체 및 타임라인 패널에서 상위 범위로 이동 Cc295271.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(KO-KR,Expression.30).png 을 클릭합니다. 스타일의 편집 범위에서 컨트롤의 편집 범위를 시작한 경우에는 스타일로 돌아갑니다. 상위 범위로 이동 단추를 다시 클릭하여 문서의 편집 모드로 돌아갑니다.

팁:
컨트롤로 만들기 도구는 컨트롤 템플릿이 들어 있는 스타일 리소스로 원본 개체(타원)를 배치합니다. 스타일은 스타일이 적용되는 개체(이 경우 단추 개체)에 설정되는 속성을 정의합니다. 컨트롤 템플릿은 개체의 상태, 구조 및 모양을 정의합니다.

컨트롤 템플릿 내에는 원본 개체(타원)가 들어 있는 Grid 패널과 단추 개체의 콘텐츠를 표시하는 ContentPresenter 요소가 있습니다. 개체를 Grid 패널에 배치하면 다른 요소를 간편하게 추가하고 정렬할 수 있습니다.

새 단추(Button) 스타일에 대한 컨트롤 템플릿의 구조

리소스에 대한 XAML(Extensible Application Markup Language)을 검토하여 스타일과 컨트롤 템플릿이 어떻게 연결되는지 확인할 수 있습니다. 예를 들어 단추 스타일(Button Style)의 구조는 다음과 같을 수 있습니다.
```
  <Window.Resources>
    <Style x:Key="ButtonStyle1" ...>  
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type Button}">  
            <Grid>
              <Ellipse>
                ...
              </Ellipse>
              <ContentPresenter .../>
            </Grid>
            <ControlTemplate.Triggers>
              ...
            </ControlTemplate.Triggers>
          </ControlTemplate>  
        </Setter.Value>
      </Setter>
    </Style>  
  </Window.Resources>
```
트리거 패널에서 원하는 대로 단추의 상태를 정의합니다. 예를 들어 IsMouseOver = True를 클릭하여 사용자가 단추 위로 마우스를 이동할 때의 상태에 대한 트리거 기록을 활성화합니다. 개체 및 타임라인 패널에서 타원을 선택한 다음 속성 패널의 모양에서 타원의 Fill 속성을 다른 색으로 변경합니다. 다음 그림과 같이 ellipse.Fill의 새로운 속성 변경이 트리거 패널의 활성 상태인 경우 속성 아래에 추가됩니다.

[!참고]

활성 상태인 경우 속성 섹션을 표시하려면 트리거 패널의 크기를 조정해야 할 수 있습니다. 크기를 조정하려면 패널의 테두리 및 패널 안쪽 테두리를 클릭하여 끕니다.

마우스를 단추 위로 이동하여 타원의 채우기(Fill)가 변경된 후의 트리거 패널
단추에 애니메이션을 추가할 수도 있습니다. 예를 들어 트리거 패널에서 IsPressed = True를 클릭하여 사용자가 단추를 클릭할 때의 상태에 대한 트리거 기록을 활성화합니다. 개체 및 타임라인 패널에서 타원을 계속 선택하고 Shift 및 Alt 키를 누른 상태에서 타원의 한쪽 모퉁이를 끕니다. Shift+Alt 키 바로 가기 키를 사용하면 개체의 중심점이 유지됩니다.

새 스토리보드를 만들고 IsPressed 이벤트에 대한 이벤트 트리거에서 해당 스토리보드를 트리거하여 보다 복잡한 애니메이션을 추가할 수도 있습니다.

자세한 내용은 이벤트에 응답하는 코드 작성을 참조하십시오.
원하는 대로 단추의 상태를 정의한 후 개체 및 타임라인 패널에서 상위 범위로 이동을 클릭하여 문서의 편집 범위로 돌아갑니다.
상태를 테스트하려면 프로젝트 메뉴에서 프로젝트 실행을 클릭하거나 F5 키를 누른 다음 단추 상태가 제대로 작동하는지 확인합니다. 예를 들어 단추 위로 포인터를 이동하면 채우기 색이 변경되어야 합니다.

단추에 단추 스타일 적용

원하는 편집 범위로 전환합니다. 컨트롤 템플릿의 범위를 비롯한 모든 범위에서 단추에 스타일을 적용할 수 있습니다.
아트보드에서 도구 패널의 단추를 사용하여 단추를 그립니다.
개체 및 타임라인 패널에서 새 단추 개체를 마우스 오른쪽 단추로 클릭하고 템플릿 편집과 리소스 적용을 차례로 가리킨 다음 목록에서 단추 스타일을 선택합니다.

개체 메뉴에서 스타일 편집 및 템플릿 편집 명령을 사용하여 스타일 리소스를 적용할 수도 있습니다.

오른쪽 마우스 클릭 방법을 사용하여 단추(Button) 개체에 단추 스타일 적용