共用方式為


逐步解說:使用對齊線排列 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,Windows Forms 設計工具會為表單提供 9,9,9,9 的遮蔽 Padding 值 (英文)。 若要覆寫此行為,請指派 0,0,0,0 以外的值。

  2. 展開 [屬性] 視窗的 Margin 項目 (英文),將 All 屬性 (英文) 設定為 0,以變更 Button 控制項 (部分機器翻譯) 的 Margin 屬性值 (英文)。 如需詳細資料,請參閱逐步解說:使用邊框距離、邊界和 AutoSize 屬性配置 Windows Forms 控制項

  3. Button 控制項 (部分機器翻譯) 朝表單的右框線移動,直到出現對齊線為止。 此距離現在是由表單的 Padding 屬性值 (英文) 所指定。

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

  5. 展開 [屬性] 視窗的 Padding 項目 (英文),將 All 屬性 (英文) 設為 10,以變更 GroupBox 控制項 (部分機器翻譯) 的 Padding 屬性值 (英文)。

  6. Button 控制項 (部分機器翻譯) 從 [工具箱] 拖曳至 GroupBox 控制項 (部分機器翻譯)。

  7. Button 控制項 (部分機器翻譯) 朝 GroupBox 控制項 (部分機器翻譯) 的右框線移動,直到出現對齊線為止。 移動 GroupBox 控制項 (部分機器翻譯) 內的 Button 控制項 (部分機器翻譯),並注意顯示對齊線的位置。

對齊至群組控制項

您可以使用對齊線來對齊群組控制項,以及 GroupBox 控制項 (部分機器翻譯) 內的控制項。

  1. 選取表單上的兩個控制項。 移動選取項目,並注意在選取項目與其他控制項之間出現的對齊線。

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

  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. 從 [工具箱] Button 控制項拖曳至表單。 當您將 TextBox 控制項 (部分機器翻譯) 放到表單上時,按一下智慧標籤字符,然後選取 [將文字設定為 textBox1] 選項。 如需詳細資料,請參閱逐步解說:使用設計工具動作執行一般工作 (部分機器翻譯)。

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

  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. 從 [工具箱] Button 控制項拖曳至表單。

  2. 在 [工具箱] Button中按兩下控制項圖示。 請注意,新的按鈕控制項會出現在 TableLayoutPanel 控制項 (部分機器翻譯) 的第一個儲存格中。

  3. 在 [工具箱] 中按兩下 Button 控制項 (部分機器翻譯) 圖示兩次。 這會在 TableLayoutPanel 控制項 (部分機器翻譯) 中保留一個空白儲存格。

  4. Button 控制項 (部分機器翻譯) 從 [工具箱] 拖曳至 TableLayoutPanel 控制項 (部分機器翻譯) 的空白儲存格。 請注意螢幕上並沒有出現任何對齊線。

  5. Button 控制項 (部分機器翻譯) 從 TableLayoutPanel 控制項 (部分機器翻譯) 拖曳出來,並將其在 TableLayoutPanel 控制項 (部分機器翻譯) 內四處移動。 請注意對齊線又再次出現。

停用對齊線

在將控制項於表單中四處移動時,按 Alt 鍵。

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

停用設計環境中的對齊線

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

  2. 選取 [一般] 節點。 在 [配置模式] 區段中,將選取項目從 [SnapLines] 變更為 [SnapToGrid]

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

  4. 選取表單上的控制項,並將其在其他控制項上方四處移動。 請注意對齊線已不再會出現。

下一步

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

  • 嘗試將 GroupBox 控制項 (部分機器翻譯) 以巢狀方式放在另一個 GroupBox 控制項 (部分機器翻譯) 中。 將 Button 控制項 (部分機器翻譯) 放在子 GroupBox 控制項 (部分機器翻譯) 內,並將另一個控制項放在父 GroupBox 控制項 (部分機器翻譯) 內。 四處移動 Button 控制項 (部分機器翻譯),以查看對齊線如何跨越容器界限。

  • 建立 TextBox 控制項 (部分機器翻譯) 的資料行,以及 Label 控制項 (部分機器翻譯) 的對應資料行。 將 Label 控制項 (部分機器翻譯) 的 AutoSize 屬性值 (部分機器翻譯) 設定為 true。 使用對齊線來移動 Label 控制項 (部分機器翻譯),使其顯示的文字與 TextBox 控制項 (部分機器翻譯) 中的文字對齊。

另請參閱