Guide to creating a UI with Rapid Layout .NET

Step 1

Download and install Rapid Layout .NET and opened a new project.

 

Step 2

Create a new Windows form. Drag a RapidLayoutPanel onto the form.

tt1

Step 3

Click on the right triangle and choose ‘Dock in parent container’

tt3

Step 4

Click on the right triangle again and choose ‘Add Horizontal Guide’

tt4

Step 5

Click on the right triangle again and choose ‘Add Vertical Guide’

tt5

Step 6

Click on the right hand side connection of the vertical guide and choose ‘Spring + Preferred Length’

tt6

Step 7

Click on the left hand side connection of the vertical guide and choose ‘Preferred Length’

tt7

Step 8

Add three labels to the form

tt8

Step 9

Click and drag the right hand side connection of each of the labels on to the vertical guide

tt9

Step 10

Click on the left hand connection of each label and change the connection type to ‘Spring + Preferred Length’

tt10

Step 11

Click on the right hand connection of each label and change the connection type to ‘Preferred Length’

tt11

Step 12

Set the names of the text of the labels to ‘Name’, ‘Address’ & ‘Telephone Number’. See how the labels right align to the vertical guide

tt12

Step 13

Add three textboxes to the Forms

tt13

Step 14

Drag the left hand connection of each textbox onto the vertical guide. Then click the left hand connection each textbox and change the connection type to ‘Preferred Length’

tt14

Step 15

Click on the target near the top left of a textbox. Then click on the horizontal internal connection that appears. Change the type to ‘Spring + Preferred length’.

tt15

Step 16

Click on the right hand connection of each textbox. Change the connection type to ‘Preferred Length’

tt16

Step 17

Repeat the last two steps for each textbox

tt17

Step 18

Drag the bottom connection of the first textbox onto the top of the second textbox. Drag the top connection of the second textbox onto the bottom of the first textbox. Drag the bottom connection of the second textbox onto the top of the third textbox. Drag the top connection of the third textbox onto the bottom of the second textbox. Drag the bottom connection of the third textbox onto horizontal guide. Change the connections between all the textboxes to ‘Preferred Length’

tt20

Step 19

Drag the top connection of the first label to the top of the first textbox. Drag the bottom connection of the first label to the bottom of the first textbox. Repeat for each label

tt22

Step 20

Change the connection type of the top and bottom connection of each label to ‘Spring’

tt23

Step 21

Add three buttons to the form

tt24b

Step 22

Drag the left connection of button three to the right side of button two. Drag the right connection of button two to the left side of button three. Drag the left connection of button two to the right side of button one. Drag the right connection of button one to the left side of button two.

tt24

Step 23

Drag the top connection of each button on to the horizontal guide.

tt25

tt26

Step 24

Change the left connection of button one to ‘Spring + Preferred Length’

tt27

Step 25

Change the connection type of the top connection of each button to ‘Preferred Length’

tt30

Step 26

Change the connection type of the connections between the buttons to ‘Preferred Length’. Change the labels on the buttons to ‘Cancel’, ‘Apply’, ‘OK’

tt31b

Step 27

Click on the ‘target’ that is near the top left of button one. This will reveal the internal connections

tt32

Step 28

Click and drag the horizontal internal connection of button one on to button two. A purple line will connect the two buttons.

tt33

Step 29

Repeat last two steps to connect button two to button three. All three buttons will now be the same width

tt34

Step 30

Your form is now complete. Try changing the size of the form. See how everything stays aligned

tt35

Step 31

Try changing the font on the items in the form. See how everything stays just the way you want it.

tt36

 

HomeSupport / Tutorial /
 

 

Tutorial