Working with Controls and Web Form Layout Modes

The following example shows you how to set the Web Form's layout mode and add various control types to the form's surface. The example also examines a control's properties and appearance:

1. Create a new ASP.NET Web Application project. The project starts with WebForm1

loaded in design mode.

2. Click once on the surface of the Web Form, and then locate the pageLayout property in the Properties window. By default this is set to GridLayout, and you see tiny dots on the surface of the Web Form.

3. In the Toolbox window, you see a panel named HTML and another named Web

Forms. Click the HTML panel to expose its contents.

4. Click and hold the left mouse button on the Text Field control in the HTML panel and drag it over to the center of your Web Form. Notice that this control stays where you place it in the center of the page.

5. Select the Web Forms panel in the Toolbox window. Click and hold your left mouse button on the Button control and drag it over to the surface of your form, placing it directly below the Text Field control. Again, you see that this control stays where you place it.

6. Click once on the surface of your Web Form to deselect the button you placed.

7. In the Property window, change the Web Form's pageLayout property to FlowLayout.

Because the two controls already on the surface of this form were placed in GridLayout mode, their tags include coordinates that allow them to stay in place even in FlowLayout mode.

8. Again, left-click and hold on the Button control in the Web Forms Toolbox panel and drag this control to the center of the form. When you let go of this control, it relocates itself to the upper-left corner of the Web Form. When the page's layout mode is set to FlowLayout, any controls you place on the form's surface will not be assigned coordinates and will instead start stacking at the top of the page.

9. Click once on the Button control added in Step 8. In the Properties window you see all of the display properties for this button. Change the button's Text property to say Click Me.

10. Notice that the two Button controls added from the Web Forms panel both have tiny green arrows in their upper-left corners, whereas the TextBox control you added from the HTML panel does not. The little green arrow indicates which controls are serverside Web controls.

0 0

Post a comment