Layout

 

Here we look at how views handles the layout of different controls.

On the previous example we only had one button to add on the form, therefore we didn't have to worry about the layout of the button. When many buttons or other controls are involved layout of these controls becomes a concern. Views introduced two tags to deal with the layout concern. These tags are Vertical and Horizontal

 

1.  Vertical and Horizontal

The basic syntax of these tags is:

  <Vertical>

  list of controls......

</Vertical>

 

  <Horizontal>

  list of controls......

</Horizontal>

 

The list of controls that are within the vertical tag will be displayed vertically on the form. And the within the horizontal tag will be displayed horizontally. The examples show how these tags are used and how they differ.   

 

   Examples

 

The following example shows how the "Vertical" tag can be used.

Example 2.3.1: Source

 

The following code is responsible for the image above.

 

@"<Form Text= 'Vertical'>
<Vertical>
 <Button Name = b1 Text = button1/>
    <Button Name = b2 Text = button2/>
 <Button Name = b3 Text = button3/>
</Vertical>
</Form>";

 

The next example demonstrate how the three buttons illustrated above  will be displayed on a form if the "Horizontal" tag is used instead of the vertical tag.

Example 2.3.2: Source

 

The following code is responsible for the image above.

@"<Form Text= 'Horizontal'>
<Horizontal>
 <Button Name = b1 Text = button1/>
   <Button Name = b2 Text = button2/>
 <Button Name = b3 Text = button3/>
</Horizontal>
</Form>";

The next example then shows how these tags can be used together.

Example 2.3.3: Source

The following code is responsible for the image above.

@"<Form Text= 'Log in'>
<Vertical>

<Horizontal>
  <Label Name = L1 Text = username/>
  <TextBox Name = 'txtbox1'/>
</Horizontal>

<Horizontal>
   <Label Name = L2 Text = password/>
   <TextBox Name = 'txtbox2'/>
</Horizontal>
<Button Name = okBtn Text = OK/>
<Button Name = cancelBtn Text = Cancel/>


</Vertical>
</Form>";

Vertical and Horizontal tags can have the following attributes

ForeColor, BackColor, Height, Width, halign and valign. To see the description of the attributes go to the properties page.

 

 

<<PREVIOUS  |  NEXT>>