逐步解說：使用對齊線排列 Windows Forms 上的控制項

  • 發行項

對許多應用程式而言，控制項在表單上的精確位置是高優先順序。 Windows Forms 設計工具提供許多版面組態工具來完成這項作業。 其中一個最重要的是 SnapLine 功能。

貼齊線會精確顯示將控制項與其他控制項對齊的位置。 它們也會顯示控制項之間邊界的建議距離，如 Windows 使用者介面指導方針 所 指定。

貼齊線可讓您輕鬆對齊控制項，以簡潔、專業的外觀和行為（外觀和風格）。

建立專案

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

  2. 選取 [表單設計工具] 中的表單。

空格和對齊控制項

貼齊線可讓您以精確且直覺的方式對齊表單上的控制項。 當您將選取的控制項或控制項移至與另一個控制項或控制項集對齊的位置附近時，就會顯示它們。 當您將選取範圍移至其他控制項時，會「貼齊」到建議的位置。

使用對齊線排列控制項

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

  2. 將 Button 控制項移至表單的右下角。 請注意，當控制項接近表單的下框線和右框線時 Button ，會出現的對齊線。 這些對齊線會顯示控制項框線與表單框線之間的建議距離。

  3. 將 Button 控制項移到表單的框線周圍，並記下對齊線出現的位置。 當您完成時，請將控制項移至 Button 表單中央附近。

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

  5. 移動第二個 Button 控制項，直到它接近第一個層級為止。 請注意這兩個按鈕的文字基準中顯示的貼齊線，並請注意，您要將貼齊移至與另一個控制項完全一致的位置的控制項。

  6. 移動第二個 Button 控制項，直到它位於第一個控制項的正上方為止。 請注意沿著兩個按鈕左右邊緣顯示的對齊線，並請注意，您要將貼齊移到與另一個控制項完全對齊的位置的控制項。

  7. 選取其中 Button 一個控制項，並將它移到另一個控制項附近，直到它們幾乎觸碰為止。 請注意它們之間出現的對齊線。 此距離是控制項框線之間的建議距離。 另請注意，您要將貼齊移至此位置的控制項。

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

  9. 移動其中 Panel 一個控制項，直到它接近第一個層級為止。 請注意沿著兩個控制項上邊緣和下邊緣顯示的對齊線，並請注意，您要將貼齊移到與另一個控制項完全一致的位置的控制項。

對齊表單和容器邊界

貼齊線可協助您以一致的方式將控制項對齊表單和容器邊界。

  1. 選取其中 Button 一個控制項，並將它靠近表單的右框線，直到對齊線出現為止。 對齊線與右框線的距離是控制項 Margin 屬性和表單 Padding 屬性值的總和。

    注意

    如果表單的 Padding 屬性設定為 0,0,0,0,0,0,0,0,0,0,0,0,9,9,9,9,9 的陰影 Padding 值。 若要覆寫此行為，請指派 0,0,0,0 以外的值。

  2. 藉由展開 Margin [屬性 ] 視窗中的專案 Button ，並將 屬性設定 All 為 0，以變更控制項 Margin 的 屬性值。 如需詳細資訊，請參閱 逐步解說：使用邊框間距、邊界和 AutoSize 屬性 配置 Windows Forms 控制項。

  3. 將 Button 控制項靠近表單的右框線，直到對齊線出現為止。 此距離現在是由表單 Padding 的 屬性值所指定。

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

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

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

  7. 將 Button 控制項靠近控制項的 GroupBox 右框線，直到對齊線出現為止。 移動 Button 控制項內的控制項， GroupBox 並記下顯示對齊線的位置。

對齊群組控制項

您可以使用對齊線來對齊群組控制項和控制項內的 GroupBox 控制項。

  1. 選取表單上的兩個控制項。 移動選取範圍，並記下選取範圍與其他控制項之間出現的對齊線。

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

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

  4. 選取其中 Button 一個控制項，並在控制項周圍 GroupBox 移動。 請注意出現在控制項邊緣的 GroupBox 對齊線。 另請注意顯示在控制項所 GroupBox 包含控制項邊緣的 Button 對齊線。 屬於容器控制項子系的控制項也支援對齊線。

使用對齊線來放置控制項，方法是大綱其大小

  1. 按一下 [工具箱] 的 Button 控制項圖示。 請勿拖曳到表單。

  2. 將滑鼠指標移至表單的設計介面上方。 請注意，指標會變成十字形狀並附有 Button 控制項圖示。 另請注意顯示建議控制項對齊位置的 Button 對齊線。

  3. 按住滑鼠按鈕。

  4. 將滑鼠指標拖曳到表單周圍。 請注意，會繪製外框，指出控制項的位置和大小。

  5. 拖曳指標，直到它與表單上的另一個控制項對齊為止。 請注意，對齊線會顯示為表示對齊方式。

  6. 放開滑鼠按鈕。 控制項會建立在大綱所指示的位置和大小。

從工具箱拖曳控制項時使用對齊線

  1. 將控制項從 [工具箱 ] Button 拖曳到表單上，但不要放開滑鼠按鍵。

  2. 將滑鼠指標移至表單的設計介面上方。 請注意，指標會變更，以指出將建立新 Button 控制項的位置。

  3. 將滑鼠指標拖曳到表單周圍。 請注意顯示建議控制項對齊位置的 Button 對齊線。 尋找與其他控制項對齊的位置。

  4. 放開滑鼠按鈕。 控制項會建立在對齊線所指示的位置。

使用對齊線調整控制項的大小

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

  2. Button藉由擷取其中一個角落調整大小控點和拖曳來調整控制項的大小。 如需詳細資訊，請參閱 如何：調整 Windows Forms 上的控制項大小。

  3. 拖曳調整大小控點，直到控制項的 Button 其中一個框線與另一個控制項對齊為止。 請注意，貼齊線隨即出現。 另請注意，調整大小控點貼齊對齊對齊線所指示的位置。

  4. 以 Button 不同方向調整控制項的大小，並將調整大小控點對齊不同的控制項。 請注意對齊線如何以各種方向顯示，以指出對齊方式。

將標籤對齊控制項的文字

  1. 從 [工具箱] TextBox將 控制項拖曳至表單。 當您將 TextBox 控制項放到表單上時，按一下智慧標籤字元，然後選取 [ 將文字設定為 textBox1 ] 選項。 如需詳細資訊，請參閱 逐步解說：使用設計工具動作 執行一般工作。

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

  3. 變更 Label 控制項的 AutoSize 屬性值為 true。 請注意，控制項的框線會調整為符合顯示文字。

  4. 將 Label 控制項移至控制項左邊 TextBox ，使其與控制項的 TextBox 下邊緣對齊。 請注意沿著兩個控制項下邊緣顯示的對齊線。

  5. Label將控制項稍微向上移動，直到 Label 文字和 TextBox 文字對齊為止。 請注意出現的不同樣式對齊線，指出兩個控制項的文字欄位對齊時機。

搭配鍵盤流覽使用對齊線

  1. 從 [工具箱] Button將 控制項拖曳至表單。 將它放在表單的左上角。

  2. 按 Ctrl + 向下鍵 。 請注意，控制項會將表單向下移動至第一個可用的水準對齊位置。

  3. 按 Ctrl + 向下鍵 ，直到控制項到達表單底部為止。 請注意它所佔用的位置，因為它會向下移動表單。

  4. 按 Ctrl + 向右鍵。 請注意，控制項會跨表單移至第一個可用的垂直對齊位置。

  5. 按 Ctrl + 向右鍵 ，直到控制項到達表單的一側為止。 請注意它在表單上移動時所佔用的位置。

  6. 使用方向鍵組合在表單周圍移動控制項。 請注意控制項所佔用的位置，以及隨附的貼齊線。

  7. 按 Shift + 方向鍵 ，以遞增一個圖元調整控制項的大小。 Button

  8. 按 Ctrl + Shift + 方向鍵 ，以對齊線遞增調整控制項的大小。 Button

選擇性地停用對齊線

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

  2. 在 [工具箱] Button中按兩下控制項圖示。 請注意，新的按鈕控制項會出現在 TableLayoutPanel 控制項的第一個儲存格中。

  3. 按兩下 Button [工具箱 ] 中的 控制項圖示兩次。 這會將一個空白儲存格留在 控制項中 TableLayoutPanel 。

  4. 將控制項從 [工具箱 ] Button 拖曳至控制項的 TableLayoutPanel 空白儲存格。 請注意，沒有出現對齊線。

  5. 將 Button 控制項拖曳出控制項， TableLayoutPanel 並將它移到控制項周圍 TableLayoutPanel 。 請注意，對齊線會再次出現。

停用對齊線

按下 Alt 鍵，並在表單周圍移動控制項時。

沒有出現對齊線，而且控制項不會貼齊任何潛在的對齊位置。

停用設計環境中的對齊線

  1. 從 [ 工具] 功能表中，開啟 [ 選項 ] 對話方塊。 選取 [Windows Forms 設計工具 ]。

  2. 選取 [ 一般] 節點。 在 [ 版面配置模式 ] 區段中，將選取範圍從 SnapLines 變更為 SnapToGrid 。

  3. 選取 [ 確定 ] 以套用設定。

  4. 選取表單上的控制項，並將它移到其他控制項周圍。 請注意，對齊線不會出現。

下一步

貼齊線提供直覺式的方式，可對齊表單上的控制項。 建議您進一步研究的部分包括：

  • 嘗試在另一個 GroupBoxGroupBox 控制項內巢狀控制項。 將 Button 控制項放在子 GroupBox 控制項內，另一個放在父 GroupBox 控制項內。 Button移動控制項四處移動，以查看對齊線如何跨越容器界限。

  • 建立控制項的資料 TextBox 行和控制項的對應資料 Label 行。 將 Label 控制項的 AutoSize 屬性值設定為 true 。 使用對齊線來移動控制項， Label 使其顯示的文字與控制項中的 TextBox 文字對齊。

另請參閱