Touch-Enabled Tile UI

• Jan 15, 2025
• 5 minutes to read

Touch-enabled applications, sometimes referred to as Hybrid apps, are applications that are easy to use on both desktops and touch devices. There are no strict patterns for building touch-enabled apps, except that controls in the application should be optimized for touch input. This section describes one common application pattern and shows some of DevExpress controls which are most suitable for creating this kind of application.

The figure below illustrates a “Touch-Enabled Hybrid App” demo available in the DevExpress Demo Center.

• Common Application Settings
• Content Area
• Navigation Area
• Switching Between Modules
• Additional Components
• Template Gallery

Common Application Settings

This section enumerates tips useful for developing touch-enabled apps.

• Touch UI Mode

• Touch-Aware Scrolling

• Skins

• Hide Control Borders

• Glyph Skinning

Content Area

The client area displays a module (a UserControl) currently selected by an end-user. The User Control may provide table data, charts, gauges, calendars, terrain data, etc. Hence, you can choose any control that fits your needs.

Although you can enable the static WindowsFormsSettings.TouchUIMode property to make any DevExpress control suitable for the use on touch-enabled devices, some controls are initially designed to fit Hybrid apps. For instance, if you want Data Grid control to present data from a data source, consider using its Tile View instead of traditional tabular Views.

Apart from showing regular tiles, this View can represent data similar to the Microsoft Office 365 data grids (see the figure below). To do so, switch the TileViewItemOptions.LayoutMode to the “List” value.

Another Data Grid View, the WinExplorer View (on the figure below) is helpful for presenting records in a manner similar to Microsoft Windows Explorer.

Navigation Area

It is recommended that you utilize tile-based navigation controls: due to their geometry and size, tiles are easier to hit with fingers compared to traditional toolbar buttons.

• TileNavPane allows you to implement a hierarchical tile-based menu consisting of up to three levels. Built-in navigation breadcrumbs help an end-user keep track of the current location in the navigation hierarchy.

• TileBar is a simplified version of the Tile Nav Pane without the breadcrumb bar. Supports both horizontal and vertical layout modes.

• Switch the AccordionControl to the Hamburger Menu mode to hide navigation elements when they are not needed and save the screen space. To enable this mode, use the AccordionControl.ViewType property.

• Tile Control provides static and live (animated) tiles that can be arranged into multiple columns and rows. This control is appropriate for building simple tile menus.

Switching Between Modules

For multi-screen applications, utilize the following DevExpress content containers:

• NavigationFrame container helps you implement a single document interface (SDI). It features no navigation buttons or tab headers for its child modules, to switch between modules you have to manually change the NavigationFrame.SelectedPage property. Provides built-in animation effects.
• TransitionManager component supplies any content container with animation effects, played when a container changes its modules. When utilizing Navigation Frame, Transition Manager is not required.

Additional Components

The following lists detail other useful controls and components suitable for touch-enabled applications.

• Buttons and Menus

• Flyouts and Pop-Up Menus

• Messages

• Notifications

• Form Layout

• Splash Screen

• Split Container

• Auxiliary Containers

Automatic UI Generation

The Template Kit for WinForms includes various project templates to jump-start application development for .NET 8+.

Note

Use the DevExpress Project Template Gallery if your project targets .NET Framework.