Touch-Enabled Tile UI

  • 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. You can read more about developing for touch-enabled devices in the Intel's Developer Zone blog. 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.

TouchEnabledTileUI

Common Application Settings

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

  • Touch UI Mode

    DevExpress provides the WindowsFormsSettings class with multiple static properties that affect the appearance and behavior common to all DevExpress controls. These properties allow you to modify the entire application with just one setting. For Hybrid applications, there is the static WindowsFormsSettings.TouchUIMode property. With this setting enabled, all UI elements will tend to increase their sizes and margins, making it more comfortable for your end-user to work using their fingers. For instance, the following figure illustrates the Ribbon Control with and without TouchUI mode applied.

    Ribbon - TouchUI Mode On-Off

  • Touch-Aware Scrolling

    Set the static WindowsFormsSettings.ScrollUIMode property to Touch in order to enable scrolling using touch gestures.

  • Skins

    Use modern DevExpress Skins (such as "Office 2013" and newer) as they offer a 'clean' and flat appearance.

  • Hide Control Borders

    Hide unnecessary borders by disabling the controls' BorderStyle or BorderVisibility properties.

  • Glyph Skinning

    The Glyph Skinning feature paints item icons with these items' fore colors, which creates a flat monochrome application look.

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.

TouchInspiredUI - TileView Grid

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.

Data Grid - Compact View

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

WinExplorer View - Style Medium

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.

    TouchInspiredUI - TileNavPane

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

    TouchInspiredUI - TileBar

  • 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.

    TouchInspiredUI - Tile Control

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

    Instead of standard rectangular buttons, use the WindowsUIButtonPanel that hosts circle-shaped Windows 10-inspired buttons.

    OfficeInspiredUI - WindowsUI Buttons

    Using the same control, you can create simple toolbars with built-in peek panels (see the WindowsUIButtonPanel.QueryPeekFormContent event).

    Hybrid App - Menu

  • Flyouts and Pop-Up Menus

    Employ the Flyout Panel component to create flat flyouts and pop-ups.

    FlyoutPanel - Buttons

  • Messages

    Utilize the Flyout Dialog control to create modern notification messages.

    Hybrid App - Message

  • Notifications

    For Windows Modern-inspired notifications, utilize the Toast Notification Manager component.

  • Form Layout

    As for any other UI type, use the Layout and Data Layout Controls component to effectively arrange your UI elements across an application module. The Data Layout Control can automatically generate an editing UI based on a given data source.

  • Splash Screen

    Utilize the Splash Screen Manager to supply your application with splash screen and wait forms.

  • Split Container

    The SplitContainerControl component breaks a form space into two resizeable regions. You can modify the SplitContainerControl.CollapsePanel property to replace a drag-and-drop splitter with an expand/collapse button.

    Hybrid App - Split Container

  • Auxiliary Containers

    One-pixel border side panels support panel snapping and overlay resize features.

Automatic UI Generation

The DevExpress Template Gallery provides various templates to jump-start application development. For touch-enabled applications, go to the gallery "WinForms Popular UIs | UI-ready Form" section and select the "Hybrid UI" type.

Hybrid App - Template Gallery

For data-managment applications, you can utilize the Scaffolding Wizard to automatically generate a fully functional and ready to use application based on the given data source. The application created by Wizard consists of multiple separate interconnected modules and follows the MVVM pattern.