Share via

繪製標題控制項

  • 發行項

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

下列程序顯示如何在項目控制項 ( TabControl ) 內建立標題內容控制項 ( TabItem 控制項)。您也可以將此程序用於 MSDN 上 HeaderedContentControl Types Cc295310.xtlink_newWindow(zh-tw,Expression.40).png (HeaderedContentControl 類別) 之＜Types＞(類型) 下列出的其他標題內容控制項。標題項目控制項會列於 MSDN 的 HeaderedItemsControl Types Cc295310.xtlink_newWindow(zh-tw,Expression.40).png (HeaderedItemsControl 類型) 中。

建立標題內容控制項

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

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

    tip note秘訣：

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

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

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

    Cc295310.b5763b4e-3032-468e-bbdf-42057fd0cb08(zh-tw,Expression.40).png

    tip note秘訣：

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

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

    tip note秘訣：

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

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

    tip note秘訣：

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

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

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

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

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

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

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

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

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

Copyright © 2011 by Microsoft Corporation. All rights reserved.