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

ycycoco

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

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

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

　　这看起来很酷，它通过颜色变化给用户操作反馈，而且统一到Metro风格设计中。
　　但是我们发现，只有在ApplicationBar中才可以这样使用，而在PhoneApplicationPage的区域，要实现类似的效果，有时候我们不得不做两张图片切换，而且要有多种颜色更要更多的图片。
　　这样的地方也经常用到，系统的电话记录就是其中一种，历史记录的列表左边有一个拨打电话的图标，它和ApplicationBar中的风格一致。
　　所以，我们怎么实现一个类似的图标按钮呢？这就是本文的任务。

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

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

　　
　　我们来分析下实现的思路是什么，我们首先看对图标的要求，要求图标的背景透明，而前景色是纯色，而图片实际上是由一个一个的像素点组成，所以我们就可以在程序中分析出哪些像素点是纯色图标，哪些是背景色，这样我们就可以修改纯色的部分，实现各种不同的颜色。并且可以在手按下的状态变换颜色，原理就是这里简单。
　　剩下的问题就是，我们怎样得到这些像素点呢？答案是WriteableBitmap，他有一个Pixels属性，可以获取所有像素点的颜色值，一个颜色值实际上对应一个十六进制，从而对应一个整数，这里剩下的问题就是整数以及颜色值之间的转换，颜色到整数之间的转换：

　　byte alpha = (byte)(pixel >> 24);
var a = alpha + 1;
var col = (alpha > 8) > 8) > 8));

　　我们这里只需要这个转换即可，没有反向的转换。
　　使用的方式非常简单：

　　

　　是不是跟ApplicationBar的一样的呢？呵呵
　　比较简单，大家可以下载源代码。
　　http://files.iyunv.com/hielvis/WriteableBitmap.rar
　　
　　http://techappy.net