Show: Delphi C++
Display Preferences

Form Designer

From RAD Studio XE3
Jump to: navigation, search

Go Up to Getting Started with RAD Studio


The Form Designer (or Designer) is displayed automatically when you are creating or editing a form, such as a VCL Forms Application or a HD FireMonkey Application. The Form Designer runs automatically when you create a graphical application that uses a form file, either a .dfm or an .fmx file. To shift focus to the Form Designer when you have a visual project open in the IDE, click the Design tab at the bottom of the main editing window.

The appearance and functionality of the Designer changes, depending on the type of form you are creating or editing. For example, if you are using an HTML Element, you can display the HTML Tag Editor in the Designer by selecting View > Tag Editor.

FireMonkey and VCL Have Similar Form Designers but Different Forms

Here are the FireMonkey Form and the VCL Form as they appear (separately) in the Form Designer, when you create either a FireMonkey or a VCL application:

FireMonkey Form

FireMonkey Form

VCL Form   

VCL Form

The two forms look different, simply because a VCL form is a native Windows form, while a FireMonkey form is platform-neutral and is custom drawn by the FireMonkey tools. For example, a VCL form displays the standard Windows buttons for Minimize, Resize, and Close commands. In a FireMonkey form, however, placeholders appear in place of these platform-specific buttons.

Despite these visual differences, the Form Designer works almost the same for FireMonkey and VCL. One difference is that several different context menu commands are supported for FireMonkey and for VCL.

Visual Components

You can add visual components to your form by dragging them from the Tool Palette, located in the lower-right section of the IDE, onto the form you are creating. These are the components that will be visible to the end user at run time. The objects on the Tool Palette change dynamically, depending on the type of application or form you are designing.

The Tool Palette includes controls such as buttons, labels, toolbars, and listboxes for each of the various tool categories; types of applications if you are working at the project level, such as DLL wizards, console or logo applications; and web controls, HTML elements, and data components if you are working on a web application.

Form Positioner Preview (VCL only) FormPreview.bmp

The Form Positioner, part of the VCL Form Designer only, allows you to position forms in relation to each other as you design your application. The Form Positioner Preview icon, located at the lower-right corner of the Designer, shows the positioning of your form as it will appear on the screen at run time.

To activate the Form Positioner, click the Preview icon FormPreview.bmp. As you move your form in the Form Positioner, a tooltip displays the x,y coordinates of the upper-left corner of the form.

In the x,y coordinates:

  • x represents the Left property of the form.
  • y represents the Top property of the form.

For example, the coordinates 0,0 indicate that the form is located in the upper-left corner of the screen.

Nonvisual Components and the Component Tray

Nonvisual components are attached to the form, but they are only visible at design time; they are not visible to end users at run time. You can use nonvisual components as a way to reuse groups of database and system objects or isolate the parts of your application that handle database connectivity and business rules.

HTML Designer

Use the HTML Designer to view and edit Web Forms or HTML pages. You can change the default layout in the HTML Designer to be either 'Grid Layout' or 'Flow Layout'. Choose Tools > Options and then select HTML Options from the tree on the left side. Now you will see the Default Page Layout Options that allows you to select either the Grid Layout or Flow Layout option. This Designer provides a Tag Editor for editing HTML tags alongside the visual representation of the form or page. You can also use the Object Inspector to edit properties of the visible items on the HTML page and to display the properties of any current HTML tag in the Tag Editor. A combo box located above the Tag Editor lets you display and edit SCRIPT tags.

To create a new HTML file, choose File > New > Other > Web Documents > HTML Page.

Design Guidelines (VCL Only)

When you are arranging components on a form, design guidelines appear on the Form Designer on or near a component's bound. Design guidelines are vertical or horizontal lines that cut across the bounds of a visual control (top, bottom, right, left, center, and text guidelines). You can use the design guidelines as "alignment" points to align adjacent controls.

When you mouse-over a control, a popup window displays UI guideline information, so that you can see how each component will adhere to rules, such as position of origin (horizontal, vertical), size of the selected control, tab stop, and relative order of an item (in groups, listboxes, or menus).

If the Snap to Grid option is enabled, and Use Design Guidelines is also enabled, the design guidelines will take precedence. This means that if a grid point is within the tolerance of the new location and a guideline is also within that distance away, then the control will snap to the guideline instead of the grid position, even if the guideline does not fall on the grid position. The snap tolerance is determined by the grid size. Even if the Snap to Grid and Show Grid options are disabled, the Designer still uses the grid size in determining the tolerance.

To enable or disable design guidelines, set the Use designer guidelines field on the Tools > Options > Environment Options > VCL Designer dialog box. The design guidelines feature is available only in VCL applications (for both Delphi and C++).

For more information, see Using Design Guidelines with VCL Components.

Taking a Snapshot of Your Form (VCL Only)

The IDE generates a graphic image of the form when you choose Edit > Copy while the focus is on the Form Designer.

A design-time image of the form is copied to the clipboard using the CF_BITMAP format. You can paste the graphic image into any application that accepts this format (for instance, MSPaint,, Photoshop, and so forth).

In addition to the graphic image, the component stream is generated (containing values from the Object Inspector), as part of the text representation of the selected components. You can paste this text into any text editor.

Context Menu

When you right-click a form in the Form Designer, the context menu is displayed. The context menu commands are available for both VCL and FireMonkey, unless otherwise noted in the following table:

Item Description

Items Editor

(FireMonkey forms)

Opens the Items Designer with focus on the selected control.

Add Item

(FireMonkey forms)

Allows you to add an item to the selected control on the form. For example, if you add a TEdit control to a FireMonkey Metropolis UI form, you can right-click the TEdit control, select Add Item, and add an embedded glyph such as TPasswordEditButton.


Select from the following editing subcommands, which apply to the Form Designer contents:

  • Undo
  • Cut
  • Copy
  • Paste
  • Delete
  • Select All


Controls the front/back layers of the selected control. Choose from the following subcommands:

LiveBindings Wizard

(only if enabled in Tools | Options | LiveBindings)

Opens the LiveBindings Wizard.

Bind Visually...

Opens the LiveBindings Designer.


(The Position command group is VCL-only.)

Sets the alignment, size, and scale of the selected control. Choose from the following subcommands:

Flip Children

(VCL forms)

Reverses right and left. Choose from the following subcommands:

  • All--reverses all the elements on the form
  • Selected--reverses only the selected elements

Tab Order

(VCL forms)

Invokes the Edit Tab Order dialog box.

Creation Order

Opens the Creation Order dialog box.

Align to Grid

(FireMonkey forms)

Aligns selected objects to the grid in the Form Designer.

Revert to Inherited 

Resets the properties, methods, and events of the selected control to the values of the base class control.

If a form inherits design features and properties from another form, you can choose Revert To Inherited from the Form context menu to restore the form to its original state. For example, if a form inherits a certain button placement from another form and you then move the button, Revert To Inherited returns the button to its original position.


(FireMonkey forms)

Opens the Alignment dialog box.

Add to Repository

Opens the Add to Repository dialog box.

View as Text

Opens the current source file in the Code Editor window. Alt+F12 performs the same task.

To return to the Form Designer, right-click the Code Editor and click View as Form on the context menu (or press Alt+F12).

DFM Text
(VCL forms)

Text FMX
(FireMonkey forms)

Saves the form file either in text form (enabled) or in binary form (disabled).

The form files are:

  • .dfm--VCL forms file
  • .fmx-FMX forms file

Convert to Metropolis UI Form

Converts the style properties of the current application to match the Windows Metro style properties. See Developing Metropolis UI Applications.

Edit Default Style

Edit Custom Style

(FireMonkey forms)

Opens the FireMonkey Style Designer.

For more information, see Customizing FireMonkey Applications with Styles.

Test Dialog

(VCL only)

For any of the modal VCL dialogs, tests the dialog. That is, if you right-click an OpenDialog on the Form Designer and select Test Dialog, the standard File Open dialog is displayed.

See Also

Personal tools
Previous Versions
In other languages