美化Windows Mobile上的自定义数据表

    前段时间做实验室项目,需要以报表的形式将数据展示给用户。首先想到的是visual studio自带的listview,用起来是比较方便,可是看着不美观,说白了,就是吸引力不够。于是,我想到了使用Alpha Blend来做一个半透明效果的表格。因为在今年2月份的时候,Alex Yakhnin做了一次名为《24 Hours of Windows Mobile Application Development: Creating Compelling and Attractive UIs for Windows Mobile Applications》的Webcast,给我留下的印象比较深刻,觉得对于UI部分,Alpha Blend的用处还是挺大的。

    对于图片,想要获得透明的效果,可以有两种途径。第一种,使用.NET CF中System.Drawing.Imaging命名空间下的ImageAttributes.SetColorKey(Color, Color)这个方法。第二种,我们可以利用平台调用来做Alpha Blending,有关Alpha Blending的一些原理,在之前的《Alpha Blending and Alpha Channel on Windows Mobile》这个帖子中做了一些说明,这里就不再赘述。

    另外,我们可以利用色彩的渐变效果,从一种颜色逐渐过渡到另一种颜色,同样,这也可以应用到windows mobile的界面设计上去。《How to: Display a Gradient Fill》这篇文章具体讲述了如何在.NET Framework下,实现渐变的填充效果,可以作为参考。

    那么,我们如何将上面的Alpha Blending和Gradient Fill应用到自己的工程里面去呢?首先,封装win32的AlphaBlend、BitBlt和GradientFill函数,做Platform invoke。然后,扩展这些方法,在方便调用的同时,也增加了用户的可读性。Alex Yakhnin已经帮我们做了这些工作,我们可以在“ListViewDemo.zip”这个链接中下载到源代码。解压以后,其PlatformAPI文件夹下的5个文件,就是我们需要的,如下图1所示:

图1:所需的相关P/Invoke文件

    为了突出表头和用户选定文本所在行的数据,加入了HeaderControl.cs和CustomSelectionColumn.cs这两个文件,主要作用是重载了Paint、OnPaint、OnMouseDown和OnMouseUp函数,在其中调用PlatformAPI封装好的Alpha Blending和Gradient Fill函数,实现预期的透明以及渐变的效果。

    在我们自己的工程中,可以声明一个DataGrid以及HeaderControl。

    在初始化控件之后,建一个DataSet,向DataSet中添加一个DataTable。然后,我们就可以设置DataTable中每一行的渐变风格了,即使用LinearGradient(color,color)函数对customColumn.SelectedGradient进行设置,自定义每一行的渐变颜色。

    同时,为了突出表头,我们也可以单独设置表头的渐变风格,即利用LinearGradient(color,color)对headerControl. BackroundGradient进行设置。

    在使用的时候,我们会发现,用户选定的行与其他行的颜色是不一样的,这是因为,在CustomSelectionColumn.cs文件的Paint重载函数中,对用户选择的行与其他行做了分类处理。

    这个表格最终的显示效果如下图2所示:

图2:效果图

    对于RGB颜色,除了红白蓝等显著的颜色,一般我们很难记住其数值,这里推荐一个网页:RGB.txt decoded .下图3给出了部分截图。

image.png

图3:RGB数值及其颜色效果

    希望这里讲的这种方法对大家在Windows Mobile上做UI时有用。

参考链接:

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

4. RGB.txt decoded

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏AndroidTv

关于RecyclerView你知道的不知道的都在这了(上)前言目录正文

1.3K60
来自专栏练小习的专栏

可视化格式模型基础应用实例

今天在群里看到一个需求,先放demo <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> ...

206100
来自专栏华章科技

10个非常实用的Excel技巧

Excel可以说是MS Office系列中最神奇也最重要的软件。对于专业的职场人士,工作中经常需要用到Excel来分析数据。亲们别再傻傻地用鼠标点来点去啦,用这...

17180
来自专栏hightopo

原 荐 基于HTML5 Canvas的工控S

13330
来自专栏程序员互动联盟

【专业文章】六种常见的HTML5写法误用(二)

四、figure元素的常见错误 figure以及figcaption的正确使用,确实是难以驾驭。让我们来看看一些常见的错误, 不是所有的图片都是figure 上...

29950
来自专栏技术总结

YYImage框架瞧一瞧

建议查看原文:https://www.jianshu.com/p/83edaeeb5851(不定时更新)

16630
来自专栏walterlv - 吕毅的博客

实现一个 WPF 版本的 ConnectedAnimation

2017-12-25 11:44

14700
来自专栏性能与架构

将 Redis 作为图数据库

1. 简介 Redis 在 4.0 中正式支持了Module模块系统,使其可以进行丰富的扩展 图数据库的应用越来越广泛,RedisGraph 就是一个 Redi...

48560
来自专栏Android机动车

Android中的Vector

随着 Android 的碎片化越来越严重,适配成为一个开发中一个痛点。如果 UI 只切一套图,但是在一些特定机型上难免会出现模糊或者变形的情况,如果切多套不同分...

17040
来自专栏简书专栏

基于turtle的Python作画

pendown()的作用是落笔,只有落笔才能作画。 当不作画却想移动画笔的时候要提笔,用函数penup() forward是画笔向前移动,函数当中参数为移动...

73810

扫码关注云+社区

领取腾讯云代金券