Arrange Controls on a Form

To move an individual Control, first click on it to select it. The selection rectangle is displayed (a dotted rectangle) around the Control. Then move your mouse pointer onto the Control until it changes to the crossed arrows pointer and then click and drag the Control to the required location.

You can confine Controls to within the boundaries of the form using the Restrict controls to form boundary setting. By default, this option is selected, preventing you from moving Controls off the current form. To change the setting choose Grid Settings from the Quick Layout group on the Ribbon's Home tab or the Layout group on the Ribbon's Design tab or from the context menu displayed by right-clicking on a Control.

 

A selected Control can be automatically centred within the form by using the Centre Vertically and Centre Horizontally options in the Quick Layout group on the Ribbon's Home tab or the Layout group on the Ribbon's Design tab.

 

To size an individual Control, first click on it to select it. Then move your mouse pointer onto one of the square markers in the corners or the middle of the edges of the selection rectangle and it changes to a double-headed arrow pointer. Now click and drag the marker and the Control will change size following the direction of the arrow heads – you can make the Control larger by dragging away from the current Control and smaller by moving the pointer in towards the current Control.

The Restrict controls to form boundary setting, mentioned above, also determines whether Controls can be resized beyond the form's boundaries.

In addition, where appropriate, App Studio can automatically adjust the size of the Control to fit the contents, e.g. where you have a Picture & Video Control or a Static Text Control. To auto-size a Control, right-click on the Control and choose Size to Content or choose this option from the Quick Layout group on the Ribbon's Home tab or the Layout group on the Ribbon's Design tab.

Alternatively, you can manually specify the size of a Control within its Properties.

 

The position of Controls on a form doesn't affect the order in which they are drawn or the Tab Order. These are both determined by the order of the Controls in the tree view in the Forms Pane. The first Control below the form's name in the tree view will be the first Control drawn and the first Control in the Tab Order. You can change the position of a Control within the tree by right-clicking on the Control and choosing Move Up, Move Down, Move To Top or Move To Bottom from the context menu displayed. Alternatively, you can access these commands using the following keyboard shortcuts:

 

You can also change the Tab Order using the Tab Order button in the Layout group on the Ribbon's Design tab. Choosing this button displays a number in the top left-hand corner of each Control on the current form showing the position of each within the Tab Order. Simply click on the Controls in turn in the order in which you want them to be positioned within the Tab Order and the positions will be set accordingly. When you have finished, simply click anywhere other than on a Control or re-click on the Tab Order button. The Controls will be re-ordered in the Forms Pane tree view. The Tab Order feature can also be accessed from the context menu displayed by right-clicking on a Control.

 

If one or more Controls overlap or occupy the same space on a form, the position within the Forms Pane tree view also determines which Control will be upper most at runtime. The Control which is lowest in the tree view will be in the foreground and Controls higher in the tree view will be behind it. If you assign a background colour to a Control, any Controls or parts of a Control behind it, won't be visible on the form. You can take advantage of this behaviour when designing a form to actively hide Controls, when you don't want to use the Control's Properties, such as the Enabled and Visible Properties, for whatever reason. Note that when placing Controls within a Panel Control, these Controls must be above the Panel Control in order for them to be included within the Panel. Controls behind a Panel will not count as contained within the Panel.