Form Designer

From RAD Studio
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 Windows VCL Application or an HD Multi-Device Application. The Form Designer runs automatically when you create a graphical application that uses a form file, either a .dfm or a .fmx file.

The Form Designer (or Designer) is displayed automatically when you are creating or editing a form, such as an HD Multi-Device Application. The Form Designer runs automatically when you create a graphical application that uses a form file (a .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:

Code, Design, and History Tabs

Note: You can open the Code Editor and the Form Designer window for the same unit at the same time through New Edit Window. When you create an event in the Object Inspector or double-click an event handler, the code editor window will scroll to the event location, and the form designer window will remain the same.

The appearance and functionality of the Designer can change, 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.

Form Designer Window

FireMonkey and VCL have different Form Designers and different forms:
Here are the Multi-Device Form (FireMonkey) and the Windows VCL Application as they appear (separately) in the Form Designer when you create either a Multi-Device Application or a Windows VCL Application:

Multi-Device Form

Multi-Device Form

VCL Form   

VCL Form

The two forms look different, because a VCL form is a native Windows form, while a multi-device 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. A multi-device form appears by default with the Master view, which is platform-neutral. A multi-device application can target all the available platforms while VCL only targets Windows.

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

Here is a Multi-Device Form as it appears in the Form Designer, when you create a Multi-Device Application:

Multi-Device Form

Multi-Device Form

Style Selector


The multi-device Form Designer includes a Style Selector that chooses the basic design-time platform style used in the Master view. The styles are based on the platforms that a multi-device application can target:

  • Windows
  • macOS
  • iOS
  • Android

Select the style of the Master view at design time to show all properties related to the selected style/platform. For example, if you want to define the StyleLookup property of a TButton for an Android device, select the Android style; notice that the options available in the drop-down menu of the Object Inspector for the StyleLookup property contain selections for an Android device.

Note: When the use of design-time styles is enabled, you can set the Design-time form style property to "Windows" or disable design-time styles to prevent not displaying the color of the components.

View Selector

The multi-device Form Designer includes a View Selector, a drop-down menu that shows all the Available views that represent different devices, such as specific iOS, Android, Windows and OS X devices. After you select views from the Available list for your project, the views are added to the Created list. See Using FireMonkey Views.


The View Selector provides the following controls:

Icon Description

View Icon.png

Selects the current view from a drop-down list of views.

You can add one or more views to your project just by clicking views from the Available list. See Adding Views to Your Multi-Device Project.

You can also create customized views and add them to the View Selector. See Adding a Customized View to the View Selector.

RemoveViewIcon.png Remove View

Removes the current view. A Confirm dialog appears.

The view is removed from the code.

RotateCurrentView.png Rotate the Current View

Rotates the current view 90 degrees clockwise. Available only for mobile views (not available for desktop views).

HideShowFormFrame.png Hide or show the form frame

Hides the frame of a selected view (or shows the frame if it was previously hidden).

Visual Components

You can add visual components to your multi-device or VCL form by dragging selected components created from the Tool Palette, located in the lower-right section of the IDE, onto the form. These are the components that will be visible to the end user at run time. The objects available 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 list boxes 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.

For visual and nonvisual components in the Form Designer, you can view and set properties and events by using the Object Inspector.

Nonvisual Components

Nonvisual components such as a GestureManager 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.

The IDE allows you to hide or show non-visual components at design time.

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.

Note: This section only covers context menu entries when editing a form. For data modules, see Context Menu for Data Modules.
Item Description

Quick-Design Form

Shows common VCL form design layouts.


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:

Add Control

Lists common controls that can be added to the VCL designer, the controls are parented to the active control.

Add Component

Lists common components that can be added to the VCL designer.

Quick Edit…

Opens the dialog box that allows editing a control.

Quick Edit Icon…

Opens the dialog box that allows editing the form icon.

LiveBindings Wizard

(only if enabled in Tools > Options > LiveBindings)

Opens the LiveBindings Wizard.

Bind Visually...

Opens the LiveBindings Designer.


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

Flip Children

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

Invokes the Edit Tab Order dialog box.

Creation Order...

(nonvisual components)

Opens the Creation Order dialog box.

Hide Non-Visual Components

Allows you to hide or show non-visual components at design time.

Revert to Inherited

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

Add to Repository...

Opens the Add to Repository dialog box.

View as Text

Opens the current form file as text in the Code Editor window. See View as Text.

Text FMX
(multi-device forms)

Text DFM
(VCL forms)

Saves the form file either in text form (enabled) or in binary form (disabled). See Text DFM or Text FMX.

Items Editor

(certain FireMonkey components)

Opens the Items Designer with a focus on the selected control.

Add Item

(certain FireMonkey components)

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

Edit Default Style
Edit Custom Style

(FireMonkey desktop controls)

Opens the FireMonkey Style Designer.

For more information, see Customizing FireMonkey Applications with Styles.

Test Dialog

(VCL only)

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

Shortcut Keys on the Form Designer

The following shortcut keys can be used to move and resize the components on the Form Designer.

Shortcut Action

Ctrl + Mouse selection area

Selects all the child controls from the parent control that are located inside the area selected with the mouse.

Shift + Mouse selection

Selects several controls simultaneously. Hold down Shift key while you click the different controls to select.

Ctrl + Arrow Key

Moves the selected component slowly

Ctrl + Shift + Arrow key

Moves the component faster

Tab or Arrow Key

Changes focus among components

Shift + Arrow Key

Changes the size of the component


Selects the parent component

Ctrl + Tab

Moves forward to the next Editing tab

Ctrl + Shift + Tab

Moves backward to the previous Editing tab

Guidelines and Features

RAD Studio includes several designers for the VCL and FMX, such as caption editors and quick configuration options. Below you can find a broader description of the editors and quick configuration features.

String List Editor

You can find the String List Editor available for any component with stringlist property. The String List Editor allows you to edit string lists (a set of individual strings).

String List EditorI.png

This editor includes a toolbar with the following features:

  • Open files.
  • Save your work.
  • Edit your work with standard clipboard operations (cut, copy, paste, select, delete, and undo options).
  • Status bar with position information.
  • Change the String List Editor to a Code Editor by clicking the Code Editor… option.
  • Help support in case you have any doubts when using this feature.

Access the String List Editor following the next steps:

  1. Select an object such as TMemo control.
  2. Look for the Lines property in the Object Inspector.
  3. Click the Ellipsis.
  4. When the String List Editor opens, edit the text as you like.

Multiline String Editor

You can find the Multiline String Editor available for some of the VCL controls that can display multiple lines of text in their Caption property. This property is available for the Hint property of all controls.

This editor avoids adding newline characters manually. Instead of specifying a multiline string in code, you can simply press Enter to add a new line.


Access the Multiline String Editor following the next steps

  1. Select an object such as TButton control.
  2. Look for the Caption property in the Object Inspector.
  3. Click the Ellipsis.
  4. When the Multiline String Editor opens, edit the text as you like using newline separators in the text.
Note: The content is stored in a single string, not in a string list, as it used to be.

Quick Configuration

RAD Studio offers you different Quick Configuration options that allow you to configure some objects easily. Among them, you can find the following:

Note: For further information regarding the quick configuration options, check the Quick Configuration (VCL) page.

FireMonkey Style Designer

The FireMonkey Style Designer introduces guidelines and other features found in the VCL designer, with a different implementation. Some of these new features are:

1. Components hints are displayed while moving or resizing them.

Components olympus 1.png

2. Controls offer guidelines for alignment on the sides (there is no plan to have a base text alignment, due to the complexity of text positioning for styled controls):

Components olympus 2.png

3. Controls display standard margins distance with a line across and distance indication when this matches margin or padding distance:

Components olympus 3.png

4. The form and component resize controls (grab handles when a control is selected, and the form or frame design edge to resize) have been changed to use the same look and feel as the VCL form designer.

See Also