Creating a Metropolis UI Application Bar

From RAD Studio
Jump to: navigation, search

Go Up to Developing Metropolis UI Applications


Windows 8 Metropolis UI applications 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.

An AppBar can appear at the bottom of the screen, the top of the screen, or both. AppBars are normally not visible, but become visible in response to gestures, mouse clicks or the press of a command key. AppBars can also be made visible programmatically. When both top and bottom AppBars are used, they are typically both made visible at the same time.

Here are the standard events that might trigger the AppBars to become visible:

  • Swipe gesture from the bottom edge of the screen, towards the center of the screen
  • Swipe gesture from the top edge of the screen, towards the center of the screen
  • Right-clicking a location that does not have a context menu
  • Pressing the WINDOWS-Z key

FireMonkey Implementation of Metropolis UI AppBar

You can use existing styled FireMonkey controls and gestures to create a Metropolis UI AppBar for FireMonkey Metropolis UI applications.

An AppBar is like a toolbar, and it can be implemented using a FireMonkey TToolBar control, TGridLayout and a TGestureManager.

The AppBar is enabled in all the Metropolis UI wizards. To display the AppBar at run time, either swipe up (on a touch device) or right-click the application.

VCL Implementation of Metropolis UI AppBar

The VCL Metropolis UI Style AppBar is implemented as a TPanel that is the width of the screen and located along the lower edge of the screen.

You can see the AppBar in any of the Metropolis UI templates, where the AppBar contains a single button (the Windows 8 style Close button, but you can add more buttons):

XButtonMetro.png
(AppBar pops up above the horizontal scroll bar)

In the InteractiveGestureOptions property of TScrollBox, uncheck igoPanSingleFingerVertical so that it does not handle events of up and down flicks. This way, you will be transferred to the GestureManager (flick events are transmitted sequentially to the parent of the control and eventually associated with the form).

To support the upward flick from the lower edge of the screen, place an ActionList and a TGestureManager. Enable the Up gesture on the Touch.Gestures.Standard property of the form, and assign this as a new action (Action1). In the OnExecute event of Action1, set the Visible property of the AppBar TPanel to True. Then the AppBar is displayed when you flick or swipe the screen from bottom to top.

On the AppBar you can place buttons such as the button for closing the application. Connect the OnClick event of the button to:

Delphi:

Application.Terminate;

C++:

Application->Terminate();

See Also