(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="" FontWeight="Bold" RelativePanel.AlignTopWithPanel="True"></TextBlock>
</RelativePanel>
</DataTemplate>
注意:这里有一个重要内容。因为ListView本身自带滑动模式,要是直接添加我们自己的滑动手势会被ListView屏蔽掉。所以在这个地方,我在DataTemplate中放一个最外层的RelativePanel,或者你用相似的布局控件也可以。在这个地方,ManipulationMode属性设置成“System,TranslateX”。这样子就解决了这个问题。
2.编写后台cs代码
double x = ;//用来接收手势水平滑动的长度
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 > )//判断滑动的距离是否符合条件
{
splitview.IsPaneOpen = true;//打开汉堡菜单
}
}
在这里,我们通过订阅了事件ManipulationDelta和事件ManipulationCompleted的事件处理方法来完成手势滑动展开汉堡菜单。基本的实现过程很简单。首先在类中定义一个字段x,这个字段用来接收指针或手指在屏幕上的位移量。然后当手势滑动开始时,The_ManipulationDelta方法将位移量不断赋值给x。在手势滑动结束之后,The_ManipulationCompleted方法进行滑动过程的分析判断。当判断当前的手势操作可以打开汉堡菜单时,SplitView的IsPaneOpen属性为true。至此,整个手势滑动展开汉堡菜单的过程结束。
如果大家有什么好的想法或是觉得我的思路有所不足,欢迎评论,谢谢。
(UWP开发)在ListView中通过向右滑动展开汉堡菜单的更多相关文章
- [UWP开发]在windows10中设置壁纸~UserProfilePersonalizationSettings
在之前的wp8.1和wp8中,微软没有公开设置壁纸的API,只有一个设置锁屏的API,但在Windows10中,微软为我们提供了设置壁纸的API:TrySetWallpaperImageAsync,他 ...
- odoo开发笔记--一个模块显示两个一级菜单
场景描述: 在已启动开发的模块中,odoo顶部一级菜单只有一个“会员管理”,需求是:在同一级顶部菜单,增加新菜单“产品管理”.举例如图: 处理方式: 按照odoo的机制,实现这种效果,可以 ...
- 张高兴的 UWP 开发笔记:横向 ListView
ListView 默认的排列方向是纵向 ( Orientation="Vertical" ) ,但如果我们需要横向显示的 ListView 怎么办? Blend for Visua ...
- Viewbox在UWP开发中的应用
Windows 8.1 与Windows Phone 8.1的UAP应用,终于在Windows 10上统一到了UWP之下.原来3个不同的project也变为一个.没有了2套xaml页面,我们需要用同一 ...
- Windows10(uwp)开发中的侧滑
还是在持续的开发一款Windows10的应用中,除了上篇博客讲讲我在Windows10(uwp)开发中遇到的一些坑,其实还有很多不完善的地方,比如(UIElement.Foreground).(Gra ...
- UWP开发入门(十)——通过继承来扩展ListView
本篇之所以起这样一个名字,是因为重点并非如何自定义控件,不涉及创建CustomControl和UserControl使用的Template和XAML概念.而是通过继承的方法来扩展一个现有的类,在继承的 ...
- UWP开发入门(十四)—— UserControl中Adaptive UI的小技巧
本篇我们通过绘制一个非常简单的UserControl控件,来分享一下对Adaptive UI的理解及一些图形绘制的技巧. 现在流行的APP都少不了精致的用户头像,首先假设我们需要绘制如下的图形作为默认 ...
- UWP开发中的方向传感器
在UWP开发中,我们能使用的到方向有三种: OrientationSensor下的四元数:Compass罗盘的HeadingMagneticNorth:以及SimpleOrientationSenso ...
- UWP: ListView 中与滚动有关的两个需求的实现
在 App 的开发过程中,ListView 控件是比较常用的控件之一.掌握它的用法,能帮助我们在一定程度上提高开发效率.本文将会介绍 ListView 的一种用法--获取并设置 ListView 的滚 ...
随机推荐
- Java 引用分类:StrongReference、SoftReference、WeakReference、PhantomReference
一,定义 在Java中,引用的定义是:如果reference类型的数据中存储的数值代表的是另一块内存的起始地址,就称这块内存代表着一个引用.后面在JDK1.2开始,引用的概念被扩充,引用被分为强引用( ...
- 美团HD(3)-加载分类导航数据
DJHomeViewController.m /** 设置导航栏左侧内容 */ - (void)setupLeftNavItem { // Logo UIImageView *logoView = [ ...
- IE的F12开发人员工具不显示
IE的F12开发人员工具不显示问题: 按下F12之后,开发人员工具在桌面上看不到,但是任务栏里有显示.将鼠标放在任务栏的开发人员工具上,出现一片透明的区域,选中之后却出不来.将鼠标移动到开发人员工具的 ...
- Azure上的那些IP
相信第一次接触Azure的读者都会碰到这样一个问题,就是Azure的IP地址,笔者第一次接触Azure也是被搞懵逼了,一会儿VIP,不知道的还以为是会员的意思呢,一会儿又是DIP,后来又来了个PIP, ...
- 搭建Apache Web服务器
1.下载Apache服务器的安装包 地址:http://httpd.apache.org/download.cgi 从http://archive.apache.org/dist/httpd/bina ...
- 双向数据绑定(angular,vue)
最近github上插件项目更新了关于双向数据绑定的实现方式,关于angular和vue. angular众所周知是使用的脏检查($dirty).一开始大家会认为angular开启了类似setInter ...
- 30多条mysql数据库优化方法,千万级数据库记录查询轻松解决(转载)
1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索 ...
- 如何灵活运用Linux 进程资源监控和进程限制
导读 每个 Linux 系统管理员都应该知道如何验证硬件.资源和主要进程的完整性和可用性.另外,基于每个用户设置资源限制也是其中一项必备技能. 在这篇文章中,我们会介绍一些能够确保系统硬件和软件正常工 ...
- CentOS添加用户并加入sudo权限
# 新增用户 useradd username # 设置密码 passwd username # 加入sudo ## 打开sudo配置文件 visudo ## 找到下面这两行,并在下面新增红色部分 # ...
- 前后端分离中,Gulp实现头尾等公共页面的复用
前言 通常我们所做的一些页面,我们可以从设计图里面看出有一些地方是相同的.例如:头部,底部,侧边栏等等.如果前后端分离时,制作静态页面的同学,对于这些重复的部分只能够通过复制粘贴到新的页面来,如果页面 ...