UWP滑动后退

  经过近些年智能手机App的不断发展,用户已经不仅仅满足于功能上的需求。UI、设计等非功能点逐渐在App体验中占了大多数的分数。不知从何时起,滑动手势就成为了App的一个标配。他不仅仅是一个功能,更是一个UI设计。其有以下几个优点:

  1.方便了单手操作。在当今大屏手机占有率越来越高的趋势下,简洁方便的单手操作模式是很有必要的。

  2.美化了UI。你可能会有疑问,这是个功能,为什么美化了UI呢?其实,手势操作的另一个利器就是隐藏了部分不是那么美观的UI,使得界面看上去更简。比如邮件App ,你如果要在界面上加入删除、标记、已读未读等Button,那么界面会相当拥挤。

  3.让用户觉得你的App技术含量不是那么低。大多数用户不懂技术,他们只看功能。如果别人有的东西你没有,他们就会认为你的App技术含量过低。 

综上所述,在你的App中加上滑动手势非常有必要。

本文GitHub地址

一、手势操作流程关键点

  手势操作有三个关键状态:操作开始时、操作进行时、操作结束时。

    1.操作开始时

在用户开始手势操作的那一刻,这时候主要进行一些初始化操作。  

    2.操作进行时

这时候不断的计算用户手势相关的各种数据,方便后续处理。  

    3.操作结束时

这时候就是自由发挥了,你可以处理一些事件、功能。比如:页面后退、显示删除按钮等等 。

有一点需要注意:用户可能并不是完全的水平或者竖直滑动,所以最好加上速度和位移长度双重判断处理。

二、实战演示

在旺信UWP项目中,我们使用了滑动手势来进行页面的后退。下面我就以这个例子进行剖析。因为每个页面都需要用到手势,所以最好建一个BasePage类,然后让所有页面继承这个类。

    1.相关事件添加

  在BasePage的构造函数中添加相关事件和手势监听的模式

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.手势结束时的操作

        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.结束后的动画效果

     private void Doubleanimation_Completed(object sender, object e){if (action == 0)//这里进行动画结束后的操作,比如:页面后退_tt = this.RenderTransform as TranslateTransform;if (_tt == null) this.RenderTransform = _tt = new TranslateTransform();_tt.X = 0;}

    这里为了视觉上的美观,在手势结束后增加了一段动画效果。使页面间的跳转显得不那么生硬。

三、一些需要注意的地方

有些控件自身带有手势功能,如: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>

 

  方案二:这种方式和上边那种一样,只不过是统一处理了

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

 

转载于:https://www.cnblogs.com/ms-uap/p/5275157.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/470972.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PyQt5 高级界面控制(表格、树、tab、dock、scrollbar、多文档界面)

文章目录1. 表格与树1.1 QTableView1.2 QListView1.3 QListWidget1.4 QTableWidget表根据界面宽度自动伸缩禁止编辑单击某单元&#xff0c;使之默认选中整行设置宽高度与内容相匹配是否显示表头单元格中放置控件输入行号&#xff0c;快速定位行设置颜色加粗字体排序文本对齐合并…

使用pymysql进行数据库的增删改查

使用pymysql进行数据库的增删改查&#xff1a; import pymysqldatabase pymysql.connect(127.0.0.1,root,root,jxgl,charsetutf8)# 初始化指针 cursor database.cursor()# 增 # sql "insert into students(s_no,s_name,sex,birthday,D_NO,address,phone) VALUES (1230…

人工智能第一次作业

1、 你认为什么是人工智能&#xff1f; 人工智能&#xff08;Artificial Intelligence&#xff09;简称AI&#xff0c;主要研究如何用人工的方法和技术&#xff0c;使用各种自动化机器或智能机器&#xff08;主要指计算机&#xff09;模仿、延伸和扩展人的智能&#xff0c;实…

PyQt5 高级界面控制(多线程、网页交互、调用JavaScript)

文章目录1. 多线程1.1 QTimer1.2 QThread界面卡住例子分离UI和工作线程1.3 事件处理2. 网页交互显示本地 html显示 html 代码调用 JavaScriptJavaScript 调用 PyQt代码learn from 《PyQt5 快速开发与实战》 https://doc.qt.io/qtforpython/index.html https://www.riverbankcom…

[转]html超链接打开的窗口大小

<a href"#" onclick"javascript:window.open(http://www.baidu.com,,height20,width20,top0,left0,toolbarno,menubarno,scrollbarsno, resizableno,locationno, statusno)">aaaaaaaaaaaaaaa</a> 各项参数 其中yes/no也可使用1/0&#xff1b;p…

读写Excel 用 xlsxwriter,openpyxl 更灵活

一、xlsxwriter的使用&#xff1a; # import xlwt # # workbook xlwt.Workbook() # sheet0 workbook.add_sheet(sheet0) # for i in range(0,300): # sheet0.write(0,i,i) # workbook.save(number.xls)# 以上代码运行会报错&#xff0c;因为xlwt不支持超过256列的表格im…

LeetCode 2293. 极大极小游戏

文章目录1. 题目2. 解题1. 题目 给你一个下标从 0 开始的整数数组 nums &#xff0c;其长度是 2 的幂。 对 nums 执行下述算法&#xff1a; 设 n 等于 nums 的长度&#xff0c;如果 n 1 &#xff0c;终止 算法过程。否则&#xff0c;创建 一个新的整数数组 newNums &#x…

devexpress gridcontrol 内置导航栏,双击后才修改数据

4、 使用Grid内置导航栏 gridControl1.UseEmbeddedNativgatorTrue 设定内置导航栏按钮其他属性 gridControl1.EmbeddedNavigator 5、 GridView内置方式编辑数据 禁止编辑数据 gridView1.OptionsBehavior.Editable False&#xff0c;默认是True 可编辑。 Gridview内置数据编辑器…

Python自动发送微信消息

一、用Python自动发送微信消息 import itchat# enableCmdQRTrue&#xff0c;允许在cmd命令行显示二维码 # hotReloadTrue&#xff0c;允许短期内可以不需要重复登陆 itchat.auto_login(enableCmdQRTrue,hotReloadTrue)# to_name itchat.search_friends(name"微信好友备注…

LeetCode 2294. 划分数组使最大差为 K

文章目录1. 题目2. 解题1. 题目 给你一个整数数组 nums 和一个整数 k 。你可以将 nums 划分成一个或多个 子序列 &#xff0c;使 nums 中的每个元素都 恰好 出现在一个子序列中。 在满足每个子序列中最大值和最小值之间的差值最多为 k 的前提下&#xff0c;返回需要划分的 最…

工作中用到的安卓日志相关命令(logcat)

1. 打印安卓日志&#xff0c;在cmd中使用adb shell logcat&#xff1b;在adb shell下直接打logcat2. 如果不想打印占用终端&#xff0c;则加个&号&#xff0c;即logcat &3. 如果想把前面的打印清掉&#xff0c;开始现在的打印&#xff0c;则用logcat -c;logcat4. 如果想…

三、scrapy爬虫框架——scrapy模拟登陆

scrapy模拟登陆 学习目标&#xff1a; 应用 请求对象cookies参数的使用了解 start_requests函数的作用应用 构造并发送post请求 1. 回顾之前的模拟登陆的方法 1.1 requests模块是如何实现模拟登陆的&#xff1f; 直接携带cookies请求页面找url地址&#xff0c;发送post请求…

LeetCode 2295. 替换数组中的元素

文章目录1. 题目2. 解题1. 题目 给你一个下标从 0 开始的数组 nums &#xff0c;它包含 n 个 互不相同 的正整数。请你对这个数组执行 m 个操作&#xff0c;在第 i 个操作中&#xff0c;你需要将数字 operations[i][0] 替换成 operations[i][1] 。 题目保证在第 i 个操作中&a…

ssh对等性配置

目的: 让通过ssh在目标机器上执行命令和scp, 不必每次输入密码. 做法: 假设有机器A, 机器B 在A上执行, ssh-keygen, 一路使用默认值, 成功生成: 私钥id_rsa, 公钥id_rsa.pub 把A上生成的公钥id_rsa.pub的内容, 写入机器B的.ssh/authorized_keys文件中, 文件不存在则创建. cat i…

四、scrapy爬虫框架——scrapy管道的使用

scrapy管道的使用 学习目标&#xff1a; 掌握 scrapy管道(pipelines.py)的使用 之前我们在scrapy入门使用一节中学习了管道的基本使用&#xff0c;接下来我们深入的学习scrapy管道的使用 1. pipeline中常用的方法&#xff1a; process_item(self,item,spider): 管道类中必须…

SPOJ COT Count on a tree 主席树

题意&#xff1a; 给\(n(1 \leq n \leq 10^5)\)一棵树&#xff0c;每个点有个权值。 还有\(m(1 \leq m \leq 10^5)\)个询问&#xff1a;\(u \, v \, k\)&#xff0c;查询路径\(u \to v\)上权值第\(k\)小的权值。 分析&#xff1a; 和普通的区间一样&#xff0c;对于树维护到根节…

LeetCode 2296. 设计一个文本编辑器(双栈)

文章目录1. 题目2. 解题1. 题目 请你设计一个带光标的文本编辑器&#xff0c;它可以实现以下功能&#xff1a; 添加&#xff1a;在光标所在处添加文本。删除&#xff1a;在光标所在处删除文本&#xff08;模拟键盘的删除键&#xff09;。移动&#xff1a;将光标往左或者往右移…

五、scrapy爬虫框架——logging 模块的使用

logging 模块的使用 1、scrapy settings中设置LOG_LEVEL“WARNING”settings中设置LOG_FILE"./a.log"#设置日志保存的位置&#xff0c;设置会后终端不会显示日志内容import logging,实例化logger的方式在任何文件中使用logger输出内容 2、普通项目中 import logg…

CUBRID学习笔记 22 插入数据

CREATE TABLE auto_tbl(id INT AUTO_INCREMENT, name VARCHAR);自增长的列可以插入null, 同时一次可以插入多条记录.别的和其他的sql数据库语法基本一样 INSERT INTO auto_tbl VALUES (NULL, AAA); INSERT INTO auto_tbl (id, name) VALUES (NULL, AAA); INSERT INTO auto_tbl …

PyQt5 布局管理(水平、垂直、网格、表单、嵌套、QSplitter)

文章目录1. 布局管理2. 使用绝对位置布局3. QBoxLayoutaddStretch() 添加可伸缩控件4. QGridLayout5. QFormLayout6. 嵌套布局7. QSplitter 布局learn from 《PyQt5 快速开发与实战》 https://doc.qt.io/qtforpython/index.html https://www.riverbankcomputing.com/static/Doc…