UWP Swipe gesture

With the development of smartphone apps in recent years, users are not only satisfied with the functional requirements. Non-functional points such as UI, design, and so on, have gradually accounted for most of the scores in the app experience. The swipe gesture becomes a standard part of the app when it's not known. He is more than just a feature, it is a UI design. It has several advantages:

1. Convenient for one-handed operation. In today's large-screen mobile phone share more and more high trend, simple and convenient one-hand operation mode is very necessary.

2. Beautify the UI. You may be wondering, this is a function, why beautify the UI? In fact, another tool for gesture manipulation is to hide some of the less beautiful UI, making the interface look simpler. such as the Mail app, if you want to add delete, mark, read Unread button, then the interface will be quite crowded.

3. Let the user feel that your app technology content is not so low. Most users do not know the technology, they only look at features. If someone else has something you don't, they'll think your app is too low-tech.

In summary, it is necessary to add a swipe gesture to your app.

First, gesture operation process key points

Gesture operations have three key states: When the action starts, when the action is made, and when the operation ends.

1. When the operation starts

at the moment when the user starts the gesture operation, there are some initialization operations.

2. When the operation is in progress

At this time constantly calculate user gestures related to various data, easy to follow-up processing.

3. At the end of the operation

This is the free play, you can deal with some events, functions. For example: page back, show Delete button and so on.

One thing to note: The user may not be completely horizontal or vertical sliding, so it is better to add speed and displacement length double judgment processing.

Second, the actual combat demonstration

In the Mong Shun UWP project, we used a swipe gesture to rewind the page. Let me take this example to analyze. Because gestures are needed for every page, it's a good idea to build a BasePage class, and then have all the pages inherit the class.

1. Related events added

 private   TranslateTransform _tt;  this . Manipulationmode = Manipulationmodes.translatex;  this . manipulationcompleted += basepage_manipulationcompleted;  this . Manipulationdelta += Basepage_manipulationdelta; _tt  = this . RenderTransform as   TranslateTransform;  if  (_tt = = null   this . RenderTransform = _tt = new  TranslateTransform (); 

2. Handling when gestures are in operation

Private void Basepage_manipulationdelta (object  sender, Manipulationdeltaroutedeventargs e)  {     if  0)      {          0;          return ;      }       + = e.delta.translation.x  ;     }

3. Actions at the end of a gesture

        Private voidBasepage_manipulationcompleted (Objectsender, Manipulationcompletedroutedeventargs e) {                DoubleAbs_delta =Math.Abs (e.cumulative.translation.x); DoubleSpeed =Math.Abs (e.velocities.linear.x); DoubleDelta =e.cumulative.translation.x; Doubleto =0; if(Abs_delta < This. ActualWidth/3&& Speed <0.5) {_tt. X=0; return; } Action=0; if(Delta >0) to= This.                ActualWidth; Else if(Delta <0)                    return; vars =NewStoryboard (); varDoubleAnimation =NewDoubleAnimation () {Duration =NewDuration (Timespan.frommilliseconds ( -), from = _tt. X, to =To }; Doubleanimation.completed+=doubleanimation_completed;                Storyboard.settarget (DoubleAnimation, _TT); Storyboard.settargetproperty (DoubleAnimation,"X");                S.children.add (DoubleAnimation);                    S.begin (); }

4. After the end of the animation effect

Private voidDoubleanimation_completed (ObjectSenderObjecte) {if(Action = =0) masterpage.backrequest (sender); Else{masterpage.mainentrytapped (PageID+ Action +3) %3); } _tt= This. RenderTransform asTranslateTransform; if(_tt = =NULL) This. RenderTransform = _tt =NewTranslateTransform (); _tt. X=0; }

for Visual aesthetics, an animated effect is added to the end of the gesture. Make the jump between pages appear less blunt.

Iii. some areas to be aware of

Some controls themselves have gesture functions, such as ListView, ScrollView, and so on. At this time, the above-added gesture event will be automatically blocked out. Below is my personal solution, if you have a better way, welcome to discuss together.

Scenario One: DataTemplate up and down, add a stackpanel, and give him a Manipulationmode= "System,translatex"

<scrollviewer grid.row="1"scrollviewer.horizontalscrollbarvisibility="Hidden"scrollviewer.verticalscrollbarvisibility="Hidden"> <stackpanel orientation="Vertical"Manipulationmode="System,translatex"> <itemscontrol x:name="control_blacklist"Itemssource="{Binding blacklist}"grid.row="1"> <ItemsControl.ItemTemplate> <DataTemplate> <stackpanel orientation="Vertical"Manipulationmode="System,translatex"> <mine:mineblacklistcontrol background=" White"></mine:MineBlackListControl> <line x1="1"style="{StaticResource Wxlinestyle}"Verticalalignment="Bottom"/> </StackPanel> </DataTemplate> </ itemscontrol.itemtemplate> </ItemsControl> </StackPanel> </scrollviewer >

Scenario Two: This is the same way as the top one, but it's a unified approach.

<setter property="itemspanel">            <Setter.Value>                < itemspaneltemplate>                    <stackpanel orientation="Vertical" background="  Transparent "manipulationmode="system,translatex"/ >                </ItemsPanelTemplate>            </Setter.Value>        </Setter>

UWP Swipe gesture