《Windows Fun 7》三:Metro风格的图标按钮

     Windows Phone中的Metro风格大家都比较熟悉了,其中ApplicationBar中Button的风格更是独特于iphone和Android,这样的图标我们在地铁商场随处可见,如下:

9292

     ApplicationBar中的图标有一个特点,它看起来像两张图片的切换,当手按下去的时候它会呈现相反的颜色。但实际上我们在使用中知道,它其实只有一张图片,这张图片具有以下特点:

  1. 背景透明
  2. 前景色纯白
  3. 没有外边的圆框,ApplicationBar在显示的时候自动加上
  4. 当手按下去的时候,系统会替换图标和背景颜色

     这看起来很酷,它通过颜色变化给用户操作反馈,而且统一到Metro风格设计中。

     但是我们发现,只有在ApplicationBar中才可以这样使用,而在PhoneApplicationPage的区域,要实现类似的效果,有时候我们不得不做两张图片切换,而且要有多种颜色更要更多的图片。

     这样的地方也经常用到,系统的电话记录就是其中一种,历史记录的列表左边有一个拨打电话的图标,它和ApplicationBar中的风格一致。

     所以,我们怎么实现一个类似的图标按钮呢?这就是本文的任务。

005

     使用本文提供的控件,我们像ApplicationBar中的Button一样使用:

  1. 可以指定前景色和背景色,自动切换
  2. 只需要指定一张图片
  3. 可以更换图片,实现像IE9中的刷新和停止的效果。

 

     我们来分析下实现的思路是什么,我们首先看对图标的要求,要求图标的背景透明,而前景色是纯色,而图片实际上是由一个一个的像素点组成,所以我们就可以在程序中分析出哪些像素点是纯色图标,哪些是背景色,这样我们就可以修改纯色的部分,实现各种不同的颜色。并且可以在手按下的状态变换颜色,原理就是这里简单。

     剩下的问题就是,我们怎样得到这些像素点呢?答案是WriteableBitmap,他有一个Pixels属性,可以获取所有像素点的颜色值,一个颜色值实际上对应一个十六进制,从而对应一个整数,这里剩下的问题就是整数以及颜色值之间的转换,颜色到整数之间的转换:

byte alpha = (byte)(pixel >> 24);
var a = alpha + 1;
var col = (alpha << 24)
         | ((byte)((color.R * a) >> 8) << 16)
         | ((byte)((color.G * a) >> 8) << 8)
         | ((byte)((color.B * a) >> 8));

     我们这里只需要这个转换即可,没有反向的转换。

     使用的方式非常简单:

<metro:MetroImage  Source="Images/appbar.sync.rest.png" BackgroundColor="Red" ForegroundColor="Green"/>

     是不是跟ApplicationBar的一样的呢?呵呵

     比较简单,大家可以下载源代码。

     http://files.cnblogs.com/hielvis/WriteableBitmap.rar

    

     http://techappy.net

posted on 2011-09-28 22:17 秦春林 阅读(...) 评论(...) 编辑 收藏

公告

导航

统计

  • 随笔 - 38
  • 文章 - 0
  • 评论 - 593
  • 引用 - 0