문서를 영문으로 보려면 영문 확인란을 선택하세요. 마우스 포인터를 텍스트 위로 이동시켜 팝업 창에서 영문 텍스트를 표시할 수도 있습니다.
번역
영문

SimpleTabControl 및 SimpleTabItem

이 페이지는 WPF 프로젝트에만 적용됨

탭 컨트롤(TabControl)은 탭에 콘텐츠를 표시하는 항목 컨트롤입니다. 일반적으로 탭 컨트롤의 자식 개체는 헤더가 있는 콘텐츠 컨트롤인 탭 항목이며, 각 항목에는 헤더 개체와 콘텐츠 개체가 있을 수 있습니다. Blend for Visual Studio에서는 개체 및 타임라인 패널에서 탭 컨트롤을 마우스 오른쪽 단추로 클릭한 다음 SimpleTabItem 추가를 클릭하여 컬렉션에 개별 항목을 추가하거나 데이터 소스에서 탭 항목 개체의 컬렉션을 생성하기 위해 데이터에 ItemsSource 바인딩을 클릭하여 탭 컨트롤에 항목을 배치할 수 있습니다.

개체 및 타임라인 패널에서 탭 항목을 마우스 오른쪽 단추로 클릭한 다음 텍스트 편집을 클릭하여 탭 항목의 텍스트를 편집하거나, 탭 항목을 두 번 클릭하여 활성화한 후 해당 항목에 컨트롤을 그릴 수 있습니다.



두 SimpleTabItem이 추가된 후 SimpleTabControl 컨트롤의 아트보드 보기

JJ169936.7b97f306-275a-43be-b7b9-60ba93b22d6b(ko-kr,VS.120).png

SimpleTabControl 컨트롤 템플릿은 다음 항목으로 구성됩니다.

  • Grid 레이아웃 패널 - 탭 컨트롤 내에 여러 자식 개체를 넣는 데 사용됩니다. 또한 Grid를 사용하면 응용 프로그램 UI(사용자 인터페이스) 디자이너가 템플릿에 더 많은 개체를 쉽게 추가할 수 있습니다. Grid 의 위쪽 행에서는 가장 큰 탭 항목의 크기에 따라 높이가 변경되는 자동 크기 조정이 사용되고, 아래쪽 행에서는 나머지 공간을 사용하여 탭 항목의 콘텐츠(PART_SelectedContentHost)를 표시하는 배율 크기 조정이 사용됩니다.

  • HeaderPanel - 명명된 TabPanel 요소 탭 항목 구성 방법을 알고 있는 사용자 지정 레이아웃 패널입니다.

  • Border 요소 - 이 템플릿이 적용되는 탭 컨트롤의 BorderThickness 속성에 템플릿 바인딩할 수 있는 BorderThickness 속성이 들어 있어서 사용됩니다.

  • PART_SelectedContentHost로 명명된 ContentPresenter 요소 - 이 템플릿이 적용되는 탭 컨트롤의 Content 속성을 표시하는 데 사용됩니다.

SimpleTabItem 컨트롤 템플릿은 다음 항목으로 구성됩니다.

  • Grid 레이아웃 패널 - 탭 컨트롤 내에 여러 자식 개체를 넣는 데 사용됩니다. 또한 Grid를 사용하면 응용 프로그램 UI 디자이너가 템플릿에 더 많은 개체를 쉽게 추가할 수 있습니다. Grid 패널에서는 크기 공유의 개념을 사용하므로 각 탭 항목의 너비를 탭 컨트롤에 있는 다른 모든 탭 항목과 일치시킬 수 있습니다.

  • Border 요소 - 이 템플릿이 적용되는 탭 컨트롤의 BorderThickness 속성에 템플릿 바인딩할 수 있는 BorderThickness 속성이 들어 있어서 사용됩니다.

  • ContentSite로 명명된 ContentPresenter 요소 - 이 템플릿이 적용되는 탭 항목의 Header 속성에 바인딩됩니다. 이 바인딩은 ContentSite 개체의 ContentSource 속성에서 설정됩니다.

컨트롤 템플릿의 속성 트리거는 컨트롤이 속성 변경에 응답하도록 하는 데 사용됩니다. 트리거 패널의 항목을 클릭하여 트리거가 활성화될 때 변경되는 속성을 확인할 수 있습니다. 예를 들어 탭 항목에 대한 템플릿에서 IsSelected에 대한 트리거로 탭 항목의 ZIndex 속성을 설정하면 맨 앞까지 적용됩니다. 따라서 탭 항목을 제대로 작동하려면 이 트리거를 유지해야 합니다. 또한 IsSelected 트리거는 더 두꺼운 BorderThickness를 설정하고 항목이 선택되었음을 나타내도록 Background 색을 변경합니다.

SimpleTabControl SimpleTabItem 템플릿에서는 SimpleStyles.xaml 리소스 사전의 다음과 같은 브러시 리소스가 사용됩니다.

  • 탭 컨트롤의 Background 속성은 트리거가 활성화되지 않은 경우 WindowBackgroundBrush를 사용하여 설정됩니다.

  • 탭 컨트롤의 BorderBrush 속성은 트리거가 활성화되지 않은 경우에는 SolidBorderBrush를, IsEnabledFalse인 경우에는 DisabledBorderBrush를 사용하여 설정됩니다.

  • 탭 컨트롤의 Foreground 속성은 IsEnabledFalse인 경우 DisabledForegroundBrush를 사용하여 설정됩니다.

  • 탭 항목에 대한 Border 개체의 Background 속성은 트리거가 활성화되지 않은 경우에는 LightBrush를, IsSelectedTrue인 경우에는 WindowBackgroundBrush를, IsEnabledFalse인 경우에는 DisabledBackgroundBrush를 사용하여 설정됩니다.

  • 탭 항목에 대한 Border 개체의 BorderBrush 속성은 SolidBorderBrush를 사용하여 설정되며 IsEnabledFalse인 경우에는 DisabledBorderBrush를 사용하여 설정됩니다.

  • 탭 항목의 Foreground 속성은 IsEnabledFalse인 경우 DisabledForegroundBrush를 사용하여 설정됩니다.

또한 템플릿에서 시스템 색에 대한 바인딩을 사용하여 컨트롤에서 시스템 기본값을 사용하도록 할 수 있습니다. 대부분의 경우 이렇게 브러시를 변경하여 고유한 디자인을 만들 수 있습니다. 시스템 색을 설정하는 트리거를 편집하여 이 작업을 수행할 수 있습니다.

  • 일반적으로 디자이너가 컨트롤에 시각적 요소를 더 추가할 수 있도록 하려면 템플릿의 루트로 Grid 제어를 사용합니다. Blend은 Grid 컨트롤과 같은 레이아웃 패널을 찾거나 아트 보드에 추가 되는 새 개체가 해당 레이아웃 패널의 자식 개체로 끝날 수 있도록 기본적으로 활성화 합니다.

  • 템플릿에서 HeaderPanel라는 TabPanel 개체는 TabControl에 사용되는 특정 레이아웃 패널입니다. TabPanel 에서는 여러 행에 있는 탭 항목의 레이아웃을 지정하고 탭 항목을 선택할 때 레이어를 설정할 수 있습니다. HeaderPanel 에 다른 레이아웃 컨테이너를 사용할 수 있지만 IsItemsHost 속성을 True로 설정해야 합니다.

  • SimpleTabItem 템플릿을 편집하려면 리소스 패널에서 SimpleTabItem 스타일 옆에 있는 리소스 편집 단추를 클릭합니다. 그런 다음 스타일 편집 모드에서 개체 및 타임라인 패널의 Style을 마우스 오른쪽 단추로 클릭하고 템플릿 편집을 가리킨 다음 현재 템플릿 편집이나 복사본 편집을 클릭합니다.

  • 시스템 TabControl의 컨트롤 템플릿은 SimpleTabControl보다 훨씬 더 복잡합니다. 이 템플릿에서는 TabControlOrientation 속성에 따라 다양한 방향으로 TabPanel을 고정할 수 있습니다. SimpleTabControl 에서는 편의상 Orientation 속성을 무시하지만 다른 위치에 TabPanel을 배치하려는 경우에는 모눈 행과 열을 편집할 수 있습니다.

  • 컨트롤의 클래스에서는 탭 항목을 표시할 위치로 PART_SelectedContentHost라는 ContentPresenter 개체의 이름을 검색하므로 이 이름을 변경해서는 안 됩니다.

표시: