逐步解說：Windows Form 設計工具使用者入門
Windows Form 設計工具提供了許多建置 Windows Form 應用程式的工具， 本逐步解說將說明如何使用此設計工具所提供的各種工具來建置應用程式。 逐步解說將說明的工作包括：
建立 Windows Form 專案
使用對齊線排列控制項
使用智慧標籤完成設計工具的工作
設定控制項的邊界和邊框距離
使用 TableLayoutPanel 控制項排列控制項
使用 SplitContainer 控制項分割控制項的配置
使用 [文件大綱] 視窗巡覽配置
利用顯示的大小和位置資訊來放置控制項
使用 [屬性] 視窗設定屬性值。
完成時，就會得到一個使用 Windows Form 設計工具中許多可用的配置功能進行組譯的自訂控制項， 這個控制項會實作簡單計算機的使用者介面 (UI)， 下面的螢幕擷取畫面顯示了計算機控制項的一般配置。
計算機 UI
.gif "計算機 UI 導覽")
必要條件
若要完成這個逐步解說，您必須要有：
- 具有足夠的權限，以便能夠在安裝了 Visual Studio 的電腦上建立及執行 Windows Form 應用程式專案
.gif "注意事項") 注意事項 |
|---|
根據您目前使用的設定或版本，您所看到的對話方塊與功能表指令可能會與 [說明] 中描述的不同。若要變更設定，請從 [工具] 功能表中選擇 [匯入和匯出設定]。如需詳細資訊，請參閱 Visual Studio 設定。 |
建立自訂控制項專案
首先要建立 DemoCalculator 控制項專案。
若要建立自訂控制項專案
在 [檔案] 功能表上，指向 [新增]，然後按一下 [專案]，開啟 [新增專案] 對話方塊。
從 Visual Basic 或 Visual C# 專案清單的 [Windows] 分類中，選取 [Windows Form 控制項程式庫] 專案範本。
在 [名稱] 方塊中，輸入 DemoCalculatorLib，然後按一下 [確定]。
以滑鼠右鍵按一下 [方案總管] 中的 [UserControl1.vb] 或 [UserControl1.cs]，然後按一下 [重新命名]。
將檔案名稱變更為 DemoCalculator.vb 或 DemoCalculator.cs。 當詢問您是否要重新命名程式碼項目 "UserControl1" 的所有參考時，請按一下 [是]。
Windows Form 設計工具目前是顯示 DemoCalculator 控制項的「設計工具介面」。 在這個檢視中，您可以從 [工具箱] 選取控制項和元件，然後將它們放在設計工具介面上，藉由圖形化方式設計控制項的外觀。 如需自訂控制項的詳細資訊，請參閱各種自訂控制項。
設計控制項配置
DemoCalculator 控制項包含了幾個 Windows Form 控制項。 在這個程序中，您要使用 Windows Form 設計工具的一些快速應用程式開發 (Rapid Application Development，RAD) 功能來排列控制項。
若要設計控制項配置
在 Windows Form 設計工具中，按一下 DemoCalculator 控制項右下角的縮放控點，然後將它向右下方拖曳，以此方式將控制項變大。 在 Visual Studio 的右下角，尋找控制項的大小和位置資訊。 請一邊調整控制項大小一邊查看大小資訊，將控制項的寬度設為 500，高度設為 400。
在 [工具箱] 中，按一下 [容器] 節點將它打開。 選取 SplitContainer 控制項，然後將它拖曳至設計工具介面上。
SplitContainer 是放置在 DemoCalculator 控制項的設計工具介面上。
注意事項SplitContainer 控制項會調整自己的大小，以符合 DemoCalculator 控制項的大小。檢查 [屬性] 視窗以查看 SplitContainer 控制項的屬性設定。找出 Dock 屬性。它的值是 Fill，這表示 SplitContainer 控制項一定會將自己的大小調整到 DemoCalculator 控制項的界限。請重新調整 DemoCalculator 控制項的大小，以驗證這項行為。
在 [屬性] 視窗中，將 Dock 屬性的值變更為 None。
SplitContainer 控制項會縮回它的預設大小， 它的大小不再符合 DemoCalculator 控制項的大小。
按一下 SplitContainer 控制項右上角的智慧標籤圖像 (
.gif "智慧標籤圖像")
)。 按一下 [停駐於父容器中]，將 Dock 屬性設為 Fill。SplitContainer 控制項會停駐在 DemoCalculator 控制項的界限。
注意事項有幾個控制項會提供智慧標籤以協助設計。如需詳細資訊，請參閱逐步解說：使用 Windows Form 控制項中的智慧標籤執行一般工作。
按一下面板之間的垂直框線，將它拖曳至右邊，讓左邊的面板佔據大部分的空間。
SplitContainer 會將 DemoCalculator 控制項分割成兩個面板，以一條可移動的框線將它們隔開。 左邊的面板會裝載計算機的按鈕和顯示器，右邊的面板則會顯示使用者所執行的算術運算的記錄。
在 [屬性] 視窗中，將 BorderStyle 屬性的值變更為 Fixed3D。
在 [工具箱] 中，按一下 [通用控制項] 節點將它打開。 選取 ListView 控制項，並將它拖曳至 SplitContainer 控制項的右面板。
在智慧標籤面板中，按一下 [編輯資料行]。
[ColumnHeader 集合編輯器] 對話方塊隨即開啟。
在 [ColumnHeader 集合編輯器] 對話方塊中，按一下 [加入] 按鈕，將資料行加入至 ListView 控制項。 將資料行的 Text 屬性值變更為 History。 按一下 [確定] 建立資料行。
在智慧標籤面板中，按一下 [停駐於父容器中]，再按一下智慧標籤圖像以關閉智慧標籤面板。
從 [工具箱] 的 [容器] 節點中，將 TableLayoutPanel 控制項拖曳至 SplitContainer 控制項的左面板。
TableLayoutPanel 控制項就會出現在設計工具介面上，並開啟它的智慧標籤面板。 TableLayoutPanel 控制項會將它的子控制項排列在方格中。 如需詳細資訊，請參閱逐步解說：使用 TableLayoutPanel 排列 Windows Form 上的控制項。 TableLayoutPanel 控制項會裝載 DemoCalculator 控制項的顯示器和按鈕。
按一下智慧標籤面板上的 [編輯資料列與資料行]。
[資料行和資料列樣式] 對話方塊隨即開啟。
按一下 [加入] 按鈕，直到顯示了五個資料行。 選取這五個資料行，然後按一下 [大小類型] 方塊中的 [百分比] 選項按鈕。 將 [百分比] 值設為 20。 這樣可將每一個資料行都設為相同的寬度。
在 [顯示] 下拉式清單方塊中，按一下 [資料列]。
按一下 [加入] 按鈕，直到顯示了五個資料列。 選取這五個資料列，然後按一下 [大小類型] 方塊中的 [百分比] 選項按鈕。 將 [百分比] 值設為 20。 這樣可將每一個資料列都設為相同的高度。
按一下 [確定] 接受變更，然後按一下智慧標籤圖像以關閉智慧標籤面板。
填入控制項
現在已經設定好控制項的配置，您可以將按鈕和顯示器填入 DemoCalculator 控制項中。
若要填入控制項
在 [工具箱] 中，按兩下 TextBox 控制項圖示。
TableLayoutPanel 控制項的第一個儲存格中就會放入一個 TextBox 控制項。
在 [屬性] 視窗中，將 TextBox 控制項的 ColumnSpan 屬性的值變更為 5。
TextBox 控制項就會移至其所在資料列的中央位置。
將 TextBox 控制項的 Anchor 屬性的值變更為 Left、Right。
TextBox 控制項就會水平擴展成合併全部五個資料行。
在 [屬性] 視窗中，展開 Font 屬性節點。 將 TextBox 控制項的 Size 設為 14，並將 Bold 設為 true。
選取 TableLayoutPanel 控制項。
在 [工具箱] 中，按兩下 Button 圖示。
TableLayoutPanel 控制項的下一個開放的儲存格中就會放入一個 Button 控制項。
在 [工具箱] 中，按兩下 Button 圖示，連續四次，以填入 TableLayoutPanel 控制項的第二列。
按住 SHIFT 鍵再按一下 Button 控制項，將這五個控制項全部選起來。 按 CTRL+C 鍵將 Button 控制項複製到剪貼簿。
按 CTRL+V 鍵三次，將所複製的 Button 控制項貼入 TableLayoutPanel 控制項剩餘的資料列中。
按住 SHIFT 鍵再按一下 Button 控制項，將這 20 個控制項全部選起來。
在 [屬性] 視窗中，將 Dock 屬性的值變更為 Fill。
所有的 Button 控制項都會停駐並填滿所在的儲存格。
在 [屬性] 視窗中，展開 Margin 屬性節點。 將 All 的值設為 5。
所有 Button 控制項都會變得比較小，這樣它們之間就會有比較大的邊界。
選取 [button10] 和 [button20]，然後按 DELETE 將它們從配置中移除。
選取 [button5] 和 [button15]，然後將它們的 RowSpan 屬性的值變更為 2。 這兩個按鈕就是要當做 DemoCalculator 控制項的 [Clear] 和 [=] 按鈕。
使用文件大綱視窗巡覽控制項
當控制項或表單中填入幾個控制項時，您可能會發現比較容易使用 [文件大綱] 視窗來巡覽配置。
若要使用文件大綱視窗進行巡覽
在 [檢視] 功能表上，指向 [其他視窗]，然後按一下 [文件大綱]。
[文件大綱] 視窗會顯示 DemoCalculator 控制項與其構成控制項的樹狀檢視。 像 SplitContainer 這樣的容器控制項會在樹狀檢視中將它們的子控制項顯示成子節點。 您也可以使用 [文件大綱] 視窗就地重新命名控制項。
在 [文件大綱] 視窗中，以滑鼠右鍵按一下 [button1]，再按 [重新命名]。 將它的名稱變更為 sevenButton。
使用 [文件大綱] 視窗，依據下列清單將 Button 控制項原來由設計工具產生的名稱重新命名為實際執行名稱：
button1 改為 sevenButton
button2 改為 eightButton
button3 改為 nineButton
button4 改為 divisionButton
button5 改為 clearButton
button6 改為 fourButton
button7 改為 fiveButton
button8 改為 sixButton
button9 改為 multiplicationButton
button11 改為 oneButton
button12 改為 twoButton
button13 改為 threeButton
button14 改為 subtractionButton
button15 改為 equalsButton
button16 改為 zeroButton
button17 改為 changeSignButton
button18 改為 decimalButton
button19 改為 additionButton
使用 [文件大綱] 視窗和 [屬性] 視窗，依據下列清單變更每一個 Button 控制項名稱的 Text 屬性值：
將 sevenButton 控制項的文字屬性變更為 7
將 eightButton 控制項的文字屬性變更為 8
將 nineButton 控制項的文字屬性變更為 9
將 divisionButton 控制項的文字屬性變更為 /
將 clearButton 控制項的文字屬性變更為 Clear
將 fourButton 控制項的文字屬性變更為 4
將 fiveButton 控制項的文字屬性變更為 5
將 sixButton 控制項的文字屬性變更為 6
將 multiplicationButton 控制項的文字屬性變更為 *
將 oneButton 控制項的文字屬性變更為 1
將 twoButton 控制項的文字屬性變更為 2
將 threeButton 控制項的文字屬性變更為 3
將 subtractionButton 控制項的文字屬性變更為 -
將 equalsButton 控制項的文字屬性變更為 =
將 zeroButton 控制項的文字屬性變更為 0
將 changeSignButton 控制項的文字屬性變更為 +/-
將 decimalButton 控制項的文字屬性變更為 .
將 additionButton 控制項的文字屬性變更為 +
在設計工具介面上，按住 SHIFT 鍵再按一下 Button 控制項，將這些控制項全部選起來。
在 [屬性] 視窗中，展開 Font 屬性節點。 將所有 Button 控制項的 Size 設為 14，並將 Bold 設為 true。
這樣便完成了 DemoCalculator 控制項的設計， 剩下來的就只是提供計算機邏輯。
實作事件處理常式
DemoCalculator 控制項上的按鈕具有事件處理常式，可以用來實作很多計算機邏輯。 Windows Form 設計工具可讓您以一個按兩下的動作實作所有按鈕的所有事件處理常式的 Stub。
若要實作事件處理常式
測試控制項
因為 DemoCalculator 控制項是繼承自 UserControl 類別，所以您可以使用 [使用者控制項測試容器] 測試它的行為。 如需詳細資訊，請參閱 如何：測試 UserControl 的執行階段行為。
若要測試控制項
按下 F5 鍵，在 [使用者控制項測試容器] 中建置及執行 DemoCalculator 控制項。
按一下 SplitContainer 面板之間的框線，將它向左向右拖曳。 TableLayoutPanel 與其所有子控制項都會調整自己的大小以符合可用的空間。
當您完成控制項測試時，按一下 [關閉]。
在表單上使用控制項
您可以在其他複合控制項或表單上使用 DemoCalculator 控制項。 下列程序將說明它的使用方法。
.gif "9ew6tzdt.collapse_all(zh-tw,VS.110).gif")
建立專案
首先建立應用程式物件。 您要使用這個專案來建置會顯示自訂控制項的應用程式。
若要建立專案
在 [檔案] 功能表上，指向 [加入]，然後按一下 [新增專案]，開啟 [新增專案] 對話方塊。
從 Visual Basic 或 Visual C# 專案清單中，選取 [Windows Form 控制項程式庫] 專案範本。
在 [名稱] 方塊中，輸入 DemoCalculatorTest，然後按一下 [確定]。
在 [方案總管] 中，以滑鼠右鍵按一下 [DemoCalculatorTest] 專案，然後按一下 [加入參考] 開啟 [加入參考] 對話方塊。
按一下 [專案] 索引標籤，再按兩下您的 DemoCalculatorLib 專案，將參考加入至測試專案中。
在 [方案總管] 中，以滑鼠右鍵按一下 [DemoCalculatorTest]，然後按一下 [設定為啟始專案]。
在 Windows Form 設計工具中，將表單的大小增加為 700 x 500。
在表單配置中使用控制項
若要在應用程式中使用 DemoCalculator 控制項，您必須要將它放在表單上。
若要在表單配置中使用控制項
在 [工具箱] 中，展開 [DemoCalculatorLib 元件] 節點。
從 [工具箱] 將 [DemoCalculator] 控制項拖曳至表單。 將控制項移到表單左上角。 當控制項接近表單的框線時，您會看到「對齊線」出現， 這些對齊線是表示表單的 Padding 屬性和控制項的 Margin 屬性的距離。 將控制項定位在對齊線所指示的位置。
如需詳細資訊，請參閱逐步解說：使用對齊線排列 Windows Form 上的控制項。
從 [工具箱] 將 Button 控制項拖曳至表單上。
在 DemoCalculator 控制項四周移動 Button 控制項，觀察對齊線會出現在哪裡。 您可以使用這項功能準確而輕鬆地對齊控制項。 當您完成時，請刪除 Button 控制項。
以滑鼠右鍵按一下 DemoCalculator 控制項，然後按一下 [屬性]。
選取表單，然後展開 Padding 屬性節點。 將 [全部] 的值變更為 20。
DemoCalculator 控制項的大小會縮小以符合表單新的 Padding 值。
將各個縮放控點拖曳至不同的位置，以調整表單的大小。 請觀察 DemoCalculator 控制項是如何調整成適當大小。
後續步驟
本逐步解說示範了如何建構簡單計算機的使用者介面， 您可以利用下列方式來擴展它的功能：
實作計算機邏輯。 這似乎很簡單，然而計算機的狀態轉換卻有些複雜。
封裝計算機應用程式以供部署。 如需詳細資訊，請參閱 如何：使用發行精靈發行 ClickOnce 應用程式。
請參閱
工作
逐步解說：使用 TableLayoutPanel 排列 Windows Form 上的控制項
逐步解說：使用對齊線排列 Windows Form 上的控制項