헤더가 있는 컨트롤 그리기

  • 아티클

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

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

헤더가 있는 콘텐츠 컨트롤을 만들려면

  1. Microsoft Expression Blend 응용 프로그램 창의 왼쪽에 있는 도구 패널에서 자산 Cc295310.0d8b8d29-1af9-418f-8741-be3097d76eab(KO-KR,Expression.30).png을 클릭합니다. 컨트롤 범주의 목록에서 TabControl Cc295310.f13847cd-7fdf-4757-a648-d5ece98fcaea(KO-KR,Expression.30).png을 선택합니다.

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

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

    단추 컨트롤처럼 가장 일반적인 UI(사용자 인터페이스) 요소는 자산 단추 아래에 드롭다운 목록으로 표시되기 때문에 요소를 빠르게 추가할 수 있습니다.

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

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

    Cc295310.b5763b4e-3032-468e-bbdf-42057fd0cb08(KO-KR,Expression.30).png

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

    원하는 경우 TabControl 개체에 다른 TabItem 개체를 추가할 수 있습니다. 개체 및 타임라인 패널에서 TabControl 개체를 마우스 오른쪽 단추로 클릭한 후 TabItem 추가를 클릭합니다.

  3. 아트보드에서 Ctrl 키를 누른 상태에서 오른쪽 아래 모퉁이에 있는 크기 조정 핸들을 끌어 탭 컨트롤을 더 크게 만듭니다. 위쪽에 탭 세 개가 표시될 수 있도록 TabControl 개체의 크기를 조정합니다.

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

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

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

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

    Image 컨트롤과 같은 다른 컨트롤을 TabItem의 헤더로 사용할 수도 있습니다. 개체 및 타임라인 패널에서 TabItem 개체를 확장하고 Header 개체를 클릭하여 활성화된 요소로 만듭니다. 도구 패널이나 프로젝트 패널에서 이미지 컨트롤을 추가할 수 있습니다.

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

  6. 도구 패널에서 StackPanel Cc295310.ec58af86-cc2a-4e1f-91c0-883c5406fdfb(KO-KR,Expression.30).png을 두 번 클릭하여 StackPanel 개체를 TabItem 개체에 추가합니다.

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

    TabControl 개체에 추가된 자식 개체

    Cc295310.f20233a8-3a71-46a5-863b-57a0f5b54f0b(KO-KR,Expression.30).png

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

  9. TabControl 개체를 GroupBox 개체의 자식 개체로 만들려면 개체 및 타임라인 패널에서 TabControl 개체를 GroupBox 개체로 끕니다.

    GroupBox 개체로 TabControl 개체 끌기

    Cc295310.bbfefd21-01bb-4725-bfb0-30e55de6c4df(KO-KR,Expression.30).png

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

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

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