Page 44 - MSDN Magazine, April 2018

UNIVERSAL WINDOWS PLATFORM
Using Fluent:
Swipe Gesture Action and
Connected Animations
Lucas Haines
Application developers have more and more device types to deal with, from ubiquitous smartphones and traditional desktop and laptop PCs, to large-format touchscreen displays and even emerging virtual and augmented reality platforms like HoloLens. The Fluent Design System is specifically designed and continually evolving to make it is easier for developers to integrate modern features for the mixed device ecosystem. The Fluent fea- tures added to the Windows 10 platform in the Fall Creators Update are a powerful case in point, enabling applications to feel natural, no matter on what device they run.
Fluent UI features like light, blur and depth combine to enable compelling and intuitive experiences that allow users to do more. But until recently, challenges remained for users trying get the most out of their devices. With the Windows 10 Fall Creators Update, Fluent adds two features that solve both problems today: Swipe Gesture Actions and Connected Animations.
Swipe Gesture Actions
It comes as no surprise that sales of touchscreen-equipped PCs continue to grow. The question for developers is how to help users
do more by enabling interaction models that work both for touch- screen PCs and classic keyboard and mouse.
The answer comes in the form of on-object commanding, which has been around for years via either a right-click or a tap and hold. These tried and true methods are well understood, but with a bit of work you can build in accelerators that leverage the capabilities of the device ecosystem to make them better.
Enter gesture actions, which are great accelerators that work for both touch and keyboard users. Gesture actions are a handy acceler- ator for contextual commands typically hidden behind a right-click menu or on a separate commanding bar. Other examples of gesture actions include hover buttons, swipe, and keyboard accelerators.
Swipe for commanding isn’t a new concept. The interaction pat- tern exists on both Google Material Design and Apple iOS. It’s useful for quickly triaging items in a list—for example, deleting photos or e-mails in a scroll—or for revealing the most-used commands in a scenario. The XAML Swipe Control makes it very easy to add this great functionality to your Universal Windows Platform (UWP) apps.
The Swipe control contains two behaviors, Reveal mode and Execute mode:
Reveal mode can display one or more commands associated with a selected item so that a user can select from among them. For instance, if you have a list of messages and you want to quickly enable forwarding, creating a follow up reminder, or scheduling a meeting, reveal mode makes this possible without forcing the user to navigate screens. This can be very powerful for the “on the go” user.
Execute mode completes the command with a simple gesture. The most common and easiest example would be delete. I no longer
This article discusses:
• Swipe gesture actions in UWP apps
• Connected animations in UWP apps
Technologies discussed:
Windows 10, Universal Windows Platform, XAML, C#, Visual Studio
38 msdn magazine