逐步解說：建立適用於資料輸入且可調整大小的 Windows Form

發行項
08/21/2008

更新：2007 年 11 月

大小恰當的表單可以增進使用者介面的可用性。

本逐步解說將說明如何建立當使用者調整表單大小時也會依比例調整的配置，您要使用 TableLayoutPanel 控制項，以實作用來輸入連絡人資訊的資料輸入表單。

逐步解說將說明的工作包括：

建立專案
建立配置面板
設定配置方格
建立姓名欄位
建立地址欄位
建立電話號碼欄位
建立備註欄位

當完成時，表單會如下圖所示：

具有 TableLayoutPanel 的基本資料輸入表單

若要將此主題中的程式碼複製為一份清單，請參閱 HOW TO：建立適用於資料輸入且可調整大小的 Windows Form。

注意事項：
根據目前使用的設定與版本，您所看到的對話方塊與功能表命令可能會與 [說明] 中所描述的不同。若要變更設定，請從 [工具] 功能表中選擇 [匯入和匯出設定]。如需詳細資訊，請參閱 Visual Studio 設定。

必要條件

若要完成這個逐步解說，您必須要有：

擁有足夠的使用權限，可以在安裝 Visual Studio 的電腦上建立並執行 Windows Form 應用程式專案。

建立專案

首先建立應用程式物件。使用這個專案來建置會顯示資料輸入表單的應用程式。

若要建立專案

建立稱為 DemoDataEntryLayout 的 Windows 應用程式專案。如需詳細資訊，請參閱 HOW TO：建立 Windows 應用程式專案

建立配置面板

接下來要建立包含可調整大小之配置的配置面板。

若要建立配置面板

從 [表單設計工具] 中選取表單。
從 [工具箱] 將 TableLayoutPanel 控制項拖曳至表單。
在 [屬性] 視窗中，將 TableLayoutPanel 控制項的 Dock 屬性值變更為 Fill。
將 ColumnCount 屬性的值變更為 4，並將 RowCount 屬性的值變更為 6。

設定配置方格

下一個步驟是要指定配置方格。設定 ColumnStyles 和 RowStyles 集合中的屬性，以決定當表單的維度變更時資料行和資料列調整大小的方式。

若要設定配置方格

按一下 TableLayoutPanel 控制項的智慧標籤圖像 ()，然後選取 [編輯資料列與資料行] 以開啟 [資料行和資料列樣式] 對話方塊。如需詳細資訊，請參閱 HOW TO：編輯 TableLayoutPanel 控制項中的資料行和資料列。
從 [顯示] 下拉式方塊中選取 [資料行]。
選取第一個資料行，然後將它的 SizeType 屬性的值變更為 Percent。將 [百分比] NumericUpDown 控制項的值設為 25。這個資料行將會裝載 Label 控制項。
選取第二個資料行，將其 SizeType 屬性的值變更為 Percent。將 [百分比] NumericUpDown 控制項的值設為 50。這個資料行將會裝載 TextBox 控制項，做為資料輸入欄位。
選取第三個資料行，將其 SizeType 屬性的值變更為 Percent。將 [百分比] NumericUpDown 控制項的值設為 25。這個資料行將會裝載 Label 控制項。
選取第四個資料行，將其 SizeType 屬性的值變更為 Percent。將 [百分比] NumericUpDown 控制項的值設為 50。這個資料行將會裝載 TextBox 控制項，做為資料輸入欄位。
從 [顯示] 下拉式方塊中選取 [資料列]。
針對前五個資料列，將 SizeType 屬性的值設為 Absolute，並將 [絕對] NumericUpDown 控制項的值設為 28。針對第六個資料列，將 SizeType 屬性的值設為 Percent，並將 [百分比] NumericUpDown 控制項的值設為 80。
按一下 [確定] 接受變更。

以控制項填入配置

現在您可以開始以控制項填入配置。這個資料輸入表單是用來輸入連絡人資訊，所以它提供了姓氏、名字、地址、電話號碼以及備註等欄位。下面清單列出建立這些控制項的順序：

姓名欄位
地址欄位
電話號碼欄位
備註欄位

建立姓名欄位

姓名輸入欄位要放在 TableLayoutPanel 控制項的第一列。這包括了用於名字的 Label 控制項和 TextBox 控制項，以及用於姓氏的 Label 控制項和 TextBox 控制項。

若要建立姓名欄位

從 [工具箱] 將 Label 控制項拖曳至 TableLayoutPanel 控制項的第一個儲存格。
在 [屬性] 視窗中，將 Label 控制項的 Anchor 屬性值設為 Right。
將 AutoSize 屬性值設定為 true。
將 Text 屬性的值設為 [名字]。
從 [工具箱] 將 TextBox 控制項拖曳至第一列的第二個儲存格，放在 Label 控制項旁邊。
將 TextBox 控制項的 Anchor 屬性值設定為 Left、Right。
從 [工具箱] 將 Label 控制項拖曳至第一列的第三個儲存格。將 Label 控制項的 Anchor 屬性的值設為 Right。將 AutoSize 屬性值設定為 true。將 Text 屬性的值設為 [姓氏]。
從 [工具箱] 將 TextBox 控制項拖曳至第一列的第四個儲存格。將 TextBox 控制項的 Anchor 屬性值設定為 Left、Right。

建立地址欄位

地址欄位會佔據第二、第三和第四列，因為地址可能會很長，所以 Address1 和 Address2 欄位要合併三個資料行。

若要建立地址欄位

從 [工具箱] 將 Label 控制項拖曳至第二列的第一個儲存格。
在 [屬性] 視窗中，將 Label 控制項的 Anchor 屬性值設為 Right。將 AutoSize 屬性值設定為 true。將 Text 屬性的值設為 [地址 1]。
從 [工具箱] 將 TextBox 控制項拖曳至第二列的第二個儲存格，放在 Label 控制項旁邊。
將 TextBox 控制項的 Anchor 屬性值設定為 Left、Right。
將 [ColumnSpan] 屬性的值設為 3。這個屬性是由 TableLayoutPanel 控制項所提供。如需所提供的屬性的詳細資訊，請參閱擴充性提供者概觀。
針對第三列重複執行步驟 1 到 5。將 Label 控制項的 Text 屬性的值設為 [地址 2]。
從 [工具箱] 將 Label 控制項拖曳至第四列的第一個儲存格。
將 Label 控制項的 Anchor 屬性的值設為 Right。將 AutoSize 屬性值設定為 true。將 Text 屬性的值設為 [城市]。
從 [工具箱] 將 TextBox 控制項拖曳至第四列的第二個儲存格，放在 Label 控制項旁邊。
將 TextBox 控制項的 Anchor 屬性值設定為 Left、Right。
從 [工具箱] 將 Label 控制項拖曳至第四列的第三個儲存格。
將 Label 控制項的 Anchor 屬性的值設為 Right。將 AutoSize 屬性值設定為 true。將 Text 屬性的值設為 [省/市]。
從 [工具箱] 將 ComboBox 控制項拖曳至第四列的第四個儲存格。
將 ComboBox 控制項的 Anchor 屬性的值設為 Left。將 FormattingEnabled 屬性值設定為 true。

建立電話號碼欄位

電話號碼欄位會佔據第五列，為了確保使用者只能輸入有效的電話號碼，請以 MaskedTextBox 控制項來實作此欄位。

若要建立電話號碼欄位

從 [工具箱] 將 Label 控制項拖曳至第五列的第一個儲存格。
在 [屬性] 視窗中，將 Label 控制項的 Anchor 屬性值設為 Right。將 AutoSize 屬性值設定為 true。將 Text 屬性的值設為 [電話 (工作)]。
從 [工具箱] 將 MaskedTextBox 控制項拖曳至第五列的第二個儲存格。
將 MaskedTextBox 控制項的 Anchor 屬性的值設為 Left。
按一下 MaskedTextBox 控制項上的智慧標籤 ()，以開啟 Mask 編輯器。
在 [輸入遮罩] 對話方塊中，選取 [電話號碼] 遮罩。按一下 [確定]。
針對家用電話號碼欄位，重複執行步驟 1 到 5。將 Text 屬性的值設為 [電話 (家用)]。

建立備註欄位

最後一個欄位會佔據第六列，這個欄位是用來輸入備註，可允許輸入任何型式的文字。

若要建立備註欄位

從 [工具箱] 將 Label 控制項拖曳至第六列的第一個儲存格。
在 [屬性] 視窗中，將 Label 控制項的 Anchor 屬性的值設為 Top、Right。將 AutoSize 屬性值設定為 true。將 Text 屬性的值設為 [備註]。
從 [工具箱] 將 RichTextBox 控制項拖曳至第六列的第二個儲存格。
將 [ColumnSpan] 屬性的值設為 3。
將 RichTextBox 控制項的 Dock 屬性的值設為 Fill。

完成配置方格設定

最後一個步驟是完成配置方格設定。第一個和第三個資料行應該設定為 AutoSize。因為您已在這些資料行中放置控制項，所以在設計階段可以看到這些資料行。

若要設定配置方格

選取 TableLayoutPanel 控制項，再按一下它的智慧標籤圖像 (Glyph) ()。選取 [編輯資料列與資料行] 開啟 [資料行和資料列樣式] 對話方塊。如需詳細資訊，請參閱 HOW TO：編輯 TableLayoutPanel 控制項中的資料行和資料列。
從 [顯示] 下拉式方塊中選取 [資料行]。
選取第一個和第三個資料行，然後將 SizeType 屬性的值變更為 AutoSize。
按一下 [確定] 接受變更。