共用方式為

繪製已加上標題的控制項

  • 發行項

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

下列程序顯示如何在項目控制項 ([TabControl]) 內建立已加上標題的內容控制項 (TabItem 控制項)。您也可以將此程序用於 MSDN 上 HeaderedContentControl 之＜Types＞(類型) 下列出的其他已加上標題的內容控制項。已加上標題的項目控制項會列於 MSDN 的 HeaderedItemsControl 中。

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

  1. 在 Microsoft Expression Blend 應用程式視窗左側的 [工具] 面板中，按一下 [資產] Cc295310.0d8b8d29-1af9-418f-8741-be3097d76eab(ZH-TW,Expression.30).png。在 [控制項] 類別中，從清單選取 [TabControl] Cc295310.f13847cd-7fdf-4757-a648-d5ece98fcaea(ZH-TW,Expression.30).png。

    [TabControl] 控制項的圖示會出現在 [資產] 按鈕下方，且為已選取狀態，您可隨時將 TabControl 控制項新增至畫板。

    Cc295310.alert_tip(ZH-TW,Expression.30).gif秘訣：

    最常用的使用者介面 (UI) 元素 (例如 [Button] 控制項) 已顯示於 [資產] 按鈕下方的下拉式清單中，讓您能迅速新增這些 UI 元素。

  2. 若要將 TabControl 物件新增至畫板，請按兩下 [TabControl] 控制項的圖示。[TabControl] 預設會包含兩個 [TabItem] 物件。

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

    Cc295310.b5763b4e-3032-468e-bbdf-42057fd0cb08(ZH-TW,Expression.30).png

    Cc295310.alert_tip(ZH-TW,Expression.30).gif秘訣：

    您也可視需要將其他 [TabItem] 物件新增至 [TabControl] 物件。在 [物件與時間軸] 面板中，以滑鼠右鍵按一下 [TabControl] 物件，然後按一下 [新增 TabItem]。

  3. 在畫板上，按住 CTRL 鍵並拖曳右下角的調整大小控點，以放大索引標籤控制項。請放大 [TabControl] 物件，讓它的頂端足以顯示三個索引標籤。

    Cc295310.alert_tip(ZH-TW,Expression.30).gif秘訣：

    此外，您還可以在 [屬性] 面板的 [版面配置] 類別中設定 [Height] 及 [Width] 屬性，以調整 [TabControl] 的大小。

  4. 若要命名其中一個 [TabItem] 物件，請在 [物件與時間軸] 面板中選取該物件，並在 [屬性] 面板的 [一般屬性] 類別中輸入 [Header] 屬性的名稱。例如，將第一個 [TabItem] 物件命名為 Personal Info。

    Cc295310.alert_tip(ZH-TW,Expression.30).gif秘訣：

    您也可以將另一個控制項 (如 [Image] 控制項) 當做 [TabItem] 的標題使用。在 [物件與時間軸] 面板中，展開 [TabItem] 物件，並按一下 [Header] 物件，讓它成為已啟動的元素。您可以從 [工具] 面板或 [專案] 面板新增 [Image] 控制項。

  5. 若要新增其中一個 [TabItem] 物件的內容，請在 [物件與時間軸] 面板中按一下該物件加以啟動。

  6. 在 [工具] 面板中，按兩下 [StackPanel] Cc295310.ec58af86-cc2a-4e1f-91c0-883c5406fdfb(ZH-TW,Expression.30).png 以新增 [StackPanel] 物件至您的 [TabItem] 物件。

  7. 在 [物件與時間軸] 面板中，按一下 [StackPanel] 物件，讓它成為使用中的物件。您現在可以將所需數目的物件新增至 [TabItem] 物件。例如，您可以從 [工具] 面板新增 [TextBlock] 或 [ListBox] 控制項。

    新增至 TabControl 物件的子物件

    Cc295310.f20233a8-3a71-46a5-863b-57a0f5b54f0b(ZH-TW,Expression.30).png

  8. 如果想要新增整個 [TabControl] 的框線及標題，可以使用另一個標題內容控制項：[GroupBox] 控制項。如果已在 [物件與時間軸] 面板中啟動 [LayoutRoot] 物件，請從 [資產] 面板中選取 [GroupBox] 控制項，然後使用滑鼠在畫板上繪製控制項，讓它稍微比 [TabControl] 物件大。

  9. 若要讓 [TabControl] 物件成為 [GroupBox] 物件的子物件，請在 [物件與時間軸] 面板中將 [TabControl] 物件拖曳至 [GroupBox] 物件。

    將 TabControl 物件拖曳至 GroupBox 物件

    Cc295310.bbfefd21-01bb-4725-bfb0-30e55de6c4df(ZH-TW,Expression.30).png

  10. 在 [物件與時間軸] 面板中選取 [GroupBox] 物件，然後在 [屬性] 面板的 [一般屬性] 類別中變更 [Header] 屬性，以變更 [GroupBox] 物件的標題。

  11. 建置專案 (F5) 以查看產生的應用程式。

    如需包含會對 [ListBox] 物件中選定項目反應之程式碼的完整範例，請參閱 MSDN 上的 GroupBox 範例。範例程式碼位於可從 Windows SDK .NET Framework 3.0 範本 (英文) 取得的 WPFSamples.exe 套件中。