WPF 自定义ColorDialog DropDownCustomColorPicker

今天分享一个 WPF 版的ColorDialog，该控件源自 这里，不过笔者已经该控件作了大量的修改工做，以适应本身的产品需求，闲话少说，先看看效果图：

 

一、DropDownCustomColorPicker  效果图

先看原项目的（喜欢这种方式的，请到 这里 下载源码 ）

被笔者修改以后的效果图：

2、DropDownCustomColorPicker  四种颜色选择方式

第一种：单击任意一个预约义的颜色便可。

这些颜色经过反射 Colors 中的属性得到的， 笔者 对这些颜色进行排序，视觉效果更美观了。

    /// <summary>
    /// 反射预约义颜色
    /// </summary>
    public class CustomColors
    {
        List<Color> selectableColors = null;

        public List<Color> SelectableColors
        {
            get { return selectableColors; }
            set { selectableColors = value; }
        }

        public CustomColors()
        {
            var list = new List<Color>();

            Type ColorsType = typeof(Colors);
            PropertyInfo[] ColorsProperty = ColorsType.GetProperties();

            foreach (PropertyInfo property in ColorsProperty)
            {
                list.Add((Color)ColorConverter.ConvertFromString(property.Name));
            }

            list.Sort(new Comparison<Color>((Color x, Color y) =>
            {
                var xtotal = x.R + x.G + x.B;

                var ytotal = y.R + y.G + y.B;

                return xtotal.CompareTo(ytotal); // 升序排列
            }));

            selectableColors = list;
        }

    }

反射 Colors 中的预约义颜色 并排序

 

第二种：使用鼠标选择图像中任意一个像素点的颜色

该控件原做者使用的是 CroppedBitmap 来获取指定像素点的颜色值，还有一种方式 WriteableBitmap，也能够达到相似的目的

        private Color GetColorFromImage(int i, int j)
        {
            CroppedBitmap cb = new CroppedBitmap(image.Source as BitmapSource,
                new Int32Rect(i,
                    j, 1, 1));
            byte[] color = new byte[4];
            cb.CopyPixels(color, 4, 0);
            Color Colorfromimagepoint = Color.FromArgb((byte)SdA.Value, color[2], color[1], color[0]);
            return Colorfromimagepoint;
        }

使用 CroppedBitmap 获取指定像素点的颜色值

 

第三种：手动输入 十六进制数所表示的ARGB颜色值

 

第四种：手动滑动 Slider 选择 ARGB颜色值

 

3、DropDownCustomColorPicker  中 DropDown 的实现方式

原做者采用的 右键菜单，其实笔者更倾向于使用 Popup，不过这一点、笔者没有去作修改。

 

 

4、笔者的优化

一、预约义颜色的排序、视觉效果更美观

二、Expander 控件的自动折叠和展开、操做更方便。

三、优化使用鼠标选取像素点的操做，代码逻辑更简洁、操做更流畅。

四、增长了 SelectedColorChangedEvent 、 DropDownStateChangedEvent 事件

五、使用 Slider 替代了 TextBox 来修改 RGB 颜色值

六、增长了几个配置属性，使用起来更方便。

七、该项目会继续进行扩展及优化，敬请期待。

 

5、完整的源码

完整的源码， 笔者已上传至Github,  https://github.com/iqingyu/BlogsDemo :

DropDownCustomColorPicker

DropDownCustomColorPicker.Test

两个项目为完整的Demo

 

 

该项目会继续进行扩展及优化，敬请期待。