內容 索引 搜尋
 

建立已加上標題的控制項

「已加上標題的控制項」具有用來標記控制項的標題屬性。標題屬性可以像文字字串一樣簡單，也可以像 Microsoft® .NET Framework 物件一樣複雜。根據您所用之已加上標題的控制項類型而定，已加上標題的控制項也可以顯示內容或項目集合。例如，TabControl 內的 TabItem 是「已加上標題的內容控制項」，而 ToolBar 及 MenuItem 都是「已加上標題的項目集合控制項」。

下列程序顯示如何在項目集合控制項 (TabControl) 內建立已加上標題的內容控制項 (TabItem 控制項)。此程序也可以與其他已加上標題的內容控制項搭配使用，而這些控制項列於 MSDN 之＜HeaderedContentControl 類型＞主題的＜類型＞(英文) 中。已加上標題的項目集合控制項則是列於 MSDN 的＜HeaderedItemsControl 類型＞(英文) 中。

建立已加上標題的內容控制項

  1. 在 Microsoft Expression® Blend 左邊的 [工具箱] 中，按一下 [資產庫] 按鈕 資產庫按鈕。在 [控制項] 索引標籤中，按一下 [系統控制項] (如果尚未選取)，並從清單中選取 [TabControl] ListBox 控制項。
    [TabControl] 控制項的圖示會出現在 [資產庫] 按鈕上方，而且為已選取狀態，您可隨時將 TabControl 新增至畫板。
    提示 最常用的 UI 元素 (例如 Button 控制項) 已顯示於 [資產庫] 按鈕上方的下拉式清單中，以便您迅速新增這些 UI 元素。
  2. 若要將按鈕新增至畫板，請按兩下 [TabControl] 控制項的 [工具箱] 圖示。
    TabControl 預設會包含兩個 TabItem 物件。

    畫板上以預設大小及位置建立的 TabControl 物件 (左上)

    畫板上以預設大小及位置建立的 TabControl 物件 (左上)

    提示 如果需要，您也可以將其他 TabItem 物件新增至 TabControl。在 [物件與時間軸] 下，按兩下 TabControl 物件，讓它成為已啟動的元素。並在 [工具箱] 中，從 [資產庫] 中選取 [TabItem] 控制項 (選取 [全部顯示] 核取方塊)。然後按兩下 [TabItem] 控制項的圖示，將它新增為 TabControl 的子元素。
  3. 在畫板上，拖曳右下角的調整大小控點，以放大索引標籤控制項。您的游標會變更為雙頭箭號 ，表示可以進行調整大小作業。請放大 TabControl，讓它的頂端足以顯示三個索引標籤。
    提示 此外，您還可以在 [屬性] 面板的 [版面配置] 類別中設定 [Height] 及 [Width] 屬性，以調整 TabControl 的大小。
  4. 若要命名其中一個 TabItem 物件，請在 [物件與時間軸] 下選取該物件，並在 [屬性] 面板的 [通用屬性] 類別中輸入 Header 屬性的名稱。例如，將第一個 TabItem 物件命名為 Personal Info。
    提示 您也可以將另一個控制項 (如 Image 控制項) 當做 TabItem 的標題使用。在 [物件與時間軸] 下，展開 TabItem 物件，並按兩下 Header 物件，讓它成為已啟動的元素。您可以從 [工具箱] 或 [檔案] 面板新增 Image 控制項。
  5. 若要新增其中一個 TabItem 物件的內容，請在 [物件與時間軸] 下按兩下該物件加以啟動。
  6. 在 [工具箱] 中，按兩下 [StackPanel] StackPanel 控制項，將 StackPanel 新增至 TabItem。
    TabItem 的內容屬性會從預設 Grid 物件變更為 StackPanel 物件。
    提示 內容屬性只可以包含一個項目。這有助於將面板控制項 (如 StackPanel 或 Grid) 當做那個項目使用，然後將多個項目新增至面板控制項。
  7. 在 [物件與時間軸] 下，按兩下 StackPanel 物件，讓它成為使用中的元素。
    您現在可以將所需數目的元素新增至 TabItem。例如，您可以從 [工具箱] 中新增 TextBlock 或 ListBox 控制項。

    新增至 TabControl 物件的子物件

    新增至 TabControl 物件的子物件

  8. 如果想要新增整個 TabControl 的框線及標題，則可以使用另一個已加上標題的內容控制項：GroupBox 控制項。如果已在 [物件與時間軸] 下啟動 [LayoutRoot] 物件，請從 [資產庫] 中選取 [GroupBox]，然後使用滑鼠在畫板上繪製控制項，讓它稍微比 TabControl 大。
  9. 若要讓 TabControl 成為 GroupBox 的子元素，請在 [物件與時間軸] 下按一下 TabControl 並且拖曳至 GroupBox。

    將 TabControl 拖曳至 GroupBox

    將 TabControl 拖曳至 GroupBox

  10. 在 [物件與時間軸] 下選取 GroupBox，然後在 [屬性] 面板的 [通用屬性] 類別中變更 Header 屬性，以變更 GroupBox 的標題。
  11. 建置專案 (F5) 以查看產生的應用程式。
附註 如需完整範例 (包括反應 ListBox 中所選項目的程式碼)，請參閱 MSDN 上的＜GroupBox 範例＞(英文)。範例程式碼是包含在可以從＜Windows SDK .NET Framework 3.0 範例＞(英文) 取得的 "WPFSamples.exe" 套件中。