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

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

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

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

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

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

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

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

使用本文提供的控件，我们像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