更新：2010 年 9 月
Windows 窗體設計器提供多個用於生成 Windows 窗體應用程序的工具。 本演練闡釋如何使用設計器提供的各種工具生成應用程序。 本演練涉及以下任務：
-
創建一個 Windows 窗體項目。
-
使用對齊線排列控件。
-
使用智能標記完成設計器任務。
-
設置控件的邊距。
-
使用 TableLayoutPanel 控件排列控件。
-
使用 SplitContainer 控件對控件的布局進行分區。
-
使用“文檔大綱”窗口瀏覽您的布局。
-
通過顯示的大小和位置信息來定位控件。
-
使用“屬性”窗口設置屬性值。
完成以上步驟后，您就會得到一個使用 Windows 窗體設計器中提供的多個布局功能組裝起來的自定義控件。 此控件實現的是一個簡單計算器的用戶界面 (UI)。 下面的屏幕快照顯示該計算器控件的常規布局。
若要完成本演練，您需要：
-
足夠的權限，以便能夠在安裝 Visual Studio 的計算機上創建並運行 Windows 窗體應用程序項目。
| 顯示的對話框和菜單命令可能會與“幫助”中的描述不同，具體取決於您現用的設置或版本。 若要更改設置，請在“工具”菜單上選擇“導入和導出設置”。 有關更多信息，請參見 使用設置。 |
第一步是創建 DemoCalculator 窗體項目。
創建自定義控件項目
-
在“文件”菜單上，指向“新建”，然后單擊“項目”以打開“新建項目”對話框。
-
從“Windows”類別中的 Visual Basic 或 Visual C# 項目列表中，選擇“Windows 窗體控件庫”項目模板。
-
在“名稱”框中鍵入 DemoCalculatorLib，然后單擊“確定”。
-
在解決方案資源管理器中，右擊“UserControl1.vb”或“UserControl1.cs”，再單擊“重命名”。
-
將文件名更改為 DemoCalculator.vb 或 DemoCalculator.cs。 當系統詢問是否重命名對代碼元素“UserControl1”的所有引用時，單擊“是”按鈕。
Windows 窗體設計器當前顯示 DemoCalculator 控件的設計器圖面。 在此視圖中，從工具箱選擇控件和組件，然后將所選控件和組件放置在設計器圖面上，便可以通過圖形方式設計控件的外觀。 有關自定義控件的更多信息，請參見 各種自定義控件。
DemoCalculator 控件包含多個 Windows 窗體控件。 在此過程中，將使用 Windows 窗體設計器的一些快速應用程序開發 (RAD) 功能排列控件。
設計控件布局
-
在 Windows 窗體設計器中，單擊右下角的尺寸控點並將其向右下方拖動，可以增大 DemoCalculator 控件的尺寸。 在 Visual Studio 的右下角找到控件的大小和位置信息。 在調整控件大小時注意該控件的大小信息，將該控件的寬度設置為 500，高度設置為 400。
-
在工具箱中，單擊“容器”節點以打開該節點。 選擇 SplitContainer 控件並將該控件拖動到設計器圖面上。
將 SplitContainer 放置在 DemoCalculator 控件的設計器圖面上。
SplitContainer 控件會調整自身大小以適應 DemoCalculator 控件的大小。 檢查“屬性”窗口以查看 SplitContainer 控件的屬性設置。 找到 Dock 屬性。 該屬性的值為 Fill，表示 SplitContainer 控件的大小始終按照DemoCalculator 控件的邊界來調整。 調整 DemoCalculator 控件的大小以確認此行為。
-
SplitContainer 控件將縮小到其默認大小。 該控件的大小不再符合 DemoCalculator 控件的大小。
-
單擊 SplitContainer 控件右上角的智能標記標志符號 (
)。 單擊“在父容器中停靠”，將 Dock 屬性設置為 Fill。SplitContainer 控件將停靠至 DemoCalculator 控件的邊界。
有些控件提供了智能標記以便於設計。 有關更多信息，請參見 演練：使用 Windows 窗體控件上的智能標記執行常規任務。
-
單擊面板之間的豎框線並將其拖動至右側，從而使左面板占據大部分空間。
SplitContainer 使用分隔面板的可移動框線將 DemoCalculator 控件分成兩個面板。 左側的面板包含計算器按鈕和顯示器，右側面板顯示用戶執行的算術運算的記錄。
-
在“屬性”窗口中，將 BorderStyle 屬性的值更改為 Fixed3D。
-
在工具箱中，單擊“公共控件”節點以打開該節點。 選擇 ListView 控件並將其拖動至 SplitContainer 控件的右面板。
-
在智能標記面板中，單擊“編輯列”。
“ColumnHeader 集合編輯器”對話框打開。
-
在“ColumnHeader 集合編輯器”對話框中，單擊“添加”按鈕向 ListView 控件添加一列。 將列的 Text 屬性值更改為“歷史記錄”。 單擊“確定”創建該列。
-
在智能標記面板中，單擊“在父容器中停靠”，然后單擊智能標記標志符號以關閉智能標記面板。
-
在工具箱的“容器”節點中，將 TableLayoutPanel 控件拖入 SplitContainer 控件的左面板。
TableLayoutPanel 控件顯示在設計器圖面上，並且該控件的智能標記面板打開。 TableLayoutPanel 控件在一個網格內排列其子控件。 有關更多信息，請參見 演練：使用 TableLayoutPanel 在 Windows 窗體上排列控件。TableLayoutPanel 控件將包含 DemoCalculator 控件的顯示器和按鈕。
-
單擊智能標記面板上的“編輯行和列”。
“列和行樣式”對話框打開。
-
單擊“添加”按鈕，直到五列均顯示出來。 選擇全部五列，然后單擊“大小類型”框中的“百分比”選項按鈕。 將“百分比”值設置為 20。 此操作將每一列設置為同一寬度。
-
在“顯示”下拉框中單擊“行”。
-
單擊“添加”按鈕，直到五行均顯示出來。 選擇全部五行，然后單擊“大小類型”框中的“百分比”選項按鈕。 將“百分比”值設置為 20。 此操作將每一行設置為同一高度。
-
單擊“確定”接受所做的更改，然后單擊智能標記標志符號以關閉智能標記面板。
至此，您已設置了控件的布局，現在可以用按鈕和顯示器填充 DemoCalculator 控件。
填充控件
-
在工具箱中，雙擊 TextBox 控件圖標。
TextBox 控件將放置在 TableLayoutPanel 控件的第一個單元格中。
-
在“屬性”窗口中，將 TextBox 控件的 ColumnSpan 屬性值更改為 5。
TextBox 控件移動到其所在行的中間位置。
-
將 TextBox 控件的 Anchor 屬性的值更改為 Left、Right。
TextBox 控件水平擴展以跨越所有五列。
-
在“屬性”窗口中，展開 Font 屬性節點。 將 Size 設置為 14，並將 TextBox 控件的 Bold 設置為 true。
-
選擇 TableLayoutPanel 控件。
-
在工具箱中，雙擊 Button 圖標。
Button 控件將放置在 TableLayoutPanel 控件的下一個打開的單元格中。
-
在工具箱中，雙擊 Button 圖標四次以填充 TableLayoutPanel 控件的第二行。
-
按住 Shift 鍵，同時單擊各個 Button 控件，將所有五個控件都選中。 按 Ctrl+C 將 Button 控件復制到剪貼板。
-
按 Ctrl+V 三次將 Button 控件的副本粘貼到 TableLayoutPanel 控件的其余行。
-
按住 Shift 鍵，同時單擊各個 Button 控件，將所有 20 個控件都選中。
-
所有 Button 控件都將停靠，以填充其所在的單元格。
-
在“屬性”窗口中，展開 Margin 屬性節點。 將 All 的值設置為 5。
所有 Button 控件都將縮小，以增加其相互之間的邊距。
-
選擇“button10”和“button20”，然后按 Delete 鍵將其從布局中刪除。
-
選擇“button5”和“button15”，然后將這兩個按鈕的 RowSpan 屬性的值更改為 2。 這兩個按鈕將成為 DemoCalculator 控件的“清除”和“=”按鈕。
使用多個控件填充了您的控件或窗體后，您可以發現，通過“文檔大綱”窗口瀏覽您的布局更容易找到自己的控件或窗體。
使用“文檔大綱”窗口定位
-
在“視圖”菜單上指向“其他窗口”，然后單擊“文檔大綱”。
“文檔大綱”窗口將顯示 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 屬性節點。 將 Size 設置為 14，並將所有 Button 控件的 Bold 設置為 true。
這將完成 DemoCalculator 控件的設計。 剩下的工作是提供計算器邏輯。
由於 DemoCalculator 控件是從 UserControl 類繼承的，因此，可以使用“UserControl 測試容器”測試該控件的行為。 有關更多信息，請參見 如何：測試 UserControl 的運行時行為。
測試控件
-
按 F5 鍵在“UserControl 測試容器”中生成並運行 DemoCalculator 控件。
-
單擊 SplitContainer 面板之間的框線並左右拖動。 TableLayoutPanel 及其所有子控件將調整自身大小以適應可用空間。
-
測試控件后，單擊“關閉”。
DemoCalculator 控件可以在其他復合控件或在某個窗體上使用。 下面的過程介紹如何使用該控件。
創建項目
第一步是創建應用程序項目。 您將使用此項目生成顯示自定義控件的應用程序。
創建項目
-
在“文件”菜單上，指向“添加”，然后單擊“新建項目”打開“新建項目”對話框。
-
從 Visual Basic 或 Visual C# 項目列表中，選擇“Windows 窗體應用程序”項目模板。
-
在“名稱”框中鍵入 DemoCalculatorTest，然后單擊“確定”。
-
在解決方案資源管理器中，右擊“DemoCalculatorTest”項目，然后單擊“添加引用”以打開“添加引用”對話框。
-
單擊“項目”選項卡，然后雙擊 DemoCalculatorLib 項目以添加對測試項目的引用。
-
在解決方案資源管理器中，右擊 DemoCalculatorTest，然后單擊“設為啟動項目”。
-
在 Windows 窗體設計器中，將窗體的大小增加至 700 x 500 左右。
在窗體布局中使用您的控件
要在應用程序中使用 DemoCalculator 控件，需要將該控件放置在一個窗體上。
在窗體布局中使用您的控件
-
在工具箱中，展開“DemoCalculatorLib 組件”節點。
-
從工具箱中將 DemoCalculator 控件拖到窗體上。 將控件移動到窗體的左上角。 當控件接近窗體邊框時，將顯示對齊線。 這些對齊線指示窗體的 Padding 屬性和控件的 Margin 屬性的距離。 將該控件放置在對齊線指示的位置。
有關更多信息，請參見演練：使用對齊線在 Windows 窗體上排列控件。
-
將 Button 控件從工具箱拖放到窗體上。
-
在 DemoCalculator 控件周圍移動 Button 控件，並觀察對齊線出現的位置。 使用此功能來對齊控件既精確又容易。 完成后刪除 Button 控件。
-
右擊 DemoCalculator 控件，然后單擊“屬性”。
-
選擇窗體，然后展開 Padding 屬性節點。 將值“全部”更改為 20。
DemoCalculator 控件將根據窗體的新 Padding 值相應縮小。
-
通過將各個尺寸控點拖動到不同位置來調整窗體大小。 觀察 DemoCalculator 控件的大小是如何相應調整的。
本演練已演示了如何構造簡單計算器的用戶界面。 您可能希望通過以下方式擴展其功能：
-
實現計算器邏輯。 這種方式似乎很簡單，但與計算器的狀態轉換關聯的復雜性也很有意思。
-
將計算器應用程序打包以進行部署。 有關更多信息，請參見如何：使用發布向導發布 ClickOnce 應用程序。