WPF 控件库——仿制Chrome的ColorPicker

WPF 控件库——仿制Chrome的ColorPicker

WPF 控件库系列博文地址：

WPF 控件库——仿制Chrome的ColorPicker

WPF 控件库——仿制Windows10的进度条

WPF 控件库——轮播控件

WPF 控件库——带有惯性的ScrollViewer

WPF 控件库——可拖动选项卡的TabControl

 

一、观察

　　项目中的一个新需求，需要往控件库中添加颜色拾取器控件，因为公司暂时还没有UI设计大佬入住，所以就从网上开始找各种模样的ColorPicker，找来找去我就看上了谷歌浏览器自带的，它长这个样：

 　　

 

　　看上去不错，可以搞！搞之前得观察一下这里面可能的一些坑。对WPF而言，圆角阴影等效果都是基本操作，这里就不说了。

　　首先我们注意到上图中有两个拖动条，一个背景是可见光谱，另一个背景是颜色渐变和方块平铺的叠加。因为需求里没有屏幕取色的功能，所以在拖动条左侧的拾取图标可以去掉，只保留当前颜色预览，这样会多出来一大块空间，可以考虑将圆形的颜色预览区域改成有圆角的矩形。而最上方的颜色拾取区域就比较复杂了，它其实是三层画刷的叠加，第一层是洋红色主色调，第二层是白色到透明的左右渐变，第三层是透明到黑色的上下渐变。由于WPF的带透明通道的颜色渐变并非是标准的，举个例子，假设有一个从透明到黑色的上下渐变层，在渐变层下方是纯红色背景，那么理论上渐变开始的颜色是#FFFF0000，渐变结束的颜色是#FF000000，那么在上下一半处的颜色应该是#FF7F0000（或者是#FF800000，就是简单的相加除以2），但是在WPF中却不是这个值（在专业的图像处理软件中比如PS中的确是#FF7F0000），如果你不信，我们现在就做个实验。

 

二、实验

　　打开Blend，新建个WPF项目，设置窗口尺寸为400*300，为了方便定位中心点，我们需要设置 AllowsTransparency="True" ， WindowStyle="None" ，接着把主窗口背景改成纯红色，再添加一层从透明到黑色的上下渐变层，用Border实现，如下图：

　　

　　我们使用标尺，定位中心点（200，150），如下图：

　　

　　我们看看在中心点处的颜色是什么，用Blend取色得到的颜色如下：

　　

　　下面我们在PS中重现以上操作，看看最后的颜色会是什么，打开PS新建400*300，分辨率为72的画布：