SimpleTabControl 及 SimpleTabItem

本頁僅適用 WPF 專案

索引標籤控制項就是會顯示索引標籤內容的項目控制項。一般來說,索引標籤控制項的子元素是索引標籤項目 (也就是標題內容控制項),每個項目都會有標題元素以及內容元素。在 Microsoft Expression Blend 中,若要將項目放入索引標籤控制項中,您可以用滑鼠右鍵按一下 [物件與時間軸] 下的索引標籤控制項,然後按一下 [新增 SimpleTabItem],將個別的項目新增至集合,或按一下 [將 ItemSource 繫結至資料],從資料來源產生索引標籤項目元素的集合。 .

您可以編輯索引標籤項目的文字,方法是在 [物件與時間軸] 下以滑鼠右鍵按一下該項目,然後按一下 [編輯文字],也可以使索引標籤項目成為使用中狀態,方法是按兩下該項目,然後在其中繪製控制項。

新增兩個 SimpleTabItem 之後的 SimpleTabControl 控制項畫板檢視

Cc295163.7b97f306-275a-43be-b7b9-60ba93b22d6b(zh-tw,Expression.10).png

深入控制項範本

SimpleTabControl 控制項範本由下列項目所組成:

  • [格線] 版面配置面板:在索引標籤控制項中用以保留多個子元素。Grid 可讓應用程式使用者介面 (UI) 設計師輕鬆地將更多元素新增至範本。Grid 的最上列會使用自動調整大小,因此可使用最大的索引標籤項目大小來變更高度。最下列則會使用星形 (*) 大小,因此可使用其餘空間來顯示索引標籤項目的內容 (PART_SelectedContentHost)。

  • 名稱為 [HeaderPanel] 的 TabPanel 元素:其為自訂版面配置面板,您可用以組織索引標籤項目。

  • [框線] 元素:此元素有 BorderThickness 屬性,可以透過範本繫結至套用此範本之索引標籤控制項的 BorderThickness 屬性。

  • 名稱為 PART_SelectedContentHost 的 ContentPresenter 元素:用以顯示套用此範本之索引標籤控制項的 Content 屬性。

SimpleTabItem 控制項範本由下列項目組成:

  • [格線] 版面配置面板:在索引標籤控制項中用以保留多個子元素。Grid 可讓應用程式 UI 設計師更輕鬆地將更多元素新增至範本。此 [格線] 面板使用大小共用的概念,可讓索引標籤控制項中所有的索引標籤項目寬度都相同。

  • [框線] 元素:此元素有 BorderThickness 屬性,可以透過範本繫結至套用此範本之索引標籤控制項的 BorderThickness 屬性。

  • [名稱為 ContentSite 的 ContentPresenter 元素]:繫結至套用此範本之索引標籤項目的 Header 屬性。此繫結是在 ContentSite 元素的 ContentSource 屬性中設定。

    物件檢視:SimpleTabControl 控制項 (左) 及 SimpleTabItem 控制項 (右) 的基本部分 (範本)

    Cc295163.d9257bdb-660a-48b9-b412-abb89e35423a(zh-tw,Expression.10).pngCc295163.5d7f32c0-e1da-43b7-8a92-2a29b48bd701(zh-tw,Expression.10).png

Cc295163.7e183f1f-37d8-4dcb-980c-19a5d61ca087(zh-tw,Expression.10).gif回到頁首

使用屬性觸發程序

控制項範本中的屬性觸發程序,可讓控制項回應屬性變更。您可以在 [互動] 面板中,按一下 [觸發程序] 底下的項目,檢視觸發程序啟動時變更的屬性。例如,在索引標籤項目的範本中,IsSelected 的觸發程序會設定索引標籤項目上的 ZIndex 屬性,使其強制出現在前面。因此,如果索引標籤項目正常運作,則必須保留這個觸發程序。IsSelected 觸發程序也會設定較粗的 BorderThickness 並變更背景色彩,以顯示已選取該項目。

Cc295163.7e183f1f-37d8-4dcb-980c-19a5d61ca087(zh-tw,Expression.10).gif回到頁首

使用筆刷

SimpleTabControl 及 SimpleTabItem 範本會使用 SimpleStyles.xaml 資源字典中的下列筆刷資源:

  • 當沒有任何作用中的觸發程序時,索引標籤控制項的 Background 屬性是使用 WindowBackgroundBrush 來設定。

  • 當沒有任何作用中的觸發程序時,索引標籤控制項的 BorderBrush 屬性是使用 SolidBorderBrush 來設定,當 IsEnabled 為 False 時,則使用 DisabledBorderBrush 來設定。

  • 當 IsEnabled 為 False 時,索引標籤控制項的 Foreground 屬性是使用 DisabledForegroundBrush 來設定。

  • 當沒有任何作用中的觸發程序時,索引標籤項目之 Border 元素的 Background 屬性是使用 LightBrush 來設定,當 IsSelected 為 True 時,則使用 WindowBackgroundBrush 來設定,而當 IsEnabled 為 False 時,則使用 DisabledBackgroundBrush 來設定。

  • 索引標籤項目之 Border 元素的 BorderBrush 屬性是使用 SolidBorderBrush 來設定,當 IsEnabled 為 False 時,則使用 DisabledBorderBrush 來設定。

  • 當 IsEnabled 為 False 時,索引標籤項目的 Foreground 屬性是使用 DisabledForegroundBrush 來設定。

此外,範本會使用系統色彩繫結,讓控制項能夠使用系統預設值。在許多情況中,您可能會想要變更這些筆刷,以便建立獨特的設計。您可以編輯控制系統色彩的觸發程序,以達到此目的。

Cc295163.7e183f1f-37d8-4dcb-980c-19a5d61ca087(zh-tw,Expression.10).gif回到頁首

最佳作法與設計方針

  • 一般而言,如果您希望設計師在控制項上新增更多視覺元素,請使用 Grid 控制項作為範本的根。Expression Blend 會搜尋類似 Grid 控制項的版面配置面板,並且將它設為預設啟用,讓新增至畫板的新元素成為版面配置面板的子元素。

  • 範本中名為 HeaderPanel 的 TabPanel 元素,是用於 TabControl 的特定版面配置面板。TabPanel 會知道如何在多列中設定索引標籤項目的版面配置,以及在選取索引標籤項目時如何設定這些列的版面配置。您可以對 HeaderPanel 使用不同的版面配置容器,但是必須將 IsItemsHost 屬性設為 True。

  • 若要編輯 SimpleTabItem 範本,請按一下 [資源] 面板中 [SimpleTabItem] 樣式旁的 [編輯資源] 按鈕。然後,在樣式的編輯模式下,以滑鼠右鍵按一下 [物件與時間軸] 下的 [樣式],指向 [編輯控制項組件 (範本)],然後按一下 [編輯範本] 或 [編輯複本]。

  • 系統 TabControl 的控制項範本比 SimpleTabControl 更為複雜。它可以讓 TabPanel 根據 TabControl 的 Orientation 屬性,以不同的方向固定。為了簡單起見,SimpleTabControl 會忽略 Orientation 屬性,但如果您要將 TabPanel 放置在不同的位置,則可以編輯格線列和欄。

  • 請勿將名為 PART_SelectedContentHost 的 ContentPresenter 元素重新命名,因為控制項的類別會查詢這個名稱來作為顯示索引標籤項目的位置。

Cc295163.7e183f1f-37d8-4dcb-980c-19a5d61ca087(zh-tw,Expression.10).gif回到頁首

請參閱

概念

試試看:使用點陣圖效果自訂 SimpleTabItem