美化Windows Mobile上的自定义ListView

    在移动设备上,我们经常需要列出数据给用户看,ListView是经常用到的控件。而有些时候,我们需要同时列出预览的图片和数据,所谓图文并茂,这样可以带来更加友好的互动体验。Alex Yakhnin给我们做了很好的尝试,在他的Webcast-《24 Hours of Windows Mobile Application Development: Creating Compelling and Attractive UIs for Windows Mobile Applications》中,讲述了利用.NET CF来创建更加有好的UI界面。

    当然,在这里,我们还是用到了Alpha Blending和Gradient Fill,代码可以在“ListViewDemo.zip”这个链接中下载。在使用时,我们需要注意三个地方,那就是CustomBorder(包围ListViewOwnerDrawn的红色线条部分)、Form背景和ListViewOwnerDrawn。如下图1所示:

图1:Form各部分说明

   在使用的时候,我们需要设置CustomBorder的周边圆弧的半径,以及边缘的颜色等。

    同样,我们也需要设置ListViewOwnerDrawn中的字体颜色、大小、规格,背景颜色等。

   至于ListViewOwnerDrawn中的内容,可以是图片,文字等等。我们只要定义一个ListViewItem,并向其中添加ListViewSubItem就可以。例子中,是把设备的“@\My Documents\My Pictures”文件夹下的图片,图片大小和图片创建日期显示出来,这就同时包含了图片和文字信息,需要在ListView中显示。首先,我们加入文件的创建时间,

    其次,我们加入图片的缩略图,

    最后,加入图片的分辨率信息,

    同样,Form的背景,我们可以使用半透明的渐进过渡。可以在Form的Paint函数中来实现,

    即从上到下,由紫色逐渐过渡到灰色。于是就出来图1所示的效果。

    由这个例子,我想到了GTalk中的聊天对话框(如下图2所示),是不是和这个Form很像。

图2:GTalk聊天对话框

    所以,利用这个例子,我们可以做一个聊天的对话界面,不错吧。希望对大家有用。

参考链接:

1. 24 Hours of Windows Mobile Application Development: Creating Compelling and Attractive UIs for Windows Mobile Applications

2. Alpha Blending and Alpha Channel on Windows Mobile

3. How to: Display a Gradient Fill

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏吴老师移动开发

【iOS开发】我是这样封装view的前言示例关于扩展

一个有经验的开发,碰到一些特殊的UI控件,脑海中应该是有好几种实现方案的,同时也能记起一些第三方相似的开源控件。为了应对产品的需求变更,UI效果的变更,以及做到...

14910
来自专栏IMWeb前端团队

搞定这些疑难杂症,向css3动画说yes

本文篇幅比较长,涉及到的知识点也比较多,如3d,动画性能,动画js事件等,参考文献及demo展示也比较多,所以建议pc阅读效果更佳。 动画库 到现在来说css3...

34580
来自专栏软件

那些前端常用的网站插件

这套工具集中的大部分你可能见过,也可能没见过,如果有哪个/些让你眼前一亮,那么我的分享就很值了。 这个列表包含许多种类的资源,所以这里我将它们分组整理。 Jav...

31450
来自专栏吴老师移动开发

【iOS开发】UITableView优化

移动开发中,任何一个应用都或多或少的有列表的存在,列表的上下滑动直接关系到用户体验。如果处理不好,就会使得列表滑动起来有明显的卡顿效果。所以对列表的优化,让它更...

14810
来自专栏CSDN技术头条

有关网页渲染,每个前端开发者都该知道的那点事

【编者按】其实,有关网页渲染的文章很多,但是相关信息比较分散,且论述并不是很完整。如果要想对这个主题有个大致的了解,我们还得学习很多知识。因此,Web开发者Al...

21980
来自专栏java一日一条

前端高性能滚动 scroll 及页面渲染优化

最近在研究页面渲染及web动画的性能问题,以及拜读《CSS SECRET》(CSS揭秘)这本大作。

35830
来自专栏IMWeb前端团队

[小技巧]巧妙使用flex, letter-spacing实现过渡动画

本文作者:IMWeb DeepKolos 原文出处:IMWeb社区 未经同意,禁止转载 巧妙利用flex, 实现下面的效果~ 无需js来获取clien...

23270
来自专栏企鹅号快讯

SVG之旅:SVG的图层和渲染顺序

不管是在制图软件中还是Web页面的DOM元素,都有层的概念。在制图软件中,大家比较熟悉,能非常的清晰的看出图层的概念。而在Web页面中,特别是我们熟悉的HTML...

53050
来自专栏Coco的专栏

【前端性能】高性能滚动 scroll 及页面渲染优化

33670
来自专栏前端说吧

PS-前端切图教程(切jpg图和切png图)

99750

扫码关注云+社区

领取腾讯云代金券