헤더가 있는 컨트롤 만들기

헤더가 있는 컨트롤에는 컨트롤의 레이블을 지정하는 데 사용되는 헤더(Header) 속성이 있습니다. 헤더(Header) 속성은 텍스트 문자열처럼 간단하거나 Microsoft .NET Framework 개체처럼 복잡할 수 있습니다. 헤더가 있는 컨트롤에는 현재 사용하고 있는 헤더가 있는 컨트롤의 형식에 따라 콘텐츠나 항목 컬렉션이 표시될 수도 있습니다. 예를 들어 TabControl 내의 TabItem은 헤더가 있는 콘텐츠 컨트롤이고 ToolBar 및 MenuItem은 둘 다 헤더가 있는 항목 컨트롤입니다.

다음 절차에서는 항목 컨트롤(TabControl)의 내부에 헤더가 있는 콘텐츠 컨트롤(TabItem 컨트롤)을 만드는 방법을 설명합니다. 이 절차는 MSDN의 HeaderedContentControl 형식 항목에서 "형식" 아래 나와 있는 기타 헤더가 있는 콘텐츠 컨트롤에도 사용할 수 있습니다. 헤더가 있는 항목 컨트롤 목록은 MSDN의 HeaderedItemsControl 형식을 참조하십시오.

[!참고]

Microsoft Silverlight 1.0 프로젝트에서는 헤더가 있는 컨트롤을 사용할 수 없습니다. 그러나 TextBlock 개체가 들어 있는 Canvas 레이아웃 패널을 배치한 다음 JavaScript 이벤트 처리기를 연결하여 사용자가 클릭하는 탭에 따라 항목을 표시하거나 표시하지 않을 수 있습니다. JavaScript에 대한 자세한 내용은 Silverlight 스크립팅 및 마우스 이벤트를 참조하십시오.

[!참고]

Microsoft Expression Blend 2 서비스 팩 1은 헤더가 있는 컨트롤의 Silverlight 2 버전과 함께 제공되지 않습니다. 그러나 Visual Studio용 Microsoft Silverlight Tools에 포함된 Silverlight 2 SDK는 TabControl 같은 헤더가 있는 컨트롤을 포함하는 어셈블리와 함께 제공됩니다. 프로젝트에 어셈블리를 포함하는 방법에 대한 자세한 내용은 참조를 추가하여 사용자 지정 컨트롤 가져오기를 참조하십시오.

헤더가 있는 콘텐츠 컨트롤 만들기

1. Microsoft Expression Blend의 왼쪽에 있는 도구 상자에서 자산 라이브러리  단추를 클릭합니다. 컨트롤 탭에서 시스템 컨트롤을 클릭하고(아직 선택하지 않은 경우) 목록에서 TabControl  컨트롤을 선택합니다.

   TabControl 컨트롤 아이콘이 자산 라이브러리 단추 위에 나타납니다. 이제 이 아이콘을 선택하여 아트보드에 TabControl을 추가할 수 있습니다.

   팁:
   Button 컨트롤처럼 매우 일반적인 UI(사용자 인터페이스) 요소는 드롭다운 목록으로 자산 라이브러리 단추 위에 이미 표시되어 있으므로 빠르게 추가할 수 있습니다.

2. 아트보드에 단추를 추가하려면 도구 상자에서 TabControl 컨트롤 아이콘을 두 번 클릭합니다. 기본적으로 TabControl에는 TabItem 개체가 두 개 있습니다.

   아트보드의 기본 위치(왼쪽 위)에 기본 크기로 추가된 TabControl 개체

   

   팁:
   원하는 경우 TabControl에 다른 TabItem 개체를 추가할 수 있습니다. 개체 및 타임라인에서 TabControl 개체를 두 번 클릭하여 요소를 활성화합니다. 도구 상자의 자산 라이브러리에서 TabItem 컨트롤을 선택하고 모두 표시 확인란을 선택합니다. TabItem 컨트롤 아이콘을 두 번 클릭하여 자식 요소로 TabControl 내에 추가합니다.

3. 아트보드에서 오른쪽 아래에 있는 크기 조정 핸들을 끌어 탭 컨트롤을 더 크게 만듭니다. 포인터가 양방향 화살표 로 바뀌어 크기 조정이 가능함을 나타냅니다. 위쪽에 탭 세 개를 표시할 수 있을 만큼 TabControl의 크기를 조정합니다.

   팁:
   속성 패널의 레이아웃 범주에서 Height 및 Width 속성을 설정하여 TabControl의 크기를 조정할 수도 있습니다.

4. TabItem 개체 중 하나의 이름을 지정하려면 개체 및 타임라인에서 개체를 선택하고 속성 패널의 공용 속성 범주에서 Header 속성에 이름을 입력합니다. 예를 들어 첫 번째 TabItem 개체의 이름을 Personal Info로 지정합니다.

   팁:
   Image 컨트롤과 같은 다른 컨트롤을 TabItem의 헤더로 사용할 수도 있습니다. 개체 및 타임라인에서 TabItem 개체를 확장하고 Header 개체를 두 번 클릭하여 요소를 활성화합니다. Image 컨트롤은 도구 상자나 파일 패널에서 추가할 수 있습니다.

5. TabItem 개체 중 하나에 콘텐츠를 추가하려면 개체 및 타임라인에서 개체를 두 번 클릭하여 활성화합니다.

6. 도구 상자에서 StackPanel 을 두 번 클릭하여 TabItem에 StackPanel을 추가합니다. TabItem의 콘텐츠(Content) 속성이 기본 Grid 개체에서 StackPanel 개체로 변경됩니다.

   팁:
   콘텐츠(Content) 속성에는 항목을 하나만 넣을 수 있습니다. 따라서 StackPanel이나 Grid 같은 패널 컨트롤을 하나의 항목으로 사용한 다음 해당 패널 컨트롤에 여러 항목을 추가하면 편리합니다.

7. 개체 및 타임라인에서 StackPanel 개체를 두 번 클릭하여 요소를 활성화합니다. 이제 TabItem에 원하는 만큼 요소를 추가할 수 있습니다. 예를 들어 도구 상자에서 TextBlock이나 ListBox 컨트롤을 추가할 수 있습니다.

   TabControl 개체에 추가된 자식 개체

   

8. 전체 TabControl에 대해 테두리 및 헤더를 추가하려면 다른 헤더가 있는 콘텐츠 컨트롤인 GroupBox 컨트롤을 사용할 수 있습니다. 개체 및 타임라인에서 LayoutRoot 개체를 활성화하고 자산 라이브러리에서 GroupBox 컨트롤을 선택한 다음 아트보드에서 마우스를 사용하여 TabControl보다 약간 더 크게 컨트롤을 그립니다.

9. TabControl을 GroupBox의 자식 요소로 만들려면 개체 및 타임라인에서 TabControl을 클릭하여 GroupBox로 끕니다.

   GroupBox로 TabControl 끌기

   

10. 개체 및 타임라인에서 GroupBox를 선택한 다음 속성 패널의 공용 속성 범주에서 Header 속성을 변경하여 제목을 변경합니다.

11. 프로젝트를 빌드(F5 키)하여 결과 응용 프로그램을 확인합니다.

    [!참고]

    ListBox에서 선택한 항목에 응답하는 코드를 포함하는 전체 예제는 MSDN의 GroupBox 샘플을 참조하십시오. 예제 코드는 Windows SDK .NET Framework 3.0 예제 페이지에서 다운로드할 수 있는 "WPFSamples.exe" 패키지에 포함되어 있습니다.