SimpleTabControl 및 SimpleTabItem

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

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

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

컨트롤 템플릿 분석

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 속성에서 설정됩니다.

  개체 보기: SimpleTabControl 컨트롤(왼쪽) 및 SimpleTabItem 컨트롤(오른쪽)의 기본 구성 요소(템플릿)

  

맨 위로 이동

속성 트리거 사용

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

맨 위로 이동

브러시 사용

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

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

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

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

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

• 탭 항목에 대한 Border 요소의 BorderBrush 속성은 SolidBorderBrush를 사용하여 설정되며, IsEnabled가 False인 경우에는 DisabledBorderBrush를 사용하여 설정됩니다.

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

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

맨 위로 이동

모범 사례 및 디자인 지침

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

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

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

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

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

맨 위로 이동

참조

개념

실습 정보: 비트맵 효과를 사용하여 SimpleTabItem 사용자 지정