现在的位置: 首页 > 综合 > 正文

Windows Phone自定义控件

2013年01月01日 ⁄ 综合 ⁄ 共 1952字 ⁄ 字号 评论关闭

        这段时间,边复习考研,边学习Windows Phone开发。

        第一个控件(亲测):

        很早以前,我就对新浪微博的下拉刷新滚动控件(ScrollViewer)感到好奇,一直在想它是怎么实现的,因为WP自带的ScrollViewer并没有拖到顶部或底部的事件,而且当ScrollViewer的ManipulationMode为System的时候,不能获取到ScrollViewer滚动条的位置。于是,我开始查相关的资料(主要是百度),借WP开发的书(《WindowsPhone
7 程序设计》和《深入浅出Windows Phone 8应用开发》)。刚开始,在书上没看到有相关的内容,在网上找到了一个解决方案,这种解决方案的做法是运用VisualState检测ScrollViewer滚动状态,但这种方法使用的是默认的系统风格(Style),只有在滚动停止时,即NotScrolling状态(具体名字是什么记不清了),检测滚动偏移(Offset),如果偏移加上滚动前位置超过了控件内容总长度(非可视长度),就进行刷新或者其他相应的处理。但是这种方法的缺点很明显(其实也不算缺点,只是不是我想要的),需要滚动条停止滚动了,即手需要放开,才会有反应,和新浪微博App上的控件不同,但先将就用着。

        过了一段时间,我又去查资料,找到了一个新的解决方案。ScrollViewer的ManipulationMode默认值是System,它还有可以设置为Control,就我知道的,两者的变换(Transform)方式不一样,当ManipulationMode为System的时候,ScrollViewer的变换方式是MatrixTransform,而置为Control时,变换方式就成了CompositeTransform,通过CompositeTransform就可以得到ScrollViewer的TranslateY值(当到达顶部的时候,TranslateY变为正值,其余时候为负值,超过底部时,绝对值大于ScrollViewer内容长度),然后在ScrollViewer的操作事件ManipulationStarted、ManipulationDetla或ManipulationCompleted中,获取ScrollViewer的变换方式,得到TranslateY值,最后判断是否到达顶部或底部,决定是否要进行处理。

        刚开始我以为这应该可以达到我要的效果了,确实,这个方法可以在拖动的时候检测滚动是否到达顶部或底部,但是会卡,具体原因是什么,我也不清楚。接着我继续寻找结局方法,很幸运地在msdn论坛上又找到了一个方法。

http://social.msdn.microsoft.com/Forums/zh-CN/5392bbe8-8dd0-4203-a431-7dd95723119d/listboxmanipulationmodecontrol

        别人也碰到了卡的问题,于是根据回复,转到了msdn的另一个网站

http://blogs.msdn.com/b/slmperf/archive/2011/06/30/windows-phone-mango-change-listbox-how-to-detect-compression-end-of-scroll-states.aspx

        这个方法与我第一次找到的方法类似,但是它改变了控件风格,添加了一组VerticalCompression状态,看名字就知道是用来作垂直压缩检测的,并且ScrollViewer的ManipulationMode为System,试了一下,效果很好!

        新浪微博滚动控件的顶部还有一个”下滑刷新“的文本,文本右边还有个动画。这两天回顾了一下书本,觉得可能是给滚动控件添加一个变换,让显示控件向上偏移,这样就可以隐藏”下滑刷新“的文本,最后将整个控件长度伸长,以填补向上偏移的空白。

        第二个控件(想法):

        这是最近才发现的,优酷更新后,它的播放器看着变牛X了(主要是看着和系统播放器不一样,感觉蛮新鲜),随后爱奇艺也更新了,也变成了这样。闲着没事,想了想,我感觉应该是这样做的:

        首先,因为WP的MediaElement默认(未全屏)是没有按钮那些东西的,都需要手动添加,所以在MediaElement上加一层Grid,在Grid中添加进度条,播放按钮,全屏按钮。

        第二,如果全屏播放视频,系统的那几个东西应该是没法屏蔽掉的,那么这里的全屏应该就只是把MediaElement的大小设置为屏幕大小,已达到全屏效果,然后就可以定制播放器了。

        如果有说的不对地方,欢迎指出!

抱歉!评论已关闭.