建立內容控制項

本頁適用於 WPF 和 Silverlight 2

「內容控制項」具有可以定義控制項所顯示之內容的單一內容屬性。內容屬性可以是簡單的文字字串,也可以是複雜的 Microsoft .NET Framework 物件。若將版面配置面板控制項新增至內容控制項,則面板控制項會變成可在其中新增多個子元素的內容,因而可不受單一內容元素的限制。

下列程序顯示如何建立內容控制項 (按鈕),並將其內容屬性設為版面配置面板 (StackPanel)。您也可以將此程序用於 MSDN 文件庫ContentControl 類型 (英文) 主題之<類型>下的其他內容控制項。

Cc295336.alert_note(zh-tw,Expression.10).gif注意事項:

內容控制項無法用於 Microsoft Silverlight 1.0 專案中。但是,您可以在 [畫布] 版面配置面板中將物件分層,方法是將 [TextBlock] 放在最頂層,然後連接 JavaScript 事件處理常式,使 [畫布] 元素的作用如同按鈕或其他內容控制項一樣。如需範例,請參閱建立可控制 Silverlight 應用程式中腳本的按鈕

建立內容控制項

  1. 在 Microsoft Expression Blend 左側的 [工具箱] 中,按一下 [資產庫] Cc295336.0224cabd-5da1-4e01-bddd-4a647401a098(zh-tw,Expression.10).png 按鈕。在 [控制項] 索引標籤中,按一下 [系統控制項] (如果尚未選取),然後從清單中選取 [Button] Cc295336.05df1779-a68f-436b-b834-a91b7995a3ec(zh-tw,Expression.10).png

    [Button] 控制項的圖示會顯示在 [資產庫] 按鈕上方,並且呈選取狀態,讓您可以將 [按鈕] 新增至畫板。

    Cc295336.alert_tip(zh-tw,Expression.10).gif秘訣:

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

  2. 若要將按鈕新增至畫板,請按兩下 [Button] 控制項的 [工具箱] 圖示。按鈕的預設內容為 "Button" 字串。

    在畫板上建立的 Button 物件,大小與位置 (左上方) 為其預設值

    Cc295336.38211dc1-69d4-46bd-acd2-d7f9b48102bb(zh-tw,Expression.10).png

    Cc295336.alert_tip(zh-tw,Expression.10).gif秘訣:

    您也可以選取 [工具箱] 中的控制項,然後按一下畫板並拖曳滑鼠以指定控制項的週框方塊,將控制項新增至畫板中。

    Cc295336.alert_tip(zh-tw,Expression.10).gif秘訣:

    將 UI 設計元素 (例如 [Button] 控制項) 新增至畫板後,它就會變成應用程式中的「物件」。

  3. 在 [物件與時間軸] 下,按兩下 [Button] 物件,使其成為啟動的元素。請注意,元素周圍會出現黃色的反白顯示。啟動物件可以讓您新增子元素。

    Cc295336.alert_tip(zh-tw,Expression.10).gif秘訣:

    您也可以先選取 [工具箱] 中的 [選取] 工具 Cc295336.2ff91340-477e-4efa-a0f7-af20851e4daa(zh-tw,Expression.10).png,然後按兩下畫板上的物件,以啟動畫板上的物件。

  4. 在 [工具箱] 中,從 [資產庫] 或其中一個一般控制項的下拉式清單中選取 [StackPanel] Cc295336.ec58af86-cc2a-4e1f-91c0-883c5406fdfb(zh-tw,Expression.10).png 控制項。按兩下 [StackPanel] 控制項的圖示,將該控制項新增為按鈕內的子元素。

    [StackPanel] 會取代 [Button] 物件的內容字串。若要查看此行為的證據,請選取 [物件與時間軸] 下的 [Button],然後檢視 [屬性] 面板之 [一般屬性] 類別中的 [Content] 屬性。

    畫板上新增為按鈕內之子元素的 StackPanel 物件

    Cc295336.fb639649-9e46-4aef-960f-d0b40e9e8aff(zh-tw,Expression.10).png

  5. 設為預設大小的 [StackPanel],高度與寬度為 100,而最小高度與寬度為 0。若要讓 [StackPanel] 更容易使用,請選取 [物件與時間軸] 下的 [StackPanel],然後在 [屬性] 面板的 [版面配置] 類別中,將 [寬度] 變更為 150 像素 (與裝置無關的單位,約為 1/96 英吋),以及將 [高度] 變更為 75 像素。請注意,當您調整按鈕的子元素 (StackPanel) 時,按鈕會自動調整大小。

    Cc295336.alert_tip(zh-tw,Expression.10).gif秘訣:

    您也可以拖曳週框方塊角落處的提示符號,調整畫板上物件的大小。

  6. 在 [物件與時間軸] 下的 [StackPanel] 仍為選取狀態時,將 [屬性] 面板之 [版面配置] 類別中的 [Orientation] 屬性設為 [水平],使 [StackPanel] 中的子元素以水平方向堆疊。此屬性變更並不會影響 [StackPanel],因為直到將項目新增至 [StackPanel] 時,此屬性變更才會顯示於畫板上。

  7. 在 [物件與時間軸] 下,按兩下 [StackPanel] 物件來加以啟動,以便新增子元素。

    Cc295336.alert_tip(zh-tw,Expression.10).gif秘訣:

    不同於大部分的 UI 元素,某些版面配置面板 (例如 [StackPanel] 和 [格線]) 可包含多個子元素。這對整理和配置應用程式設計而言相當有用。如需詳細資訊,請參閱版面配置概觀

  8. 從 [工具箱] 中選取 [橢圓形] Cc295336.d7a04618-e35a-44f9-b78c-1f22e38016c1(zh-tw,Expression.10).png 工具,然後在畫板上的 [StackPanel] 內繪製圓形。接著,從 [工具箱] 中選取 [TextBox] Cc295336.343296b4-5c7d-4145-84cc-91b08ba67a1b(zh-tw,Expression.10).png 控制項,並且在 [StackPanel] 內繪製此控制項。由於包含子元素的 [StackPanel] 的方向為水平,所以子元素會由左至右並列堆疊。若要增加子元素間的間隔,可以調整 [屬性] 面板之 [版面配置] 類別中元素的 [Margin] 屬性。

    新增至 StackPanel 物件的子物件

    Cc295336.12af719b-02a4-4334-801d-9dedeebec030(zh-tw,Expression.10).png

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