빈 사용자 컨트롤 만들기

시스템 컨트롤과 마찬가지로 아트보드에 추가할 수 있는 재사용 가능한 구성 요소를 디자인하려는 경우 Microsoft Expression Blend에서 사용자 정의 컨트롤을 만들 수 있습니다. 사용자 정의 컨트롤에는 응용 프로그램과 마찬가지로 기타 컨트롤, 리소스 및 애니메이션 타임라인이 포함될 수 있습니다. 유일한 차이점은 루트 개체가 Window나 Page가 아닌 UserControl 이라는 것입니다.

다음 절차에서는 몇 가지 애니메이션이 들어 있는 사용자 정의 컨트롤을 만들고 다른 문서에서 인스턴스화하는 방법을 설명합니다.

코드를 사용하여, 기존 시스템 컨트롤을 기반으로 하는 사용자 지정 컨트롤을 만드는 예는 실습 정보: 사용자 지정 속성으로 사용자 지정 컨트롤 만들기를 참조하십시오.

Expression Blend와 함께 제공되는 예제에서 더 많은 사용자 정의 컨트롤 예를 확인할 수 있습니다. 도움말 메뉴에서 시작 화면을 클릭하고 예제 탭을 선택한 다음 예제 이름을 클릭합니다.

XAML 및 코드 예제를 비롯하여 사용자 정의 컨트롤에 대한 자세한 내용은 MSDN의 Windows Presentation Foundation  섹션에서 컨트롤 제작 개요 를 참조하십시오.

사용자 정의 컨트롤 정의

1. Expression Blend에서 다음 작업 중 하나를 수행합니다.

   • .dll 파일로 사용자 정의 컨트롤을 만들려면 파일 메뉴에서 새 프로젝트를 클릭하고 WPF 컨트롤 라이브러리 또는 Silverlight 컨트롤 라이브러리 프로젝트 형식을 선택한 다음 프로젝트 이름을 지정하고 주 문서의 코드 숨김 파일에 사용할 언어를 선택한 후 확인을 클릭합니다. 다른 사람에게 제공할 때 사용자 정의 컨트롤의 구현을 숨기려는 경우 또는 다른 응용 프로그램에서 사용자 정의 컨트롤을 그릴 때 템플릿을 만들어 사용자 정의 컨트롤의 모양을 변경할 수 있도록 하려는 경우 이 옵션을 사용하십시오.

   • 기존 프로젝트의 .xaml 파일로 사용자 정의 컨트롤을 만들려면 파일 메뉴에서 새 항목(Ctrl+N)을 클릭하고 UserControl 템플릿을 선택한 다음 파일 이름을 지정하고 확인을 클릭합니다. 이 옵션을 사용하면 선택한 사용자 정의 컨트롤이 현재 사용자 정의 컨트롤이 사용되는 것과 같은 프로젝트에 있게 되어 변경하기가 더 쉽습니다. 따라서 .dll에 대한 참조를 업데이트하는 단계는 건너뛸 수 있습니다.

   Expression Blend에서 사용자 정의 컨트롤을 열어 편집합니다.

2. 루트 개체의 원하는 패널 형식을 결정합니다. 기본적으로 LayoutRoot 라는 Grid 가 사용되며, 이 형식을 사용하면 다른 문서에 사용자 정의 컨트롤을 그릴 때 애니메이션에서 크기를 조정할 수 있습니다. 개체 및 타임라인 패널에서 LayoutRoot 개체를 마우스 오른쪽 단추로 클릭하고 레이아웃 형식 변경을 가리킨 다음 패널의 이름을 클릭하여 Canvas 나 다른 패널 컨트롤로 이 형식을 변경할 수 있습니다.

3. 도구 패널에서 사용자 정의 컨트롤에 포함할 컨트롤 및 그리기 도구를 선택하고 아트보드에 그립니다. 이러한 컨트롤 및 도구는 속성 패널의 속성을 사용하여 수정합니다. 사용자 정의 컨트롤에는 WPF 응용 프로그램에 포함될 수 있는 모든 항목이 포함될 수 있습니다.

4. 개체 및 타임라인 패널에서 원하는 애니메이션 타임라인을 만듭니다.

   간단한 애니메이션 만들기에서 예를 참조하십시오.

   [!참고]

   키 프레임을 설정할 때는 응용 프로그램에 있는 모든 애니메이션의 타이밍과 사용자 정의 컨트롤의 애니메이션이 실행될 시간을 고려하십시오. 예를 들어 시작 화면에 먼저 애니메이션 효과를 적용한 다음 사용자 인터페이스에 점점 밝아지는 애니메이션 효과를 적용하는 응용 프로그램을 가정해 보겠습니다. 각 애니메이션을 고유한 사용자 정의 컨트롤에 넣을 수 있지만 두 번째 애니메이션이 시작될 때 시작 화면 애니메이션이 완료될 때까지 걸리는 시간만큼 충분한 시간을 남겨 놓을 수 있습니다.

   팁:
   애니메이션이 여러 번 반복해서 시작되도록 하려면 0초 표시에서 키 프레임을 설정하십시오. 예를 들어 왼쪽에서 오른쪽으로 개체를 이동하고 마우스 두 번 클릭으로 트리거되는 애니메이션 타임라인을 만들었지만 0초 표시에서 키 프레임을 설정하지 않으면 다음에 마우스를 두 번 클릭할 때 애니메이션이 두 번 이상 실행되지 않습니다. 핸드오프 애니메이션이기 때문입니다. 핸드오프 애니메이션에 대한 자세한 내용은 개체에 애니메이션 적용에서 "다중 및 오버랩 애니메이션 타임라인 사용"을 참조하십시오.

5. 트리거 패널에서 응용 프로그램이 사용자 상호 작용에 응답하도록 할 속성이나 이벤트 트리거를 구성합니다.

   WPF 컨트롤에서 트리거 추가 또는 제거에서 예를 참조하십시오.

   [!참고]

   사용자 정의 컨트롤에 설정할 트리거를 결정할 때는 사용자 정의 컨트롤에서 사용할 수 있도록 설정할 모든 속성 및 트리거를 고려하십시오. 예를 들어 단추가 포함된 응용 프로그램과 사용자 정의 컨트롤에 포함된 애니메이션을 가정해 보겠습니다. Expression Blend에서 단추를 클릭할 때 애니메이션 타임라인을 시작할 트리거를 사용자 정의 컨트롤에 추가하려면 단추가 사용자 정의 컨트롤의 구성 요소가 되어야 합니다. 또한 두 속성이 같은 사용자 정의 컨트롤에 있으면 속성 값 간에 데이터 바인딩만 할 수 있습니다. 이러한 문제는 코드 숨김 파일에서 프로그래밍 방식으로 해결하거나, 문서에 추가된 사용자 정의 컨트롤에 대해 트리거 및 애니메이션 타임라인이 있는 템플릿을 만들어 해결할 수 있습니다. 코드 숨김 파일을 사용하는 사용자 정의 컨트롤의 예를 보려면 MSDN의 Windows Presentation Foundation  섹션에서 컨트롤 제작 개요 를 참조하십시오. Expression Blend에서 코드 숨김 파일을 수정하는 방법에 대한 자세한 내용은 코드 숨김 파일 수정을 참조하십시오.

6. 사용자 정의 컨트롤을 만든 다음에는 문서의 루트 개체 크기를 변경하여 적절한 크기가 되도록 해야 합니다. 개체 및 타임라인 패널에서 문서 루트를 선택한 다음 선택 도구 를 클릭하고 아트보드에 있는 파란색 표시기를 사용하여 문서 창의 크기를 조정합니다.

7. 사용자 정의 컨트롤이 사용자 정의 컨트롤의 빈 영역에서 수행되는 마우스 클릭 액션이나 상호 작용에 따라 달라지는 경우에는 루트 개체의 배경을 단색 브러시로 설정하여 사용자 정의 컨트롤이 다른 문서에 추가될 때 전체 아트보드 영역을 사용하도록 해야 합니다. 속성 패널의 브러시 범주에서 루트 개체의 Background 속성을 단색 브러시 로 변경합니다. 배경이 표시되지 않도록 하려면 Alpha 하위 속성을 0으로 변경합니다.

8. 사용자 정의 컨트롤이 특정 높이나 너비에 따라 달라지는 경우에는 속성 패널에 있는 레이아웃 범주의 고급 섹션 에서 MinHeight 및 MinWidth 속성을 설정합니다.

9. 문서에 사용자 정의 컨트롤을 그릴 때 크기를 조정할 수 있도록 하려면 사용자 정의 컨트롤에 있는 모든 개체의 Width 및 Height 속성을 Auto로 다시 설정해야 합니다.

10. 파일 메뉴에서 모두 저장을 클릭하여 파일 및 프로젝트를 저장합니다.

11. 프로젝트가 컨트롤 라이브러리인 경우 프로젝트 메뉴에서 프로젝트 빌드(Ctrl+Shift+B)를 클릭하여 프로젝트를 빌드하고 .dll 파일을 만듭니다. .dll 파일이 빌드되고 프로젝트와 같은 위치의 \bin\Debug 폴더에 저장됩니다.

참조 항목

작업

기존 개체에서 사용자 정의 컨트롤 만들기
다른 문서에서 사용자 컨트롤 그리기

Copyright ⓒ 2011 by Microsoft Corporation. All rights reserved.