Closer Look: Understanding Control Layout
You can arrange controls in many ways when you add them to forms. For example, you might want to arrange three buttons on a form in a column, or you might want to arrange them side by side. This arrangement of controls is known as the layout. There are many tools and techniques that you can use in Visual Basic to help you arrange and resize the controls you add to a form. In this topic, you will look at some of these techniques.
Control Placement
There are typically two ways you can arrange controls on a form. After you have dragged a control to the form, you can use the Properties window to set precise positioning. Alternatively, you can move the control manually by dragging it to a specific location on the form. You will typically use a combination of these techniques when you design your applications.
Aligning Controls
When you add controls to a form, you can arrange the controls so that they line up with an edge of the form. You can also align controls with other controls that are already on the form. You can even set them up to automatically resize whenever the application is resized.
Aligning Controls to the Edge of a Form
You might want to align a control so that it is attached to the edge of the form. This is known as docking the control. There is an example of this in Step 3: Customize Looks and Behavior, which shows how to align a Panel control to the top of a form by setting its Dock property to Top.
You can dock a control to any edge of a form (top, bottom, left, or right), and the control will stay aligned even if the form is resized. For example, if you dock a control to the top a form and then change the width of the form, the control automatically resizes to fit the new width. When you dock a control to all sides of a form, it is the same as setting the Dock property to Fill. This is because you fill the entire form with the control.
Note
If you have a control docked to one edge of a form and then set the Dock property of a second control to Fill, the second control fills only the remaining space.
Aligning Controls with Other Controls
You can align a control with other controls on the form by dragging it. If you drag a control on the form in the same area of an existing control, you'll notice that blue lines appear. These lines are guides that make it easy for you to see exactly where to drop the control so that it aligns with an existing control. The following illustration shows these alignment lines.
Aligning controls
.png "Alignment lines")
Tip
You can also select multiple controls and use the align commands on the Layout toolbar.
Resizing Controls
When you select a control, a number of small square symbols appear around the boundary of the control. These symbols are called sizing handles. To resize the control, click the sizing handle and drag it to a new location to make the control larger or smaller. The following illustration shows how the pointer changes to an arrow when you move it over a sizing handle. The arrow indicates the directions in which you can drag the control to resize it.
Control sizing handles
.png "Control sizing handles")
You can set controls to automatically resize when the form is resized by setting the Dock property of the control to Fill. You saw an example of this in Step 3: Customize Looks and Behavior, where you learned how to dock a WebBrowser control so that it filled an area of the Windows Form. When you increase the size of the Windows Form, the WebBrowser control automatically resizes to fit the form.
If you prefer, you can also resize controls to a specific measurement by setting the Height and Width properties for the control in the Properties window.
Note
You can find the Height and Width properties of a control under the Size property in the Properties window.
Next Steps
In the next lesson, you will add a line of code to your program.
Next Lesson: Step 4: Add Visual Basic Code.