VC实现QQ表情选择面板

最近有好多篇帖子是关于QQ的选择表情的那个窗口实现的。最初以为这是一个比较简单的功能，不过做起来还是发现做了整个一晚上才做的差不多做好。做完我想为什么有很多人愿意尝试它呢？可能是基于它的那个“预览图”对鼠标的“躲藏”功能是它的一个亮点，所以可能是因为这个原因引起很多人的兴趣来实现它。前人已经采用了很多种方式实现，例如 C# 的 winform，等等。这里我也是觉得好玩，而且对于个性化的，高效的各种自定义特性，正是VC的特征之一，所以这里用 VC++ 来实现的。在这个范例也展示了如何定制一个比较特殊外观的窗口，以及如何使用自定义绘制（OWNER DRAW）的按钮（1/2，上一页，下一页按钮），如何遍历一个文件夹下的所有文件等基本方法。

不过这个例子仅仅是模仿QQ的UI，实际上这也是这个例子的唯一意义。由于VC里面对于存在多帧的 gif 格式并没有特别好的支持，包括 CImage 尽管支持大多数图像格式，但是却仅能加载 gif 的一帧，而要展示动画形式的gif，则通常要求助于第三方代码，例如 CxImage 等。因此这里我就仅仅模拟这个界面，实际上在预览框里面我仅仅绘制一下而已。而并没有去真正的做 gif 动画的预览。

当鼠标在窗口上移动时，需要绘制一个蓝色小边框反应当前选中的是哪一个cell，而且预览图会尽可能惰性的“远离”鼠标。所谓惰性，是指仅在它发觉鼠标有向它逼近时，它的位置才会突变。例如当预览框位于左上角（跨度占据0，1，2列），而鼠标从右侧首次进入第4列时， 它是不动的，但鼠标在第4列继续移动时，它才会突然移动到右侧。因此为了检测鼠标的这种行为，实际上在范例中我记录了鼠标最近两次的停留位置，即lastSelection，currentSelection（二者的关系实际上是一个仅包含两个元素的队列）。

 　　效果如下图所示：

这个范例在UI方面基本是采用对QQ2009的表情选择窗口的截图来制作的， 使用的表情文件夹是来自于qq2008的 “Face2” 。但该范例还是和真正的QQ有一些出入的地方，例如：

（1）QQ的表情选择窗口弹出来时，qq表情按钮是呈现按下状态的。范例为了简单期间，只是弹出模态对话框，所以这里不如QQ的 UI 自定义的那么彻底。

（2）QQ的表情选择窗口和其父窗口是非模态性的关系，而范例是模态关系，所以在没有加载任何图片的情况下，为了使窗口能够关闭，我做了一点特殊处理，也就是在范例中可以通过点击“空白处”的表情退出，而在QQ中点击空白位置是没有回应的。

（3）QQ的表情选择窗口有Tooltip，不过我不觉得这个功能很必要，估计很少会有人去关注这个功能，而且它还挡住了窗口的一部分。实现起来是很简单的，所以范例中没有tooltip了。

（4）QQ的表情选择窗口能自动调节自己的出现位置，尽可能靠近触发按钮，并且保证自身的可见性（完全位于屏幕范围以内）。操作中很多弹出式的窗口具有这种功能，例如 ToolTip ， ComboBox， DateTimePicker 类控件的下拉窗口等。这个功能看起来简单，但是实现起来还是需要一定技巧和复杂度。范例中仅仅让窗口的位置固定出现在按钮上方。

（5）QQ的表情选择窗口对用户自己添加的表情在绘制时，使用了拉伸绘制。在范例中为了简单，没有考虑表情图片的大小。 

本范例使用的代码都属于比较传统的技术，所以并没有什么特别需要单独列出和讲解的地方。由于最近该类实现的文章较多，所以将本文发于首页候选区。

在这里仅提供本范例的源代码下载连接：（可执行程序位于Debug目录中）

http://files.cnblogs.com/hoodlum1980/QQFaceVC.rar  

--hoodlum1980