Walkthrough: Getting Started with the Windows Forms Designer
Updated: September 2010
The Windows Forms Designer provides many tools for building Windows Forms applications. This walkthrough illustrates how to build an application using the various tools provided by the designer. Tasks illustrated in this walkthrough include:
Creating a Windows Forms project.
Arranging controls using snaplines.
Accomplishing designer tasks using smart tags.
Setting margins and padding for your controls.
Arranging controls using a TableLayoutPanel control.
Partitioning your control’s layout by using a SplitContainer control.
Navigating your layout with the Document Outline window.
Positioning controls with the size and location information display.
Setting property values using the Properties window.
When you are finished, you will have a custom control that has been assembled using many of the layout features available in the Windows Forms Designer. This control implements the user interface (UI) for a simple calculator. The following screen shot shows the general layout of the calculator control.
In order to complete this walkthrough, you will need:
Sufficient permissions to be able to create and run Windows Forms application projects on the computer where Visual Studio is installed.
The dialog boxes and menu commands you see might differ from those described in Help depending on your active settings or edition. To change your settings, choose Import and Export Settings on the Tools menu. For more information, see Visual Studio Settings.
The first step is to create the DemoCalculator control project.
To create the custom control project
On the File menu, point to New, and then click Project to open the New Project dialog box.
From the list of Visual Basic or Visual C# projects in the Windows category, select the Windows Forms Control Library project template.
In the Name box, type DemoCalculatorLib and then click OK.
In Solution Explorer, right-click UserControl1.vb or UserControl1.cs, and then click Rename.
Change the file name to DemoCalculator.vb or DemoCalculator.cs. Click the Yes button when you are asked if you want to rename all references to the code element "UserControl1".
The Windows Forms Designer currently shows the designer surface for the DemoCalculator control. In this view, you can graphically design the appearance of your control by selecting controls and components from the Toolbox and placing them on the designer surface. For more information on custom controls, see Varieties of Custom Controls.
The DemoCalculator control contains several Windows Forms controls. In this procedure, you will arrange the controls using some of the rapid application development (RAD) features of the Windows Forms Designer.
To design the control layout
In the Windows Forms Designer, change the DemoCalculator control to a larger size by clicking the sizing handle in the lower-right corner and dragging it down and to the right. In the lower-right corner of Visual Studio, find the size and location information for controls. Set the size of the control to a width of 500 and a height of 400 by watching the size information as you resize the control.
In the Toolbox, click the Containers node to open it. Select the SplitContainer control and drag it onto the designer surface.
The SplitContainer is placed on the DemoCalculator control's designer surface.
The SplitContainer control sizes itself to the fit the size of the DemoCalculator control. Examine the Properties window to see the property settings for the SplitContainer control. Find the Dock property. Its value is Fill, which means the SplitContainer control will always size itself to the boundaries of the DemoCalculator control. Resize the DemoCalculator control to verify this behavior.
In the Properties window, change the value of the Dock property to None.
The SplitContainer control shrinks to its default size. Its size no longer follows the size of the DemoCalculator control.
The SplitContainer control docks to the DemoCalculator control's boundaries.
Several controls offer smart tags to facilitate design. For more information, see Walkthrough: Performing Common Tasks Using Smart Tags on Windows Forms Controls.
Click the vertical border between the panels and drag it to the right, so that most of the space in taken by the left panel.
The SplitContainer divides the DemoCalculator control into two panels, with a movable border separating them. The panel on the left will hold the calculator buttons and display, and the panel on the right will show a record of the arithmetic operations performed by the user.
In the Properties window, change the value of the BorderStyle property to Fixed3D.
In the smart tag panel, click Edit Columns.
The ColumnHeader Collection Editor dialog box opens.
In the ColumnHeader Collection Editor dialog box, click the Add button to add a column to the ListView control. Change the value of the column's Text property to History. Click OK to create the column.
In the smart tag panel, click Dock in Parent Container, and then click the smart tag glyph to close the smart tag panel.
The TableLayoutPanel control appears on the designer surface with its smart tag panel open. The TableLayoutPanel control arranges its child controls in a grid. For more information, see Walkthrough: Arranging Controls on Windows Forms Using a TableLayoutPanel. The TableLayoutPanel control will hold the DemoCalculator control's display and buttons.
Click Edit Rows and Columns on the smart tag panel.
The Column and Row Styles dialog box opens.
Click the Add button until five columns are displayed. Select all five columns, and then click the Percent option button in the Size Type box. Set the Percent value to 20. This sets each column to the same width.
In the Show drop-down box, click Rows.
Click the Add button until five rows are displayed. Select all five rows, and the click the Percent option button in the Size Type box. Set the Percent value to 20. This sets each row to the same height.
Click OK to accept your changes, and then click the smart tag glyph to close the smart tag panel.
In the Properties window, change the value of the Dock property to Fill.
Now that the layout of the control is set up, you can populate the DemoCalculator control with buttons and a display.
To populate the control
In the Toolbox, double-click the TextBox control icon.
In the Properties window, change the value of the TextBox control's ColumnSpan property to 5.
The TextBox control moves to a position that is centered in its row.
The TextBox control expands horizontally to span all five columns.
Select the TableLayoutPanel control.
In the Toolbox, double-click the Button icon.
Select all 20 Button controls by clicking them while holding down the SHIFT key.
In the Properties window, change the value of the Dock property to Fill.
All the Button controls dock to fill their containing cells.
All the Button controls are sized smaller to create a larger margin between them.
Select button10 and button20, and then press DELETE to remove them from the layout.
Select button5 and button15, and then change the value of their RowSpan property to 2. These will be the Clear and = buttons for the DemoCalculator control.
When your control or form is populated with several controls, you may find it easier to navigate your layout with the Document Outline window.
To navigate using the Document Outline window
On the View menu, point to Other Windows, and then click Document Outline.
The Document Outline window shows a tree view of the DemoCalculator control and its constituent controls. Container controls like the SplitContainer show their child controls as subnodes in the tree. You can also rename controls in place using the Document Outline window.
In the Document Outline window, right-click button1, and then click Rename. Change its name to sevenButton.
Using the Document Outline window, rename the Button controls from the designer-generated name to the production name according to the following list:
button1 to sevenButton
button2 to eightButton
button3 to nineButton
button4 to divisionButton
button5 to clearButton
button6 to fourButton
button7 to fiveButton
button8 to sixButton
button9 to multiplicationButton
button11 to oneButton
button12 to twoButton
button13 to threeButton
button14 to subtractionButton
button15 to equalsButton
button16 to zeroButton
button17 to changeSignButton
button18 to decimalButton
button19 to additionButton
Change the sevenButton control text property to 7
Change the eightButton control text property to 8
Change the nineButton control text property to 9
Change the divisionButton control text property to /
Change the clearButton control text property to Clear
Change the fourButton control text property to 4
Change the fiveButton control text property to 5
Change the sixButton control text property to 6
Change the multiplicationButton control text property to *
Change the oneButton control text property to 1
Change the twoButton control text property to 2
Change the threeButton control text property to 3
Change the subtractionButton control text property to -
Change the equalsButton control text property to =
Change the zeroButton control text property to 0
Change the changeSignButton control text property to +/-
Change the decimalButton control text property to .
Change the additionButton control text property to +
On the designer surface, select all the Button controls by clicking them while holding down the SHIFT key.
This completes the design of the DemoCalculator control. All that remains is to provide the calculator logic.
The buttons on the DemoCalculator control have event handlers that can be used to implement much of the calculator logic. The Windows Forms Designer enables you to implement the stubs of all the event handlers for all the buttons with one double-click.
To implement event handlers
Because the DemoCalculator control inherits from the UserControl class, you can test its behavior with the UserControl Test Container. For more information, see How to: Test the Run-Time Behavior of a UserControl.
To test the control
Press F5 to build and run the DemoCalculator control in the UserControl Test Container.
When you are done testing the control, click Close.
The DemoCalculator control can be used in other composite controls or on a form. The following procedure describes how to use it.
Creating the Project
The first step is to create the application project. You will use this project to build the application that shows your custom control.
To create the project
On the File menu, point to Add, and then click New Project to open the New Project dialog box.
From the list of Visual Basic or Visual C# projects, select the Windows Forms Application project template.
In the Name box, type DemoCalculatorTest and then click OK.
In Solution Explorer, right-click the DemoCalculatorTest project, and then click Add Reference to open the Add Reference dialog box.
Click the Projects tab, and then double-click your DemoCalculatorLib project to add the reference to the test project.
In Solution Explorer, right-click DemoCalculatorTest, and then click Set as StartUp Project.
In the Windows Forms Designer, increase the size of the form to about 700 x 500.
Using Your Control in the Form's Layout
To use the DemoCalculator control in an application, you need to place it on a form.
To use your control in the form's layout
In the Toolbox, expand the DemoCalculatorLib Components node.
Drag the DemoCalculator control from the Toolbox onto your form. Move the control to the upper-left corner of the form. When the control is close to the form's borders, you will see snaplines appear. These indicate the distance of the form's Padding property and the control's Margin property. Position the control at the location indicated by the snaplines.
For more information, see Walkthrough: Arranging Controls on Windows Forms Using Snaplines.
Drag a Button control from the Toolbox and drop it onto the form.
Move the Button control around the DemoCalculator control and observe where the snaplines appear. You can align your controls precisely and easily using this feature. Delete the Button control when you are finished.
Right-click the DemoCalculator control, and then click Properties.
Change the value of the Dock property to Fill.
Select the form, and then expand the Padding property node. Change the value of All to 20.
The size of the DemoCalculator control is reduced to accommodate the new Padding value of the form.
Resize the form by dragging the various sizing handles to different positions. Observe how the DemoCalculator control is resized to fit.
This walkthrough has shown how to construct the user interface for a simple calculator. You may want to extend its functionality in the following ways:
Implement the calculator logic. This may seem straightforward, but there are interesting complexities associated with the calculator's state transitions.
Package the calculator application for deployment. For more information, see How to: Publish a ClickOnce Application.