Show: Delphi C++
Display Preferences

Developing Metropolis UI Applications

From RAD Studio XE3
Jump to: navigation, search

Go Up to Key Application Types


Metropolis UI is a set of features that produce applications compatible with the look and feel of the Microsoft® Windows 8 user interface. You can use Embarcadero® RAD Studio to create Metropolis UI applications using either VCL or FireMonkey. You can also install RAD Studio and run the IDE on Windows 8 or on earlier versions of Windows. Similarly, Metropolis UI applications have the look and feel of Windows 8 when you run the application on Windows 8 or on earlier versions of Windows.


Contents

Metropolis UI is Designed for Touch and Gestures

Windows 8 applications can be designed to work with a touch screen, for either mobile or desktop applications. Like Windows 8, Metropolis UI also works with a traditional mouse for nontouch screens.

Only Metropolis UI desktop applications are supported in XE3. Metropolis UI mobile applications (and WinRT) are not currently supported.

For example, the VCL and FireMonkey Metropolis UI application templates support a pop-up AppBar that is enabled by touch.

RAD Studio Metropolis UI applications support the following gestures:

Custom gestures are not yet supported in RAD Studio Metropolis UI applications.

Design Your Metropolis UI Applications Using Windows 8 UI Guidelines

An important first step in developing a Metropolis UI application is to learn about the Windows 8 user interface and design your application so that it adheres to the visual standards of Windows 8, which are designed for but not limited to touch and gesture.

Compared to the size of the desktop screen, most handheld devices have a small touch panel screen, so an application destined for a mobile device needs to be designed for a small touch screen. In addition, in order to manipulate objects with your fingers, controls must be at least the size of a fingertip. With these considerations, when you convert an existing application to Metropolis UI, you probably need to redesign the configuration of your forms.

For example, Windows 8 controls are typically larger than desktop FireMonkey or VCL controls, and have more "white space" surrounding them than typical desktop applications have.

Live Tiles in the Windows 8 user interface are an example of large-scale controls that are programmatically connected in real time to a live data source. Metropolis UI applications are also maximized (full-screen), and font sizes are larger than in traditional desktop applications.

For more information about Windows 8 UI standards, see Microsoft Guidelines for Windows 8 Applications.

FireMonkey Framework Offers More Support for Metropolis UI

Both VCL and FireMonkey support the Metropolis UI wizards and templates. VCL controls are automatically rendered in the Windows 8 style, but are otherwise unchanged. FireMonkey, however, provides a richer development environment and additional new FireMonkey Metropolis UI controls that are not present in the VCL.

For example, if you add a TAniIndicator to your FireMonkey Metropolis UI application, and apply a Metropolis UI style to TAniIndicator, your application uses the signature animated progress bar known as the Windows 8 Indeterminate Progress Ring. For instructions, see Animated Indeterminate Progress Ring.

Metropolis UI Application Wizards

RAD Studio provides the following predefined templates for creating Metropolis UI applications and forms:

You can also convert a VCL or FireMonkey form into a Metropolis UI form by using the Convert to Metropolis UI Form command on the context menu of the Form Designer. Be aware that if you do this, you cannot revert the Metropolis UI form to the original style, and the layout is not guaranteed to be compliant with Windows 8 UI guidelines.

Metropolis UI Application Templates

When you create a Metropolis UI application, you can choose from several templates or layouts that are available in the Metropolis UI wizards, such as:

  • Blank Metropolis UI template--full-screen, with no predefined layout
  • Grid Metropolis UI template--a two-form application laid out in a grid pattern with horizontal scrolling.
    Here are the FireMonkey forms in the Grid template:
    GridViewFontSm.png       GridPanelSM.png
  • Split Pane Metropolis UI template--a two-form application with a divided layout made up of groups and items, and secondary windows made up of list boxes with associated scrollable text areas
    Here are the FireMonkey forms in the Split Pane template:
    SplitPaneFontSM2.png       SplitPaneFont2SM2.png

Metropolis UI Application Styles

You can apply a predesigned Metropolis UI style to your Metropolis UI application. Four Metropolis UI styles are delivered in RAD Studio, typically located here:

FireMonkey Metropolis UI Styles:

C:\Program Files (x86)\Embarcadero\RAD Studio\10.0\Redist\styles\Fmx

VCL Metropolis UI Styles:

C:\Program Files (x86)\Embarcadero\RAD Studio\10.0\Redist\styles\vcl

The four Metropolis UI styles available in RAD Studio are:

  • MetropolisUIBlack
  • MetropolisUIBlue
  • MetropolisUIDark
  • MetropolisUIGreen

FireMonkey Metropolis UI Controls

FireMonkey has been extended to implement several custom Metropolis UI controls.

In addition, the Metropolis UI samples demonstrate how to implement other Windows 8 controls, such as flipview and flyout.

Embedded Glyph Buttons

Several FireMonkey Metropolis UI buttons have embedded glyphs designed for specific purposes:

Tip: To apply one of these button styles, use either the Add Item context menu command in the Form Designer or the StyleLookup property in the Object Inspector.

For illustrated instructions, see Creating Metropolis UI Edit Buttons with Embedded Glyphs.

For a code sample using a TEditButton, see the EmbeddedGlyphDemo installed with the product at:

C:\Users\Public\Documents\RAD Studio\<n.n>\Samples\FireMonkey

Icons for your Metropolis UI Buttons

The product contains a library of icons and images that you can use in your Metropolis UI applications. The library is typically located at:

C:\Users\Public\Documents\RAD Studio\<n.n>\Styles\VCLMetropolisIconLibrary

Animated Indeterminate Progress Ring

You can enable the Windows 8 signature progress indicator (the indeterminate progress ring) in your FireMonkey Metropolis UI applications. The indeterminate progress ring is a set of animated dots that whirl around a center point, accelerate and decelerate, and disappear and reappear.

TMetropolisUIListBoxItem

FireMonkey has been extended to support this stylable control. When you create a Metropolis UI application using one of the Metropolis UI wizards, you first create a TListBox and then add MetropolisUIListBoxItems. Resizing is typically needed in order for TListBox to accommodate the required size of TMetropolisUIListBoxItem as a Windows 8 control.

AppBar

Metropolis UI applications adhere to the Windows 8 standard and do not use a persistent menu bar at the top of the application window. Instead, Metropolis UI applications use a touch control called an AppBar.

ToolTip

A Metropolis UI style tooltip is a pop-up window that displays help-like information when the mouse or touch device hovers over or touches a control.

ComboBox

TComboBox works as a Metropolis UI control when you associate the combo box with any of the Metropolis UI styles.

Flyout

A Metropolis UI style flyout is a lightweight pop-up window temporarily displayed. A flyout is dismissed by clicking outside its area.

Metropolis UI Application Samples

FireMonkey Metropolis UI application samples demonstrate how to implement some Windows 8 style controls. These samples are part of the product delivery, and are typically installed here:

C:\Users\Public\Documents\RAD Studio\<n.n>\Samples\FireMonkey

In Windows 8, you can quickly get to the Samples using the Search field, as follows:

  1. Start from the Windows 8 tiles window. If you are in desktop mode, press the Windows key on the keyboard to return to the tiles window.
  2. Do either of the following:
    • Simply type a short matching string (such as "sam") when the tiles window is onscreen. The Search field is automatically invoked.
    • Click the magnifying glass charm and then type a short matching string such as "sam" in the Search field.
  3. In the Results for "sam" field, click the Samples folder.


Metropolis UI application samples:

Live Tiles, MetropolisSvc, and LaunchAgentHost

RAD Studio supports development of Live Tiles, the large, colorful interactive blocks that you see on the Windows 8 Start screen, and desktop applications that hook up with the Live Tiles.

  • Using TLiveTile, you can create a Windows 8 style Live Tile.
  • Using the MetropolisSvc service, you can display regular updates on a Live Tile.
  • Using the LaunchAgentHost, you can associate the Live Tile with a desktop application, so that clicking the Live Tile launches the application.

For more information, see:

Microsoft Guidelines for Windows 8 Applications

The Windows 8 user interface is based on a complex, coordinated set of interface guidelines, and the RAD Studio predefined templates follow the Windows 8 guidelines.

When you begin Metropolis UI application development, you should start by organizing your content to enhance intuitive navigation, as described in the MSDN pages about Windows 8 design. You can arrange your content in a hierarchical layout or in a flat layout using our preset Grid View and Split Pane layouts.

For more information about developing Windows 8 applications, see the Windows 8 guidelines pages listed below:

Topics

See Also

Personal tools
Previous Versions
In other languages