Touch Target Support in FireMonkey
Go Up to Developing Metropolis UI Applications
In a touch-screen application, each control can be seen as a touch target. When you design any application for touch devices, you need to determine how big the touch target area should be for each control. Consider whether you should expand the touch target area by specifying TouchTargetExpansion values for controls that users are expected to select by hand.
- If a touch target is too small, detecting a user's selection can be difficult.
- If a touch target is too large, users can unintentionally activate the wrong control.
When the touch target of a control is expanded, it affects all pointer interactions with the control (such as mouse events, click events, and so forth). The expanded target size of the control impacts all input sources as well, both mouse and touch.
The following figure illustrates the four TouchTargetExpansion values that you can set for a FireMonkey control:
Specifying Touch Targets
The TouchTargetExpansion property specifies an area around a control that is part of the touch target for that control. In a FireMonkey application, all the styled controls have the TouchTargetExpansion property, which specifies a touch target expansion or buffer area on any side of the control.
To control the touch target of a FireMonkey control:
- In the Form Designer or the Structure View, select the FireMonkey control.
- In the Object Inspector, locate the TouchTargetExpansion property:
- Specify a value in pixels for each side of the control:
- Bottom
- Left
- Right
- Top
You can specify any combination of the four sides.
The number of pixels that you need to specify depends on your application's touch requirements and the amount of space available on the form. Start with an arbitrary number, such as 5 or 10, and revise after testing.
Metropolis UI Touch Applications
For specific guidelines on setting touch target sizes in a Metropolis UI application for Windows 8, see: Touch interaction design (Metro style apps)