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; } }反射 Colors 中的預定義顏色 並排序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; }使用 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