(UWP開發)在ListView中通過向右滑動展開漢堡菜單

首先在移動APP開發中，手勢滑動已經成為一個必備的技能，無論大大小小的APP都需要擁有手勢滑動功能。在Android和iOS操作系統的APP中，手勢滑動比較普及。然而由於國內有關UWP應用的教程比較少，所以新的開發者在這一塊可能達不到其他兩個平台的能力和標准。所以今天本人在這里給大家介紹一種手勢滑動的方法，希望和大家交流交流。

 

我這里介紹的手勢滑動場景是在擁有以ListView等控件為主的界面中，通過手勢滑動來展開漢堡菜單。有關ListView和SplitView的相關內容就不在這里一一介紹了。下面是功能的實現過程：

1.首先更改Listview的ItemTemplate中的DataTemplate

        <DataTemplate x:Key="News_Without_Photo">
            <RelativePanel Padding="5,10,5,10" ManipulationMode="System,TranslateX">
                <TextBlock x:Name="news_title" Text="{Binding title}" TextWrapping="Wrap" TextTrimming="WordEllipsis" FontSize="17" FontWeight="Bold" RelativePanel.AlignTopWithPanel="True"></TextBlock>
            </RelativePanel>
        </DataTemplate>

注意：這里有一個重要內容。因為ListView本身自帶滑動模式，要是直接添加我們自己的滑動手勢會被ListView屏蔽掉。所以在這個地方，我在DataTemplate中放一個最外層的RelativePanel，或者你用相似的布局控件也可以。在這個地方，ManipulationMode屬性設置成“System,TranslateX”。這樣子就解決了這個問題。

 

2.編寫后台cs代碼

        double x = 0;//用來接收手勢水平滑動的長度

        public TravelListsPage()
        {
            this.InitializeComponent();
            ManipulationCompleted += The_ManipulationCompleted;//訂閱手勢滑動結束后的事件
            ManipulationDelta += The_ManipulationDelta;//訂閱手勢滑動事件
        }

        private void The_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)//手勢滑動中
        {
            x += e.Delta.Translation.X;//將滑動的值賦給x
        }

        private void The_ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)//手勢滑動結束
        {
            if (x > 200)//判斷滑動的距離是否符合條件
            {
                splitview.IsPaneOpen = true;//打開漢堡菜單
            }
        }

在這里，我們通過訂閱了事件ManipulationDelta和事件ManipulationCompleted的事件處理方法來完成手勢滑動展開漢堡菜單。基本的實現過程很簡單。首先在類中定義一個字段x，這個字段用來接收指針或手指在屏幕上的位移量。然后當手勢滑動開始時，The_ManipulationDelta方法將位移量不斷賦值給x。在手勢滑動結束之后，The_ManipulationCompleted方法進行滑動過程的分析判斷。當判斷當前的手勢操作可以打開漢堡菜單時，SplitView的IsPaneOpen屬性為true。至此，整個手勢滑動展開漢堡菜單的過程結束。

如果大家有什么好的想法或是覺得我的思路有所不足，歡迎評論，謝謝。