[AY Note]-Touch Ready BaseOn WPF4 IN 2017【1/40】 杨洋[著]

2016-11-08 10:00:33来源:作者:AaronYang技术分享人点击

第七城市

环境 Win10 显示器 Dell P2314T (闲鱼二手920元买的) 开发环境vs2015 WPF版本4.0

作为一个框架开发2年多的开发人,写WPF的UI时候,首先要独立项目框架写1个简单的DEMO,雏形出来后,迁移到AYUI上色,填写动画解决。

下面我列了1个草稿本,用于触屏写草稿的。 下载

接下来,在这个草稿本,我在page中写ui效果。

1个page,就是草稿本的一张纸,当然也可以在window中写草稿。

前面10篇文章讲的都是探索WPF 触屏概念和使用,后面仿IPad 写1套方案

本人AY,高中毕业,能力有限,如有错误,还请指出。

个人遵从,PC鼠标操作是矩形,手指操作是圆形,中性选 圆角矩形

手指操作讲究反馈和感觉,苹果的3D Touch,拓展了触摸的力度,2015年那次我也是震撼到了,感觉这体验很好,很有感觉,有Feel

WPF触屏资料少,我先看的李敬然的博客,发现入门还是比较好入门的。

====================www.ayjs.net 杨洋 wpfui.com ayui ay aaronyang=======请不要转载谢谢了。=========

(冒泡事件)Touch事件 TouchDown -> TouchMove -> TouchUp

(隧道事件)Touch事件 PreviewTouchDown -> PreviewTouchMove -> PreviewTouchUp

(无)Touch事件 TouchEnter -> TouchLeave

这些事件在UIElement类和ContentElement类中,它们都提供了TouchEventArgs参数,提供了2个重要成员,第一个GetTouchPoint(),返回坐标或者触控点大小等。第二个TouchDevice,每个点都是 单独设备

考虑下,1个鼠标就是一个点,那么触摸屏,1个手指也是1个点,1个点具有特征信息的。存在TouchDevice中。

WPF编程宝典的DEMO也是画圆圈移动,手指离开,删除圆。

就写这个入门吧

Canvas坐标移动最简单了,就用这个容器了。也是书中的。

打开IndexPage.xaml写上

<Grid> <Canvas x:Name="ctx" Background="#CCCCCC"> </Canvas> </Grid>

增加一个TouchDown事件

private Dictionary<int, Ellipse> movingEllipses = new Dictionary<int, Ellipse>(); Random rd = new Random(); private void ctx_TouchDown(object sender, TouchEventArgs e) { Ellipse ellipse = new Ellipse(); ellipse.Width = 30; ellipse.Height = 30; ellipse.Stroke = Brushes.White; ellipse.Fill = new SolidColorBrush( Color.FromRgb( (byte)rd.Next(0, 255), (byte)rd.Next(0, 255), (byte)rd.Next(0, 255)) ); TouchPoint touchPoint = e.GetTouchPoint(ctx); Canvas.SetTop(ellipse, touchPoint.Bounds.Top); Canvas.SetLeft(ellipse, touchPoint.Bounds.Left); movingEllipses[e.TouchDevice.Id] = ellipse; ctx.Children.Add(ellipse); }

运行,手指触摸屏幕一下

有个Id,有个Device对象属性,获得设备信息。

看下TouchPoint信息

我们修改ellipse的尺寸,为这个对象的Size

是0,0

其他信息呢

增加TouchUp事件

private void ctx_TouchUp(object sender, TouchEventArgs e) { Ellipse ellipse = movingEllipses[e.TouchDevice.Id]; ctx.Children.Remove(ellipse); movingEllipses.Remove(e.TouchDevice.Id); }

按下离开,就移除圆

增加TouchMove事件

private void ctx_TouchMove(object sender, TouchEventArgs e) { Ellipse ellipse = movingEllipses[e.TouchDevice.Id]; TouchPoint touchPoint = e.GetTouchPoint(ctx); Canvas.SetTop(ellipse, touchPoint.Bounds.Top); Canvas.SetLeft(ellipse, touchPoint.Bounds.Left); }

后面要不停的获取你的手指的位置,Top和Left,然后设置圆的位置。

运行 效果如下:

如果你有显示器,按下的时候,不管在什么地方按钮, 默认window的那个原点 和拖动后的痕迹,也很美的,有空我想研究 荧光 轨迹。说白了是画笔的笔刷了。

李敬然的博客第一篇和WPF编程宝典说的基本一样的,也是这个示例

AY增加的知识点:

UIElement增加了CaptureTouch()和ReleaseTouchCapture(),和Mouse的CaptureMouse()和ReleaseMouseCapture()方法类似,当一个元素捕获触控输入后,该元素就会接收来自显示器上的所有触控事件,所有的东东它一人承受啊,WPF是多点的,所以可以同时按下10个点,比如点菜,一下子点10个菜都是可以的。

====================www.ayjs.net 杨洋 wpfui.com ayui ay aaronyang=======请不要转载谢谢了。=========

推荐您阅读更多有关于“TouchReady,”的文章

第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台