SimpleTabControl 及 SimpleTabItem

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

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

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

深入控制項範本

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 控制項 (右) 的基本部分 (範本)

  

回到頁首

使用屬性觸發程序

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

回到頁首

使用筆刷

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 來設定。

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

回到頁首

最佳作法與設計方針

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

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

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

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

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

回到頁首

請參閱

概念

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