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.

Step 3

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

Step 4

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

Step 5

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

Step 6

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

Step 7

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

Step 8

Add three labels to the form

Step 9

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

Step 10

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

Step 11

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

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

Step 13

Add three textboxes to the Forms

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’

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’.

Step 16

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

Step 17

Repeat the last two steps for each textbox

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’

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

Step 20

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

Step 21

Add three buttons to the form

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.

Step 23

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

Step 24

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

Step 25

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

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’

Step 27

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

Step 28

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

Step 29

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

Step 30

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

Step 31

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

 

Home / Support / Tutorial /