共用方式為

教學課程：開始使用 Windows Forms 設計工具

  • 發行項

Windows Forms 設計工具提供許多工具來建置 Windows Forms 應用程式。 本文說明如何使用設計工具所提供的各種工具來建置應用程式，包括下列工作：

  • 使用對齊線排列控制項。
  • 使用智慧標記來完成設計師任務。
  • 設定控件的邊界和邊框間距。
  • 使用 TableLayoutPanel 控件排列控件。
  • 使用 SplitContainer 控件分割控制項的布局。
  • 使用 [文件大綱] 視窗瀏覽您的版面配置。
  • 顯示大小和位置資訊的位置控制件。
  • 使用 [屬性] 視窗設定屬性值。

當您完成時，您將有一個自定義控件，該控件是使用 Windows Forms 設計工具中提供的許多版面配置功能所組合的。 此控制項會實作簡單計算機的使用者介面 （UI）。 下圖顯示計算機控制元件的一般設定：

計算器控制項完整使用者介面的螢幕截圖。

提示

如果您是C++開發人員，並正在尋找可協助您建立包含表單和控件的 Windows 應用程式教學課程，請參閱 建立表單型 MFC 應用程式。 如需更一般化的資訊，請參閱 C++中的 Windows 程式設計概觀。

建立自定義控件專案

第一個步驟是建立 DemoCalculator 控件專案。

  1. 開啟 Visual Studio，使用適用於 C# 或 Visual Basic 的 .NET Framework 範本，創建一個新的 Windows Forms 控制項庫 專案。 將項目命名 DemoCalculatorLib。

    Visual Studio 中 Windows Forms 控件連結庫範本的螢幕快照。

  2. 若要重新命名檔案，請在 [方案總管]中，以滑鼠右鍵按兩下 [UserControl1.vb] 或 [UserControl1.cs]，選取 [重新命名]，然後將檔名變更為 [DemoCalculator.vb] 或 [DemoCalculator.cs]。 當系統詢問您是否要重新命名程式碼元素「UserControl1」的所有引用時，請選取 [是]。

Windows Forms 設計工具會顯示 DemoCalculator 控件的設計工具介面。 在此檢視中，您可以從 [工具箱] 選取控件和元件，並將其放在設計工具介面上，以圖形方式設計控件的外觀。 如需自定義控件的詳細資訊，請參閱 自定義控件的品種。

設計控制項配置

DemoCalculator 控件包含數個 Windows Forms 控件。 在此程式中，您將使用 Windows Forms 設計工具來排列控件。

  1. 在 Windows Forms 設計工具中，將 DemoCalculator 控件的大小變更為較大，方法是選取右下角的調整控點，然後拖曳它以調整大小。 在 Visual Studio 右下角，尋找控件的大小和位置資訊。 將控制項的大小設定為寬度 1000 和高度 800，請在調整控制項大小時參考尺寸資訊。 您也可以向下捲動到 [屬性] 視窗的底部，此視窗通常會停駐於右下角位置，然後手動輸入 [Size] 屬性中的值。

  2. 在 [工具箱]中，選取 [容器] 節點來開啟它。 選取 SplitContainer 控件，然後將它拖曳到設計工具介面上。

    SplitContainer 被放置在 DemoCalculator 控件的設計面板上。

    提示

    SplitContainer 控件會調整本身的大小，以符合 DemoCalculator 控件的大小。 查看 [屬性] 視窗，以查看 SplitContainer 控件的屬性設定。 尋找 Dock 屬性。 其值為 DockStyle.Fill，這表示 SplitContainer 控件將始終調整自身大小以符合 DemoCalculator 控件的邊界。 調整 DemoCalculator 控件的大小，以確認此行為。

  3. 在 [屬性] 視窗中，將 Dock 屬性的值變更為 None。

    SplitContainer 控件會縮小為預設大小，不再遵循DemoCalculator控件的大小。

  4. 選取 SplitContainer 控件右上角的智慧標籤圖示（Smart Tag Glyph）。 在父容器 中選取 [ Dock]，將 Dock 屬性設定為 Fill。

    SplitContainer 控制項對接到 DemoCalculator 控制項的邊界。

    注意

    數個控件提供智慧標記來協助設計。 如需詳細資訊，請參閱 逐步解說：在 Windows Forms 控件上使用智慧標記執行一般工作。

  5. 選取面板之間的垂直框線，並將其拖曳到右側，讓左面板佔用大部分的空間。

    SplitContainer 會將DemoCalculator控件分成兩個面板，其中可移動的框線會加以分隔。 左邊的面板會保留計算機按鈕並顯示，右邊的面板會顯示使用者所執行算術運算的記錄。

  6. 在 [屬性] 視窗中，將 BorderStyle 屬性的值變更為 Fixed3D。

  7. 在 [工具箱] 中，選取 [通用控件] 節點以開啟它。 選取 ListView 控件，並將其拖曳到 SplitContainer 控件的右面板中。

  8. 選取 ListView 控件的智慧標記圖像。 在智慧標記面板中，將 [View] 設定變更為 Details。

  9. 在智慧標記面板中，選取 [編輯資料行]。

    ColumnHeader 集合編輯器 對話框隨即開啟。

  10. 在 [ColumnHeader 集合編輯器] 對話框中，選取 [新增]，將數據行新增至 ListView 控件。 將資料列的 Text 屬性值變更為 History。 選取 [確定] 以建立欄。

  11. 在智慧標記面板中，選取 [父容器] 中的 [Dock]，然後選取智慧標記字元以關閉智慧標記面板。

  12. 從 [容器] 節點 [工具箱]，將 TableLayoutPanel 控制項拖曳到 SplitContainer 控制項的左面板中。

    TableLayoutPanel 控件會出現在設計工具介面上，其智慧標記面板已開啟。 TableLayoutPanel 控件會在方格中排列其子控件。 TableLayoutPanel 控件會保存DemoCalculator控件的顯示和按鈕。 如需詳細資訊，請參閱 逐步解說：使用 TableLayoutPanel排列控件。

  13. 選取智慧標記面板上的 編輯列和行。

    列與行樣式 對話框開啟。

  14. 選取 新增 按鈕，直到顯示五個欄為止。 選取所有五欄，然後在 [大小類型] 方塊中選取 [百分比]。 將 Percent 值設定為 20。 此動作會將每個數據行設定為相同的寬度。

  15. 在 [顯示] 中，選取 [列]。

  16. 選取 ，添加，直到顯示五列資料。 選取所有五列，然後在 類型大小 方塊中選取 百分比。 將 Percent 值設定為 20。 此動作會將每個數據列設定為相同的高度。

  17. 選取 [確定] 以接受您的變更，然後選取智慧標記圖像以關閉智慧標記面板。

  18. 在 [屬性] 視窗中，將 Dock 屬性的值變更為 Fill。

填入數據到控件

現在已設置控制版面的配置，您可以將按鈕和顯示器加入 DemoCalculator 控制項中。

  1. 在 [工具箱]中，選取 TextBox 控件圖示。

    TextBox 控件會放在 TableLayoutPanel 控件的第一個儲存格中。

  2. 在 [Properties] 視窗中，將 TextBox 控件的 ColumnSpan 屬性的值變更為 5。

    TextBox 控件會移至其所在行的中央位置。

  3. 將 TextBox 控制件 Anchor 屬性的值變更為 Left，Right。

    TextBox 控件會水平展開以跨越所有五個欄。

  4. 將 TextBox 控制件的 TextAlign 屬性值變更為 Right。

  5. 在 [屬性] 視窗中，展開 [Font 屬性] 節點。 將 Size 設定為 14，並為 TextBox 控件將 Bold 設定為 true。

  6. 選取 TableLayoutPanel 控件。

  7. 在 [工具箱] 中，選取 Button 圖示。

    Button 控件會放在 TableLayoutPanel 控件的下一個開啟儲存格中。

  8. 在 [工具箱]中，選取 Button 圖示四次，以填入 TableLayoutPanel 控件的第二列。

  9. 按住 shift 鍵時選取五個 Button 控件。 按 Ctrl+C，將 Button 控件複製到剪貼簿。

  10. 按 ctrl+V 三次，將 Button 控件的複本貼到 TableLayoutPanel 控件的其餘數據列。

  11. 按住 shift 鍵時選取所有 20 個 Button 控件。

  12. 在 [屬性] 視窗中，將 Dock 屬性的值變更為 Fill。

    所有 Button 控制項都會停駐，以填滿所在的儲存格。

  13. 在 [屬性] 視窗中，展開 [Margin 屬性] 節點。 將 All 的值設定為 5。

    所有 Button 控件的大小都會變小，以建立它們之間的較大邊界。

  14. 選取 [button10] 和 [button20]，然後按 [刪除] 以從版面配置中移除它們。

  15. 選取 [button5] 和 [button15]，然後將其 RowSpan 屬性的值變更為 2。 這些按鈕代表DemoCalculator控件 Clear 和 = 按鈕。

使用 [檔案大綱] 視窗

當您的控制項或表單填入數個控制項時，您可能會發現使用 [檔案大綱] 視窗瀏覽您的版面配置更容易。

  1. 在選單列上，選擇 [檢視]>[其他 Windows>檔案大綱]。 或者，在鍵盤上，按 ctrl +Alt+T。

    文件大綱窗口會顯示DemoCalculator控件及其組成控件的樹形視圖。 容器控件，例如 SplitContainer 將其子控件顯示為樹狀結構中的子節點。 您也可以使用 [文件大綱] 視窗來就地重新命名控制項。

  2. 在 [檔大綱] 視窗中，以滑鼠右鍵點擊 [button1]，然後選取 [重新命名]（鍵盤：[F2]）。 將其名稱變更為 sevenButton。

  3. 使用 [文件大綱] 視窗，根據下列清單，將設計工具產生的 Button 控制項重新命名為生產名稱：

    • button1 七Button

    • 按鈕2至八號按鈕

    • button3 到 nineButton

    • button4 to divisionButton

    • 按鈕5到清除按鈕

    • 將 button6 設定為 fourButton

    • button7 to fiveButton

    • button8 to sixButton

    • button9 到 乘法按鈕

    • button11 oneButton

    • button12 至 twoButton

    • button13 到 threeButton

    • 按鈕14 到 減法按鈕

    • 按鈕15 到 equalsButton

    • button16 至 zeroButton

    • button17 to changeSignButton

    • 按鈕18 至 小數按鈕

    • button19 到 additionButton (加法按鈕)

  4. 使用 檔大綱 和 屬性 視窗，根據下列清單變更每個 Button 控件名稱的 Text 屬性值：

    • 將 sevenButton 控件文字屬性變更為 7

    • 將8Button控件文字屬性變更為 8

    • 將 nineButton 控件文字屬性變更為 9

    • 將 divisionButton 控制文字屬性變更為 / （正斜線）

    • 將 clearButton 控件文字屬性變更為 Clear

    • 將 fourButton 控件文字屬性變更為 4

    • 將 fiveButton 控件文字屬性變更為 5

    • 將sixButton控件文字屬性變更為 6

    • 將乘法Button 控制文字屬性變更為 * （星號）

    • 將 oneButton 控件文字屬性變更為 1

    • 將 twoButton 控件文字屬性變更為 2

    • 將 threeButton 控件文字屬性變更為 3

    • 將減法按鈕控制項文字屬性變更為 - （連字號）

    • 將 equalsButton 的按鈕文字屬性變更為 =（等號）

    • 將 zeroButton 控件文字屬性變更為 0

    • 將 changeSignButton 控件文字屬性變更為 +/-

    • 將 decimalButton 控制文字屬性變更為 .（句號）

    • 將 additionButton 控制文字屬性變更為 + （加號）

  5. 在設計工具介面上，按住 Shift 鍵的同時，選取所有 Button 控制項。

  6. 在 [屬性] 視窗中，展開 [Font 屬性] 節點。 將 Size 設定為 14，並將 Bold設定為所有 Button 控件的 true。

這組指令會完成 DemoCalculator 控件的設計。 剩下的就是提供計算器邏輯。

實作事件處理程式

DemoCalculator 控件上的按鈕具有事件處理程式，可用來實作許多計算機邏輯。 Windows Forms 設計工具可以讓您一次選取，即為所有按鈕的所有事件處理程式產生存根。

  1. 在設計工具介面上，選取所有 Button 控件，方法是在按住 shift 鍵時選取它們。

  2. 選取其中一個 Button 控件。

    程式代碼編輯器會開啟設計工具所產生的事件處理程式。

由於本教學課程著重於設計工具，因此我們會省略計算機功能的實作詳細數據。

測試控制件

由於 DemoCalculator 控件繼承自 UserControl 類別，因此您可以使用 UserControl 測試容器來測試其行為。 如需詳細資訊，請參閱 如何：測試 UserControl的運行時間行為。

  1. 按 F5，在 UserControl 測試容器中建置和執行 DemoCalculator 控件。

  2. 選取 SplitContainer 面板之間的框線，並將它向左和向右拖曳。 TableLayoutPanel 及其所有子控件都會自行重設大小，以符合可用空間。

  3. 當您完成測試控制後，請選擇 關閉。

在表單上使用控制件

DemoCalculator 控件可用於其他複合控件或表單上。 以下程序描述如何使用。

建立專案

第一個步驟是建立應用程式專案。 您將使用此項目來建置顯示自訂控制元件的應用程式。

  1. 將新的 Windows Forms 應用程式 （.NET Framework） 專案新增至現有的方案，並將它命名 為 demoCalculatorTest。

  2. 在 [方案總管]中，以滑鼠右鍵按兩下 DemoCalculatorTest 項目，然後 選取 [新增>參考]，以開啟 [參考管理員] 對話框。

  3. 移至 [專案] 索引標籤，然後選取 DemoCalculatorLib 專案以新增測試項目的參考。

  4. 在 [方案總管]中，右鍵點擊 DemoCalculatorTest，然後選取 [設定為啟始專案]。

  5. 在 Windows Forms 設計工具中，將表單的大小增加到大約 1400 x 1000。

使用表單版面配置中的控件

若要在應用程式中使用DemoCalculator控件，您必須將它放在表單上。

  1. 在 [工具箱] 中，展開 [DemoCalculatorLib 元件] 節點。

  2. 將 DemoCalculator 控件從 [工具箱] 拖曳到表單上。 將控件移至表單的左上角。 當控件靠近表單的邊界時，對齊線 出現。 貼齊線顯示表單的 Padding 屬性與控制項的 Margin 屬性之間的距離。 將控件放置在對齊線所指示的位置。

    如需詳細資訊，請參閱 逐步解說：使用對齊線排列控件。

  3. 從 [工具箱] 拖曳 Button 控件，然後將它放到窗體上。

  4. 移動 demoCalculator 控件周圍的 Button 控件，並觀察對齊線出現的位置。 您可以使用這項功能，精確且輕鬆地對齊控件。 當您完成時，請刪除 Button 控件。

  5. 以滑鼠右鍵按兩下 DemoCalculator 控件，然後選取 [[屬性]。

  6. 將 Dock 屬性值變更為 Fill。

  7. 選取表單，然後展開 Padding 屬性節點。 將 All 的值變更為 20。

    DemoCalculator 控件的大小會縮減，以容納窗體的新 Padding 值。

  8. 將各種重設大小控點拖曳至不同的位置，以調整表單的大小。 觀察 DemoCalculator 控件如何重設大小以符合需求。

後續步驟

本文示範如何建構簡單計算機的使用者介面。 若要繼續，您可以藉由實作計算機邏輯來擴充其功能，然後 使用 ClickOnce發佈應用程式。 或者，請繼續進行另一個教學課程，讓您 使用 Windows Forms建立圖片查看器。

另請參閱