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

 

 

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