Lay Out Apps in App Designer

Design View in App Designer provides a rich set of layout tools for designing modern, professional-looking applications. It also provides an extensive library of UI components, so you can create various interactive features. Any changes you make in Design View are automatically reflected in Code View. Thus, you can configure many aspects of your app without writing any code.

To add a component to your app, drag it from the Component Library onto the canvas.

The name of the component appears in the Component Browser after you add it to the canvas. You can select components in either the canvas or the Component Browser. The selection occurs in both places simultaneously.

Some components, such as edit fields and sliders, are grouped with a label when you drag them onto the canvas. These labels do not appear in the Component Browser by default, but you can add them to the list by right-clicking anywhere in the Component Browser and selecting Include component labels in Component Browser. If you do not want the component to have a label, you can exclude it by pressing and holding the Ctrl key as you drag the component onto to the canvas.

If a component has a label, and you change the label text, the name of the component in the Component Browser changes to match that text. You can customize the name of the component by double-clicking it and typing a new name.

Customizing Components

You can customize the appearance of a component by selecting it and then editing its properties in the Inspector tab of the Component Browser. For example, from this tab you can change the alignment of the text that displays on a button.

Some properties control the behavior of the component. For example, you can change the range of values that a numeric edit field accepts by changing the Limits property.

When the app runs, the edit field accepts values only within that range.

You can edit some properties directly in the canvas by double-clicking the component. For example, you can edit a button label by double-clicking it and typing the desired text. To add multiple lines of text, hold down the Shift key and press Enter.

Aligning and Spacing Components

In Design View, you can arrange and resize components by dragging them on the canvas, or you can use the tools available in the Canvas tab of the toolstrip.

App Designer provides alignment hints to help you align components as you drag them in the canvas. Orange dotted lines passing through the centers of multiple components indicate that their centers are aligned. Orange solid lines at the edges indicate that the edges are aligned. Perpendicular lines indicate that a component is centered in its parent container.

As an alternative to dragging components on the canvas, you can align components using the tools in the Align section of the toolstrip.

When you use an alignment tool, the selected components align to an anchor component. The anchor component is the last component selected, and it has a thicker selection border than the other components. To select a different anchor, hold down the Ctrl or Shift key and click the desired component twice (once to deselect the component, and a second time to select it again). For example, in the following image, the Format Options label is the anchor. Clicking the Align left button aligns the left edges of the drop-down and check box to the left edge of the label.

You can control the spacing among neighboring components using the tools in the Space section of the toolstrip. Select a group of three or more components, and then select an option from the drop-down list in the Space section of the toolstrip. The Evenly option distributes the space evenly within the space occupied by the components. The 20 option spaces the components 20 pixels apart. If you want to customize the number of pixels between the components, type a number into the drop-down list.

Next, click Apply Horizontally or Apply Vertically . For example, select Evenly and then click Apply Vertically to distribute the space among a vertical stack of components.

Grouping Components

You can group two or more components together to modify them as a single unit. For example, you can group a set of components after finalizing their relative positions, so you can then move them without changing that relationship.

To group a set of components, select them in the canvas, and then select Grouping > Group in the Arrange section of the toolstrip.

The Grouping tool also provides functionality for these common tasks:

  • Ungroup all components in a group — Select the group. Then select Grouping > Ungroup.

  • Add a component to a group — Select the component and the group. Then select Grouping > Add to Group.

  • Remove a component from a group — Select the component. Then select Grouping > Remove from Group.

Arranging Components in Containers

When you drag a component into a container such as a panel, the container turns blue to indicate that the component is a child of the container. This process of placing components into containers is called parenting.

The Component Browser shows the parent–child relationship by indenting the name of the child component under the parent container.

Related Topics