你的位置:首页 > 操作系统

[操作系统](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。至此,整个手势滑动展开汉堡菜单的过程结束。

如果大家有什么好的想法或是觉得我的思路有所不足,欢迎评论,谢谢。