逐步解說：使用邊框間距、邊界和 AutoSize 屬性配置控制項

  • 發行項

對許多應用程式而言，控制項在表單上的精確位置是高優先順序。 Visual Studio 中的 Windows Forms 設計 工具提供許多版面組態工具來達成此目的。 最重要的三個是 Margin 、 Padding 和 AutoSize 屬性，這些屬性存在於所有 Windows Forms 控制項上。

Margin 屬性可定義控制項周圍的空間，使其他控制項與該控制項的邊框保持指定的距離。

Padding 屬性可定義控制項的內部空間，使控制項的內容 (例如，其 Text 屬性值) 與控制項的邊框保持指定的距離。

下圖顯示控制項上的 Padding 和 Margin 屬性。

Padding And Margin for Windows Forms Controls

屬性 AutoSize 會告知控制項自動調整其內容的大小。 它不會將本身的大小調整為小於其原始 Size 屬性的值，而且會考慮其 Padding 屬性的值。

必要條件

您將需要 Visual Studio 才能完成本逐步解說。

建立專案

  1. 在 Visual Studio 中，建立名為 LayoutExample 的 Windows 應用程式 專案。

  2. 選取 Windows Forms 設計 工具中的 表單。

設定控制項的邊界

您可以使用 屬性來設定控制項 Margin 之間的預設距離。 當您將控制項靠近另一個控制項時，您會看到顯示兩個控制項邊界的貼齊線。 您移動的控制項也會貼齊邊界所定義的距離。

使用 Margin 屬性排列表單上的控制項

  1. 將兩個 Button 控制項從 [工具箱] 拖曳到表單上。

  2. 選取其中 Button 一個控制項，並將它移到另一個控制項附近，直到它們幾乎觸碰為止。

    觀察它們之間出現的對齊線。 此距離是兩個控制項 Margin 值的總和。 您要移動的控制項會貼齊到這個距離。 如需詳細資訊，請參閱 逐步解說：使用貼齊線 排列 Windows Forms 上的控制項。

  3. Margin藉由展開 Margin [屬性 ] 視窗中的專案 ，並將 屬性設定 All 為 20 ，以變更其中一個控制項的 屬性。

  4. 選取其中 Button 一個控制項，並將它移到另一個控制項附近。

    定義邊界值總和的貼齊線較長，而且控制項會從另一個控制項貼齊更大的距離。

  5. Margin藉由展開 Margin [屬性 ] 視窗中的專案 ，並將 屬性設定 Top 為 5 ，以變更選取控制項的 屬性。

  6. 將選取的控制項移到其他控制項下方，並觀察對齊線較短。 將選取的控制項移至另一個控制項的左邊，並觀察對齊線會保留步驟 4 中所觀察到的值。

  7. 您可以將屬性、 Left 、、 Top 、 BottomRight 的各個層面 Margin 設定為不同的值，或者您可以使用 屬性將它們全部設定為相同的值 All 。

設定控制項的邊框間距

若要達到應用程式所需的精確版面配置，您的控制項通常會包含子控制項。 當您想要指定子控制項框線與父控制項框線的鄰近性時，請使用父 Padding 控制項的 屬性搭配子控制項的 Margin 屬性。 屬性 Padding 也可用來控制控制項內容（例如 Button 控制項 Text 的 屬性）與其框線的鄰近性。

使用邊框間距排列表單上的控制項

  1. 從 [工具箱] Button將 控制項拖曳至表單。

  2. 將 Button 控制項 AutoSize 的 屬性值變更為 true 。

  3. Padding藉由展開 Padding [屬性 ] 視窗中的專案 ，並將 屬性設定 All 為 5 ，以變更屬性。

    控制項會展開以提供空間給新的邊框間距。

  4. 從 [工具箱] GroupBox將 控制項拖曳至表單。 將控制項從 [工具箱] Button 拖曳至 GroupBox 控制項。 Button放置控制項，使其與控制項右下角 GroupBox 排清。

    觀察控制項接近控制項下框線和右框線 GroupBox 時出現的 Button 對齊線。 這些對齊線會對應至 Margin 的 Button 屬性。

  5. GroupBox藉由展開 Padding [屬性 ] 視窗中的專案 ，並將 屬性設定 All 為 20 ，以變更控制項 Padding 的 屬性。

  6. Button選取控制項內的 GroupBox 控制項，並將它移至 的中心 GroupBox 。

    對齊線會顯示在與控制項框線 GroupBox 較遠的距離。 這個距離是控制項 Margin 屬性和控制項 Padding 屬性的總 Button 和 GroupBox 。

自動調整控制項大小

在某些應用程式中，控制項的大小在執行時間不會與設計階段相同。 例如，控制項的 Button 文字可能取自資料庫，而且其長度在事先未知。

AutoSize當 屬性設定為 true 時，控制項會將本身的大小調整為其內容。 如需詳細資訊，請參閱 AutoSize 屬性概觀 。

使用 AutoSize 屬性排列表單上的控制項

  1. 從 [工具箱] Button將 控制項拖曳至表單。

  2. 將 Button 控制項 AutoSize 的 屬性值變更為 true 。

  3. 將 Button 控制項的 Text 屬性變更為 [這個] 按鈕具有其 Text 屬性 的長字串。

    當您認可變更時，控制項會 Button 自行調整大小以符合新的文字。

  4. 將另一個控制項從 [工具箱 ] Button 拖曳到您的表單上。

  5. 將 Button 控制項的 Text 屬性變更為「 此按鈕具有其 Text 屬性的長字串」。

    當您認可變更時， Button 控制項不會自行調整大小，而且文字會由控制項的右邊緣裁剪。

  6. Padding藉由展開 Padding [屬性 ] 視窗中的專案 ，並將 屬性設定 All 為 5 ，以變更屬性。

    控制項內部的文字會剪下四側。

  7. 將 Button 控制項的 AutoSize 屬性變更為 true 。

    控制項會 Button 調整本身的大小，以包含整個字串。 此外，文字周圍已新增邊框間距，導致 Button 控制項以所有四個方向展開。

  8. 從 [工具箱] Button將 控制項拖曳至表單。 將它放置在表單右下角附近。

  9. 將 Button 控制項 AutoSize 的 屬性值變更為 true 。

  10. 將 Button 控制項的 Anchor 屬性設定為 Right ， Bottom 。

  11. 將 Button 控制項的 Text 屬性變更為「 此按鈕具有其 Text 屬性的長字串」。

當您認可變更時，控制項會 Button 向左調整大小。 一般而言，自動調整大小會以與其 Anchor 屬性設定相反的方向增加控制項的大小。

AutoSize 和 AutoSizeMode 屬性

某些控制項支援 AutoSizeMode 屬性，讓您更精細地控制控制項的自動調整大小行為。

使用 AutoSizeMode 屬性

  1. 從 [工具箱] Panel將 控制項拖曳至表單。

  2. 將 Panel 控制項的 AutoSize 屬性值設定為 true 。

  3. 將控制項從 [工具箱] Button 拖曳至 Panel 控制項。

  4. 將 Button 控制項放在控制項右下角 Panel 附近。

  5. 選取控制項並 Panel 抓取右下角大小控點。 將 Panel 控制項的大小調整為較大且較小。

    注意

    您可以自由調整控制項的大小 Panel ，但無法將其大小調整為小於控制項右下角的位置 Button 。 這個行為是由 屬性的 AutoSizeMode 預設值所指定，也就是 GrowOnly 。

  6. 將 Panel 控制項 AutoSizeMode 的 屬性值設定為 GrowAndShrink 。

    控制項會 Panel 調整控制項的大小，以包圍 Button 控制項。 您無法調整控制項的大小 Panel 。

  7. 將 Button 控制項拖曳到控制項左上角 Panel 。

    控制項會 Panel 調整為 Button 控制項的新位置。

下一步

在 Windows Forms 應用程式中排列控制項時，還有其他許多配置功能。 以下是您可能會嘗試的一些組合：

另請參閱