WPF 自定義ColorDialog DropDownCustomColorPicker

今天分享一個 WPF 版的ColorDialog，該控制項源自 這裡，不過筆者已經該控制項做了大量的修改工作，以適應自己的產品需求，閑話少說，先看看效果圖：

1、DropDownCustomColorPicker  效果圖

先看原項目的（喜歡這種方式的，請到 這裡 下載源碼 ）

被筆者修改之後的效果圖：

二、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;
        }

    }

第二種：使用滑鼠選擇圖像中任意一個像素點的顏色

該控制項原作者使用的是 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;
        }

第三種：手動輸入 十六進位數所表示的ARGB顏色值

第四種：手動滑動 Slider 選擇 ARGB顏色值

三、DropDownCustomColorPicker  中 DropDown 的實現方式

原作者採用的 右鍵菜單，其實筆者更傾向於使用 Popup，不過這一點、筆者沒有去做修改。

四、筆者的優化

1、預定義顏色的排序、視覺效果更美觀

2、Expander 控制項的自動摺疊和展開、操作更方便。

3、優化使用滑鼠選取像素點的操作，代碼邏輯更簡潔、操作更流暢。

4、增加了 SelectedColorChangedEvent 、 DropDownStateChangedEvent 事件

5、使用 Slider 替代了 TextBox 來修改 RGB 顏色值

6、增加了幾個配置屬性，使用起來更方便。

7、該項目會繼續進行擴展及優化，敬請期待。

五、完整的源碼

完整的源碼， 筆者已上傳至Github,  https://github.com/iqingyu/BlogsDemo :

DropDownCustomColorPicker

DropDownCustomColorPicker.Test

兩個項目為完整的Demo

該項目會繼續進行擴展及優化，敬請期待。