步驟 5:將控制項加入至您的表單Step 5: Add controls to your form

在這個步驟中,您要將控制項 (例如 PictureBox 控制項和 CheckBox 控制項) 新增至表單。In this step, you add controls, such as a PictureBox control and a CheckBox control, to your form. 然後將 Button 控制項加入至表單。You then add Button controls to your form.

如何向表單添加控制項How to add controls to your form

  1. 選擇視覺化工作室 IDE 左側的工具箱選項卡(或按Ctrl+Alt+X), 然後展開 "公共控制" 組。Choose the Toolbox tab on the left side of the Visual Studio IDE (or press Ctrl+Alt+X), and then expand the Common Controls group. 這樣會顯示您在表單上最常見的控制項。This shows the most common controls that you see on forms.

  2. 按兩下 [PictureBox]**** 項目,將 PictureBox 控制項新增至表單。Double-click the PictureBox item to add a PictureBox control to your form. 由於 TableLayoutPanel 會停駐並填滿整個表單,因此 IDE 會將 PictureBox 控制項加入至第一個空白儲存格 (左上角)。Because the TableLayoutPanel is docked to fill your form, the IDE adds the PictureBox control to the first empty cell (the upper left corner).

  3. 選擇新的圖片框控制項以選擇它,然後選擇新圖片盒控制項上的黑色三角形以顯示其工作清單,如下圖所示。Choose the new PictureBox control to select it, and then choose the black triangle on the new PictureBox control to display its task list, as shown in the following screenshot.

    PictureBox 工作PictureBox tasks
    圖片盒任務****PictureBox*** tasks*

    注意

    如果不小心將錯誤類型的控制項加入至 TableLayoutPanel,您可以刪除它。If you accidentally add the wrong type of control to your TableLayoutPanel, you can delete it. 以滑鼠右鍵按一下控制項,然後在操作功能表中選擇 [刪除]****。Right-click the control, and then choose Delete on its context menu. 您也可以使用功能表列移除表單中的控制項。You can also remove controls from the form by using the menu bar. 在功能表列上,選擇 "編輯 > 撤銷""編輯 > 刪除"。On the menu bar, choose Edit > Undo, or Edit > Delete.

  4. "圖片盒"控制項中的 "圖片盒任務" 功能表中,選擇父容器連結中的停靠點In the PictureBox Tasks menu from the PictureBox control, choose the Dock in parent container link. 這樣會自動將 PictureBox 的 Dock 屬性設定為 FillThis automatically sets the PictureBox Dock property to Fill. 要查看這一點,請選擇 "圖片框" 控制項以選擇它,轉到 "屬性" 視窗,並確保Dock屬性設置為 "填充"。To see this, choose the PictureBox control to select it, go to the Properties window, and be sure that the Dock property is set to Fill.

  5. 變更 PictureBox 的 ColumnSpan 屬性,使 PictureBox 橫跨兩個資料行。Make the PictureBox span both columns by changing its ColumnSpan property. 圖片框中,選擇 "圖片框" 控制項並將其柱範圍屬性設置為2In the PictureBox, choose the PictureBox control and set its ColumnSpan property to 2. 另外,您也想要在 PictureBox 空白時顯示空框架。Also, when the PictureBox is empty, you want to show an empty frame. 將其 [BorderStyle]**** 屬性設定為 [Fixed3D]****。Set its BorderStyle property to Fixed3D.

    注意

    如果您看不到 PictureBox 的 ColumnSpan 屬性,可能是因為 PictureBox 是新增至表單,而不是 TableLayoutPanel。If you don't see a ColumnSpan property for your PictureBox, then it's likely that the PictureBox was added to the form rather than the TableLayoutPanel. 要解決此問題,請選擇 "圖片框",將其刪除,選擇 "表格佈局面板",然後添加新的圖片盒。To fix this, choose the PictureBox, delete it, choose the TableLayoutPanel, and then add a new PictureBox.

  6. 選擇表單上的 "表佈局面板",然後將核取方塊控制項添加到表單中。Choose the TableLayoutPanel on the form and then add a CheckBox control to the form. 按兩下工具箱中的 "核取方塊"項,即可將新的核取方塊控制項添加到表中的下一個可用儲存格。Double-click the CheckBox item in the Toolbox to add a new CheckBox control to the next free cell in your table. 由於 PictureBox 會佔用 TableLayoutPanel 的前兩個儲存格,因此 CheckBox 控制項會加入至左下方儲存格。Because a PictureBox takes up the first two cells in the TableLayoutPanel, the CheckBox control is added to the lower-left cell. 選擇 "文本" 屬性並在"拉伸" 一詞中鍵入,如下圖所示。Choose the Text property and type in the word Stretch, as shown in the following image.

    包含 Stretch 屬性的 TextBox 控制項TextBox control with Stretch property
    *帶有****拉伸****屬性****的文字方塊***控制項TextBox control with Stretch property

  7. 選擇表單上的表佈局面板,然後轉到工具箱中的容器組(您得到了桌面面板控制項),然後按兩下FlowLayoutPanel項,將新控制項添加到最後一個儲存格(右下角)。Choose the TableLayoutPanel on the form, and then go to the Containers group in the Toolbox (where you got your TableLayoutPanel control) and double-click the FlowLayoutPanel item to add a new control to the last cell (bottom right). 然後,在表佈局面板中停靠流佈局面板。Then, dock the FlowLayoutPanel in the TableLayoutPanel. 您可以通過在 FlowLayoutPanel 的黑三角形工作清單中選擇父容器中的 Dock, 或者通過將 FlowLayoutPanel 的Dock屬性設置為 "填充"來執行此操作。You can do so either by choosing Dock in parent container on the FlowLayoutPanel's black triangle task list, or by setting the FlowLayoutPanel's Dock property to Fill.

    注意

    AFlowLayoutPanel是一個容器,用於一個接一個地排列一行中的其他控制項。A FlowLayoutPanel is a container that arranges other controls in a row, one after another. 調整 FlowLayoutPanel 的大小時,如果有空間可以這樣做,它將在一行中列出其所有控制項。When you resize a FlowLayoutPanel, it lays out all of its controls in a single row, if it has room to do so. 否則,它會將控制項分行排列,由下往上堆疊控制項。Otherwise, it arranges them in lines, one on top of the other.

    在這裡,您將使用 FlowLayoutPanel 來容納四個按鈕。Here, you'll use a FlowLayoutPanel to hold four buttons. 如果添加按鈕時按鈕在另一個按鈕上排列,請確保在添加按鈕之前選擇 FlowLayoutPanel。If the buttons arrange one on top another when you add them, make sure that you select the FlowLayoutPanel before you add the buttons.

    (通常,每個儲存格只包含一個控制項。(Typically, each cell contains only one control. 在此示例中,表佈局面板的右下角儲存格包含四個按鈕控制項。In this example, the lower-right cell of the TableLayoutPanel contains four button controls. 原因為何?Why? 因為 FlowLayoutPanel 是一個容器控制項,它是儲存格中保存其他控制項的控制項。Because the FlowLayoutPanel is a container control, which is a control in a cell that holds other controls.)

若要加入按鈕To add buttons

  1. 選擇您加入的新 FlowLayoutPanel。Choose the new FlowLayoutPanel that you added. 轉到工具箱中的 "常見控制項",然後按兩下 "按鈕"項,將稱為按鈕1的按鈕控制項添加到 FlowLayoutPanel。Go to Common Controls in the Toolbox and double-click the Button item to add a button control called button1 to your FlowLayoutPanel. 重複此步驟加入另一個按鈕。Repeat to add another button. IDE 判斷已有一個稱為 button1 的按鈕,所以會將下一個按鈕命名為 button2The IDE determines that there's already a button called button1 and calls the next one button2.

  2. 通常,使用工具箱添加其他按鈕。Typically, you add the other buttons by using the Toolbox. 這一次,選擇按鈕2, 然後從功能表列,選擇編輯 > 複製(或按Ctrl+C)。This time, choose button2, and then from the menu bar, choose Edit > Copy (or press Ctrl+C). 接下來,從功能表列中選擇 "編輯 > 粘貼"(或按Ctrl+V)以粘貼按鈕的副本。Next, choose Edit > Paste from the menu bar (or press Ctrl+V) to paste a copy of your button. 現在再貼一次。Now paste it again. 請注意,IDE 將按鈕3按鈕4添加到 FlowLayout 面板中。Notice that the IDE adds button3 and button4 to the FlowLayoutPanel.

    注意

    您可以複製及貼上任何控制項。You can copy and paste any control. IDE 會以邏輯方式命名和放置新的控制項。The IDE names and places the new controls in a logical manner. 如果您將控制項貼至容器中,IDE 會選擇下一個邏輯放置空間。If you paste a control into a container, the IDE chooses the next logical space for placement.

  3. 選擇第一個按鈕,將其 [Text]**** 屬性設定為 [顯示圖片]****。Choose the first button and set its Text property to Show a picture. 然後,將接下來三個按鈕的 [Text]**** 屬性分別設定為 [清除圖片]****、[設定背景色彩]**** 和 [關閉]****。Then set the Text properties of the next three buttons to Clear the picture, Set the background color, and Close.

  4. 讓我們調整按鈕的大小並排列它們,以便它們與面板的右側對齊。Let's size the buttons and arrange them so they align to the right side of the panel. 選擇 "流佈局面板"並查看其FlowDirection屬性。Choose the FlowLayoutPanel and look at its FlowDirection property. 將此屬性設定為 [RightToLeft]****。Change it so it's set to RightToLeft.

    按鈕應對齊到儲存格的右側,並反轉其順序,以便 "顯示圖片"按鈕位於右側。The buttons should align themselves to the right side of the cell, and reverse their order so that the Show a picture button is on the right.

    注意

    如果按鈕的順序還是不對,您可以在 FlowLayoutPanel 上拖曳按鈕,依任何順序重新排列按鈕。If the buttons are still in the wrong order, you can drag the buttons around the FlowLayoutPanel to rearrange them in any order. 您可以選擇按鈕並將它向左或向右拖曳。You can choose a button and drag it left or right.

  5. 選擇 [關閉]**** 按鈕選取它。Choose the Close button to select it. 然後,要同時選擇其餘按鈕,請按住Ctrl鍵並選擇它們。Then, to choose the rest of the buttons at the same time, press and hold the Ctrl key and choose them, too.

    選擇所有按鈕後,轉到 "屬性" 視窗並向上滾動到 "自動大小" 屬性。After you've selected all the buttons, go to the Properties window and scroll up to the AutoSize property. 此屬性會指示按鈕自動調整本身的大小,以容納其所有文字。This property tells the button to automatically resize itself to fit all of its text. 將其設置為 "真"。Set it to True.

    您的按鈕現在應該具有適當的大小且順序正確 Your buttons should now be sized properly and be in the right order. (只要選擇了所有四個按鈕,就可以同時更改所有四個自動大小調整屬性。下圖顯示了四個按鈕。(As long as all four buttons are selected, you can change all four AutoSize properties at the same time.) The following image shows the four buttons.

    包含四個按鈕的圖片檢視器Picture Viewer with four buttons
    帶四個按鈕****的圖片檢視器**Picture Viewer with four buttons

  6. 現在再次運行程式以查看更改。Now run your program again to see your changes.

    請注意,按鈕和核取方塊尚未—執行任何操作,但它們很快就會執行。Notice that the buttons and the check box don't do anything yet—but they will, soon.

若要繼續或檢視To continue or review

另請參閱See also