美化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所示:

image

图1:Form各部分说明

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

   image    

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

   image

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

   image

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

    image

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

    image

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

    image

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

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

image

图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

posted on 2009-07-31 16:02  施炯  阅读(6683)  评论(25编辑  收藏  举报