逐步解說:使用邊框距離、邊界和 AutoSize 屬性配置 Windows Form 控制項
表單控制項的精確置放對許多應用程式而言非常重要。[Windows Form 設計工具] 能提供您許多配置工具以完成這項作業。三個最重要的工具是 Margin、Padding 和 AutoSize 屬性,在所有 Windows Form 控制項上都有這些屬性。
Margin 屬性會定義控制項周圍的空間,讓其他控制項與該控制項的邊框保持特定的距離。
Padding 屬性會定義控制項內部的空間,讓控制項的內容 (例如,Text 屬性的值) 與控制項的框線保持指定的距離。
下列圖例顯示控制項的 Padding 和 Margin 屬性。
AutoSize 屬性會告訴控制項自動調整大小,以符合控制項的內容。該控制項不會調整至小於原始 Size 屬性的值,且會考慮 Padding 屬性值。
逐步解說將說明的工作包括:
建立 Windows Form 專案
設定控制項的邊界
設定控制項的邊框距離
自動調整控制項大小
當您完成時,將會對這些重要的配置功能所扮演的角色有所瞭解。
注意事項 |
---|
根據您目前使用的設定或版本,您所看到的對話方塊與功能表指令可能會與 [說明] 中描述的不同。如果要變更設定,請從 [工具] 功能表中選擇 [匯入和匯出設定]。如需詳細資訊,請參閱 Visual Studio 設定。 |
必要條件
若要完成這個逐步解說,您必須要有:
- 擁有足夠的使用權限,可以在安裝 Visual Studio 的電腦上建立並執行 Windows Form 應用程式專案。
建立專案
第一個步驟是建立專案並設定表單。
若要建立專案
建立名為 LayoutExample 的 [Windows 應用程式] 專案。如需詳細資訊,請參閱 HOW TO:建立 Windows 應用程式專案。
從 [Windows Form 設計工具] 中選取表單。
設定控制項的邊界
您可以使用 Margin 屬性,設定控制項之間的預設距離。當您將控制項移至夠靠近另一個控制項時,會看見顯示兩個控制項之邊界的對齊線。您移動的控制項將會貼齊至邊界所定義的距離。
若要使用 Margin 屬性排列表單上的控制項
從 [工具箱] 將兩個 Button 控制項拖曳至表單。
選取其中一個 Button 控制項,並將它移動至靠近另一個控制項,直到幾乎彼此接觸為止。
觀察出現在它們之間的對齊線。這個距離是兩個控制項之 Margin 值的總和。您所移動的控制項會貼齊至這個距離。如需詳細資訊,請參閱逐步解說:使用對齊線排列 Windows Form 上的控制項。
在 [屬性] 視窗中展開 Margin 項目,並將 All 屬性設定為 20,藉此變更其中一個控制項的 Margin 屬性。
選取其中一個 Button 控制項,並將它移至靠近另一個控制項。
定義邊界值總和的對齊線比較長,且該控制項會貼齊至離其他控制項較遠的距離。
在 [屬性] 視窗中展開 Margin 項目,並將 Top 屬性設定為 5,藉此變更選取控制項的 Margin 屬性。
移動其他控制項下方的選取控制項,並且觀察對齊線會較短。將選取的控制項移動至其他控制項的左邊,然後觀察對齊線會保留在步驟 4 中所觀察到的值。
您可以將 Margin 屬性的每一個方面 (Left、Top、Right、Bottom) 設定為不同的值,或者您可以使用 All 屬性將它們全部設定成相同的值。
設定控制項的邊框距離
若要達到應用程式所需要的精準配置,您的控制項通常會包含子控制項。當您想要指定子控制項邊框與父控制項邊框之間的相距時,請一起使用父控制項的 Padding 屬性和子控制項的 Margin 屬性。Padding 屬性也用來控制控制項的內容與邊框之間的相距 (例如,Button 控制項的 Text 屬性)。
若要使用邊框距離排列表單上的控制項
從 [工具箱] 將 Button 控制項拖曳至表單。
將 Button 控制項的 AutoSize 屬性值變更為 true。
在 [屬性] 視窗中展開 Padding 項目,並將 All 屬性設定為 5,藉此變更 Padding 屬性。
控制項會展開以提供空間給新的邊框距離。
從 [工具箱] 將 GroupBox 控制項拖曳至表單。將 Button 控制項從 [工具箱] 拖曳至 GroupBox 控制項。放置 Button 控制項,讓控制項與 GroupBox 控制項的右下角一起清除。
觀察當 Button 控制項接近 GroupBox 控制項的下方和右邊緣時,所出現的對齊線。這些對齊線會對應至 Button 的 Margin 屬性。
在 [屬性] 視窗中展開 Padding 項目,並將 All 屬性設定為 20,藉此變更 GroupBox 控制項的 Padding 屬性。
選取 GroupBox 控制項中的 Button 控制項,並將它往 GroupBox 的中心方向移動。
對齊線會顯示為大於 GroupBox 控制項邊框的距離。這個距離是 Button 控制項的 Margin 屬性和 GroupBox 控制項的 Padding 屬性的總和。
自動調整控制項大小
在一些應用程式中,控制項在執行階段的大小與在設計階段的大小不相同。例如,Button 控制項的文字,可能是來自資料庫,而文字的長度將不會預先知道。
當 AutoSize 屬性設定為 true 時,控制項會自行調整大小,以符合內容。如需詳細資訊,請參閱 AutoSize 屬性概觀。
若要使用 AutoSize 屬性排列表單上的控制項
從 [工具箱] 將 Button 控制項拖曳至表單。
將 Button 控制項的 AutoSize 屬性值變更為 true。
將 Button 控制項的 Text 屬性變更為 "This button has a long string for its Text property."。
當您認可變更時,Button 控制項會自行調整大小,以符合新文字內容。
從 [工具箱] 將另一個 Button 控制項拖曳至表單。
將 Button 控制項的 Text 屬性變更為 "This button has a long string for its Text property."。
當您認可變更時,Button 控制項不會自行調整大小,而控制項的右邊緣會裁剪文字。
在 [屬性] 視窗中展開 Padding 項目,並將 All 屬性設定為 5,藉此變更 Padding 屬性。
控制項內部的文字會在所有四個方向上進行裁剪。
將 Button 控制項的 AutoSize 屬性變更為 true。
Button 控制項會調整大小以包含整個字串。此外,已經在文字周圍加入邊框距離,這會造成 Button 控制項往所有四個方向展開。
從 [工具箱] 將 Button 控制項拖曳至表單。將它放置在表單右下角的附近。
將 Button 控制項的 AutoSize 屬性值變更為 true。
將 Button 控制項的 Text 屬性變更為 "This button has a long string for its Text property."。
當您認可變更時,Button 控制項會自行向左邊調整大小。通常,自動調整大小會增加與 Anchor 屬性設定相反方向的控制項大小。
AutoSize 和 AutoSizeMode 屬性
某些控制項支援 AutoSizeMode 屬性,此屬性會提供比控制項的自動調整大小行為還要詳細的控制項。
若要使用 AutoSizeMode 屬性
從 [工具箱] 將 Panel 控制項拖曳至表單。
將 Panel 控制項的 AutoSize 屬性值設定為 true。
將 Button 控制項從 [工具箱] 拖曳至 Panel 控制項。
將 Button 控制項放置在 Panel 控制項的右下角附近。
選取 Panel 控制項並抓取右下角的縮放控點 (Sizing Handle)。將 Panel 控制項的大小調整為較大或較小。
注意事項 您可以自由調整 Panel 控制項的大小,但是不能讓它小於 Button 控制項右下角的位置。這個行為是由 AutoSizeMode 屬性的預設值所指定,即是 GrowOnly。
將 Panel 控制項的 AutoSizeMode 屬性值設定為 GrowAndShrink。
Panel 控制項會調整大小以圍繞 Button 控制項。您無法調整 Panel 控制項大小。
將 Button 控制項往 Panel 控制項的左上角拖曳。
Panel 控制項會調整大小至 Button 控制項的新位置。
後續步驟
在 Windows Form 應用程式中有排列控制項的許多其他配置功能。您可能會想嘗試某些組合:
使用 TableLayoutPanel 控制項建置表單。如需詳細資訊,請參閱逐步解說:使用 TableLayoutPanel 排列 Windows Form 上的控制項。嘗試變更 TableLayoutPanel 控制項的 Padding 屬性值,以及在子控制項上的 Margin 屬性。
使用 FlowLayoutPanel 控制項嘗試相同的實驗。如需詳細資訊,請參閱逐步解說:使用 FlowLayoutPanel 排列 Windows Form 上的控制項。
使用 Panel 控制項中的停駐子控制項做實驗。Padding 屬性是 DockPadding 屬性的較通用版本,您可以將子控制項放置在 Panel 控制項中,並將子控制項的 Dock 屬性設定為 Fill,藉此自我滿足。將 Panel 控制項的 Padding 屬性設定為各種值,並注意其效果。
請參閱
工作
逐步解說:使用 TableLayoutPanel 排列 Windows Form 上的控制項
逐步解說:使用 FlowLayoutPanel 排列 Windows Form 上的控制項
逐步解說:使用對齊線排列 Windows Form 上的控制項
參考
AutoSize
DockPadding
Margin
Padding