1. 程式人生 > >WPF 自定義ColorDialog DropDownCustomColorPicker

WPF 自定義ColorDialog DropDownCustomColorPicker

jpg reac spl int down prop src 有一種 pso

原文: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; } }
反射 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顏色值

三、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

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

WPF 自定義ColorDialog DropDownCustomColorPicker