Touch Gesture Support for XAML NetAdvantage controls

Damyan Petev / Wednesday, June 6, 2012

It has been a clear trend over the past years to move a big deal of interaction with applications from the usual desktop experience to touch-enabled versions – easily portable and compact tablets, comfortable touch displays and a whole army of mobile devices. While they definitely can point towards a certain look for the future, I won’t go as far as predicting that, but one thing is clear – touch-enabled systems are more and more used in industries and everyday life - now, more than ever and with that comes natural demand for applications for them, so if you’re a XAML developer we thought we’d give you a head start.

Look, no mouse!

.. or keyboard for that matter – transferring or creating experience originally meant for desktop to, say, a tablet has some special requirements. While our fingers are very comfortable to use, they are not as precise as a mouse single-pixel pointer can be. That means a good amount of interactions need some extra attention to work neatly. We invested a lot of effort to make our Silverlight and WPF controls ready for the task with the first release for 2012. To provide a suite of touch-friendly components multiple interactions areas in the controls have dramatically increased in size and just for a good measure invisible buffer area on some to make them that much easier to hit and interact with and we specially designed a very clean and very touch oriented Metro theme. Take a simple zoom bar control you can see as standalone (xamZoombar) as well as present in the form below in many major controls like charts, maps, schedules, etc.:

The zoom bar touch interaction ares in IG theme and Metro theme.

The above is exactly the same bar in the same size and you can see just how much bigger its interaction target zones are in Metro theme. There are more little tweaks you can read on about in Metro Style Support in NetAdvantage for XAML 2012 Vol.1.

One other thing besides making the current implementations easier to put your finger on (literally) is to provide some extra interaction through support for

Gestures!

They are moves that come naturally (or at least I feel they do now and I can’t imagine interaction any other way for some) and are frankly expected of applications.

Note: The following awesome images used to visualize the gestures are taken from this touch-related article on Wikipedia.

The defaults

Tap gesture

Tap

 

As you’d expect the most basic tap and double tap would do pretty much what a mouse click would do. A simple tap (a short touch) would click buttons and select various items across controls (cells, grids, tiles, etc.).

 

 

 

Double tap gesture

Double Tap

A double tap (two consecutive touches in a short period of time) would either enter edit mode or open some item or just be a double click equivalent.

 

 

 

 

Long press gesture. 

Long Press

Or Tap-and-hold or simple hold (how you might’ve seen the Windows Phone event) is quite self explanatory – touch and don’t move or lift your finger for short period of time. That would usually open contextual menus as the default equivalent for this is usually right-click or just act as a tap if no applicable action s available.

 

 

The extra (neat)

All of those are somewhat the default group that correspond to the mouse and pretty much make an application usable in touch environment, but not really comfortable. Here is where the interesting stuff come in:

Pan gesture.

 

Pan

This gesture is about touching and moving without loosing contact. It’s part of those interactions that I accept as natural but sometimes but it’s also a bit twofold. What I mean by that is even though this is much better than using scrollbars on a touch device, it can sometimes override other normal and desired functions on some controls. This is true for controls holding a large number (thus scrollable) of movable or resizable items – for example a tile manager or a schedule. Following that duality of the gesture is also how our controls handle it:

  • Sure enough, when you touch and immediately move in a scrollable element it will scroll by default, then attempt to move/resize an element if over one.
  • If you, however, hold for about half a second (think of as a combination of long press and pan) the defaults shift – an attempt would be made to activate a secondary action - resize or move an element if over one and only after those are deemed non-applicable will scroll take place.

 

Flick gesture.

 

Flick

This is much like the normal pan, but much faster – usually described as a quick brush over the surface of the scrollable area. This gesture action result will be scroll, but with the added bonus of inertia. After all it’s look and feel rather unnatural after applying a rapid, yet strong ‘push’ if the scrollable content just suddenly jams in one place. It’s not just pleasing, but also helpful to be able to scroll through large numbers of elements in a few fast moves.

Control

On most scrollable controls (grids, combos, data tree, tile manager and schedule)  you will find he ability to turn off the pan and flick behaviour should you so desire in order to leave just the default tap=select behaviour on.

Examples

After showing you what to expect when interacting with our XAML controls in touch-enable environment, let’s give a few practical examples.

Firstly, I guess I don’t need to really show what a tap would do. Things are similar for double-click – enter edit mode in a grid or open a schedule item’s details. The long press is usually mapped as a right click equivalent and therefore it will open contextual menus and at least in my tests will show tooltips on something like the chart or ribbon.

The most important part is of course productivity. Plenty of our controls are meant for that – build applications faster, handle larger sets of data and with the latter comes the need to navigate some long ‘lists 'of items and Pan helps a lot because it’s much more like the mouse scroll wheel then the actual application scrollbar – I don’t know about you but I rarely use the bar :)

As explained above the great benefit with such controls as this gesture allows to navigate the controls and also perform actions with their child elements, like moving tiles inside the tile manager when you actually want to:

Using pan to move an item inside the XamTileManager

Now I can’t quite display my finger on this (although I could try), but believe me it’s there and it’s moving, but just because I paused before i started moving, now I’m dragging this item instead of scrolling and that was the intent.

Back to productivity, the flick is just part of it – it’s such a nice feeling breezing through records with great ease. Frankly you can just try our samples – try the any of the grids with plentiful amount of records and flick away!

Summary

The XAML NetAdvantage controls for Silverlight and WPF are now better suited to handle touch-enabled interaction scenarios (Windows Phone have such support by default after all) and provide you with some nice features along the way. Much work has gone into creating a special Metro theme for all controls that is not just stylish, but also functional as it is designed with touch in mind.  Besides all the default tap interactions, you also get a nice pan functionality for scrollable content that is smart enough designed to let you choose between scrolling and moving/resizing an item with a simple hold. And you also get flick for when the data really gets long. And this is just making our controls touch-friendly which comes before touch-optimized, but still the foundation is here and an exciting future is ahead.

I’ll skip a demo here as this is really a BYOD kind of feature – do so, grab a touch display or grab a tablet – visit our Silverlight Online samples or download the WPF Samples Browser – I don’t think there’s a UI control out there without a Metro theme, so go, apply that and see the difference for yourself. Note that there might be some limitations for the support based on platform or environment. As always, you can follow us on Twitter @DamyanPetev and @Infragistics and stay in touch on Facebook, Google+ and LinkedIn!