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, , ));
byte[] color = new byte[];
cb.CopyPixels(color, , );
Color Colorfromimagepoint = Color.FromArgb((byte)SdA.Value, color[], color[], color[]);
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.Test
两个项目为完整的Demo
该项目会继续进行扩展及优化,敬请期待。
WPF 自定义ColorDialog DropDownCustomColorPicker的更多相关文章
- WPF 自定义柱状图 BarChart
WPF 自定义柱状图 当前的Telerik控件.DevExpress控件在图表控件方面做得不错,但是有时项目中需要特定的样式,不是只通过修改图表的模板和样式就能实现的. 或者说,通过修改当前的第三方控 ...
- wpf 自定义圆形按钮
wpf 自定义圆形按钮 效果图 默认样式 获取焦点样式 点击样式 下面是实现代码: 一个是自定义控件类,一个是控件类皮肤 using System; using System.Collections. ...
- WPF自定义窗口基类
WPF自定义窗口基类时,窗口基类只定义.cs文件,xaml文件不定义.继承自定义窗口的类xaml文件的根节点就不再是<Window>,而是自定义窗口类名(若自定义窗口与继承者不在同一个命名 ...
- WPF 自定义 MessageBox (相对完善版)
WPF 自定义 MessageBox (相对完善版) 基于WPF的自定义 MessageBox. 众所周知WPF界面美观.大多数WPF元素都可以简单的修改其样式,从而达到程序的风格统一.可是当 ...
- WPF自定义Window样式(2)
1. 引言 在上一篇中,介绍了如何建立自定义窗体.接下来,我们需要考虑将该自定义窗体基类放到类库中去,只有放到类库中,我们才能在其他地方去方便的引用该基类. 2. 创建类库 接上一篇的项目,先添加一个 ...
- WPF自定义Window样式(1)
1. 引言 WPF是制作界面的一大利器.最近在做一个项目,用的就是WPF.既然使用了WPF了,那么理所当然的,需要自定义窗体样式.所使用的代码是在网上查到的,遗憾的是,整理完毕后,再找那篇帖子却怎么也 ...
- WPF自学入门(九)WPF自定义窗口基类
今天简单记录一个知识点:WPF自定义窗口基类,常用winform的人知道,winform的窗体继承是很好用的,写一个基础窗体,直接在后台代码改写继承窗体名.但如果是WPF要继承窗体,我个人感觉没有理解 ...
- WPF自定义TabControl样式
WPF自定义TabControl,TabControl美化 XAML代码: <TabControl x:Class="SunCreate.Common.Controls.TabCont ...
- WPF 自定义ComboBox样式,自定义多选控件
原文:WPF 自定义ComboBox样式,自定义多选控件 一.ComboBox基本样式 ComboBox有两种状态,可编辑和不可编辑状态.通过设置IsEditable属性可以切换控件状态. 先看基本样 ...
随机推荐
- Codeforces Gym 100269E Energy Tycoon 贪心
题目链接:http://codeforces.com/gym/100269/attachments 题意: 有长度为n个格子,你有两种操作,1是放一个长度为1的东西上去,2是放一个长度为2的东西上去 ...
- 梳理一下web总的一些概念
servlet中的类适合繁复翻看文档,熟悉各个类的常用方法,看一些经典的案例代码. ServletConfig 每个项目有多个servlet,每个servlet对应一个ServletCOnfigt对象 ...
- vue2.0transition过渡的使用介绍
直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- 参加光环国际PRINCE2培训
挑战埃及是全球首套能够同时适配PRINCE2认证人群,PMP认证人群的项目管理沙盘演练游戏.沙盘通过使用乐高积木作为道具,通过一场互动性极强的情景模拟为全球项目经理还原了四千年前古埃及金字塔建造的情景 ...
- JS——操作内容、操作相关元素
操作内容:普通元素.innerHTML = "值": 会把标记执行渲染普通元素.innerText = "值": 将值原封不动的展示出来,即使里面有标记 var ...
- 性能测试分享: Jmeter的源码分析main函数参数
性能测试分享: Jmeter的源码分析main函数参数 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大 ...
- ViewPager—02图片无限轮播
布局文件 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:t ...
- 插入排序的优化非希尔【不靠谱地讲可以优化到O(nlogn)】 USACO 丑数
首先我们先介绍一下普通的插排,就是我们现在一般写的那种,效率是O(n^2)的. 普通的插排基于的思想就是找位置,然后插入进去,其他在它后面的元素全部后移,下面是普通插排的代码: #include< ...
- toastr.js插件用法
toastr.js插件用法 toastr.js是一个基于jQuery的非阻塞通知的JavaScript库.toastr.js可以设定四种通知模式:成功.出错.警告.提示.提示窗口的位置.动画效果等都可 ...
- ELK日志分析系统的应用
收集和分析日志是应用开发中至关重要的一环,互联网大规模.分布式的特性决定了日志的源头越来越分散, 产生的速度越来越快,传统的手段和工具显得日益力不从心.在规模化场景下,grep.awk 无法快速发挥作 ...