Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [Expand]What's Installed
 [Collapse]Build an Application
  [Collapse]Choose Application UI
   [Expand]Office Inspired UI
   [Expand]Visual Studio Inspired UI
   [Expand]Windows Modern UI
    Touch-Enabled Tile UI
   Data Management Controls
  [Expand]Printing and Exporting
  [Expand]WinForms MVVM
  [Expand]Skins
  [Expand]Localization
  [Expand]Right-to-Left Layout
   Redistribution and Deployment
 [Expand]Controls and Libraries
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Touch-Enabled Tile UI

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

Expanded 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 WindowsFormsSettings.TouchUIMode static 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.


  • Touch-Aware Scrolling
    Set the WindowsFormsSettings.ScrollUIMode static 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.

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

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


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


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

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

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


  • Flyouts and Pop-Up Menus
    Employ the Flyout Panel component to create flat flyouts and pop-ups.


  • Messages
    Utilize the Flyout Dialog control to create modern notification messages.


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

  • Form Layout
    As for any other UI type, use the Layout Manager 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.


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

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

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.

How would you rate this topic?​​​​​​​