Creating a Metropolis UI Application Bar
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
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.
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):
- (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:
- Creating a Metropolis UI ComboBox
- Creating a Metropolis UI ToolTip
- Creating Metropolis UI Edit Buttons with Embedded Glyphs
- Creating a Metropolis UI TMetropolisUIListBoxItem
- MSDN: Quickstart: Adding App Bars
- MSDN: Use the App Bar
- FireMonkey Metropolis UI Application
- VCL Metropolis UI Application
- Metropolis UI Application Templates