經(jīng)過近些年智能手機(jī)App的不斷發(fā)展，用戶已經(jīng)不僅僅滿足于功能上的需求。UI、設(shè)計(jì)等非功能點(diǎn)逐漸在App體驗(yàn)中占了大多數(shù)的分?jǐn)?shù)。不知從何時起，滑動手勢就成為了App的一個標(biāo)配。他不僅僅是一個功能，更是一個UI設(shè)計(jì)。其有以下幾個優(yōu)點(diǎn)：

　　1.方便了單手操作。在當(dāng)今大屏手機(jī)占有率越來越高的趨勢下，簡潔方便的單手操作模式是很有必要的。

　　2.美化了UI。你可能會有疑問，這是個功能，為什么美化了UI呢？其實(shí)，手勢操作的另一個利器就是隱藏了部分不是那么美觀的UI，使得界面看上去更簡。比如郵件App ，你如果要在界面上加入刪除、標(biāo)記、已讀未讀等Button，那么界面會相當(dāng)擁擠。

　　3.讓用戶覺得你的App技術(shù)含量不是那么低。大多數(shù)用戶不懂技術(shù)，他們只看功能。如果別人有的東西你沒有，他們就會認(rèn)為你的App技術(shù)含量過低。?

綜上所述，在你的App中加上滑動手勢非常有必要。

本文GitHub地址

一、手勢操作流程關(guān)鍵點(diǎn)

　　手勢操作有三個關(guān)鍵狀態(tài):操作開始時、操作進(jìn)行時、操作結(jié)束時。

　　　　1.操作開始時

在用戶開始手勢操作的那一刻，這時候主要進(jìn)行一些初始化操作。??

　　　　2.操作進(jìn)行時

這時候不斷的計(jì)算用戶手勢相關(guān)的各種數(shù)據(jù)，方便后續(xù)處理。??

　　　　3.操作結(jié)束時

這時候就是自由發(fā)揮了，你可以處理一些事件、功能。比如：頁面后退、顯示刪除按鈕等等?。

有一點(diǎn)需要注意：用戶可能并不是完全的水平或者豎直滑動，所以最好加上速度和位移長度雙重判斷處理。

二、實(shí)戰(zhàn)演示

在旺信UWP項(xiàng)目中，我們使用了滑動手勢來進(jìn)行頁面的后退。下面我就以這個例子進(jìn)行剖析。因?yàn)槊總€頁面都需要用到手勢，所以最好建一個BasePage類，然后讓所有頁面繼承這個類。

　　　　1.相關(guān)事件添加

　　在BasePage的構(gòu)造函數(shù)中添加相關(guān)事件和手勢監(jiān)聽的模式

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.手勢操作時的處理?

private void BasePage_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e) { if (_tt.X + e.Delta.Translation.X < 0) { _tt.X = 0; return; } _tt.X += e.Delta.Translation.X; }

　　　　3.手勢結(jié)束時的操作

private void BasePage_ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e){double abs_delta = Math.Abs(e.Cumulative.Translation.X);double speed = Math.Abs(e.Velocities.Linear.X);double delta = e.Cumulative.Translation.X;double to = 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;var s = new Storyboard();var doubleanimation = new DoubleAnimation() { Duration = new Duration(TimeSpan.FromMilliseconds(120)), From = _tt.X, To = to };doubleanimation.Completed += Doubleanimation_Completed;Storyboard.SetTarget(doubleanimation, _tt);Storyboard.SetTargetProperty(doubleanimation, "X");s.Children.Add(doubleanimation);s.Begin();}

　　　　4.結(jié)束后的動畫效果

　　　　 private void Doubleanimation_Completed(object sender, object e){if (action == 0)//這里進(jìn)行動畫結(jié)束后的操作，比如：頁面后退_tt = this.RenderTransform as TranslateTransform;if (_tt == null) this.RenderTransform = _tt = new TranslateTransform();_tt.X = 0;}

　　　　這里為了視覺上的美觀，在手勢結(jié)束后增加了一段動畫效果。使頁面間的跳轉(zhuǎn)顯得不那么生硬。

三、一些需要注意的地方

有些控件自身帶有手勢功能，如:listview、scrollview等。這時候上邊自己添加的手勢事件就會被自動屏蔽掉。下邊是我個人的解決方案，如果你有更好的方法，歡迎一起討論。??

方案一：在DataTemplate上下手，加一個StackPanel，然后給他來個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>

?

　　方案二：這種方式和上邊那種一樣，只不過是統(tǒng)一處理了

　　　　<Setter Property="ItemsPanel"><Setter.Value><ItemsPanelTemplate><StackPanel Orientation="Vertical" Background="Transparent" ManipulationMode="System,TranslateX"/></ItemsPanelTemplate></Setter.Value></Setter>

?

轉(zhuǎn)載于:https://www.cnblogs.com/ms-uap/p/5275157.html

總結(jié)

以上是生活随笔為你收集整理的UWP滑动后退的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。