WPF实现颜色选择器

  • WPF实现颜色选择器已关闭评论
  • 95 次浏览
  • A+
所属分类:.NET技术
摘要

 再说一下思路: 打开设计器,属性里面找到”颜色”,设置为渐变色,将渐变色设置为9段,分别是,红橙黄绿青蓝紫白黑(Red,Orange,Yellow,Lime,Cyan,Blue,Magenta,White,Black);

先看效果图;WPF实现颜色选择器

 

再说一下思路:WPF实现颜色选择器

 

打开设计器,属性里面找到"颜色",设置为渐变色,将渐变色设置为9段,分别是,红橙黄绿青蓝紫白黑(Red,Orange,Yellow,Lime,Cyan,Blue,Magenta,White,Black);

然后移动滑块儿,比如在红色和橙色和黄色之间移动的时候,会发现颜色的RGB值是有规律的变化的,R是固定的255,G是从0开始慢慢增加到255,B是固定的0;

在黄色和绿色之间变化的时候,R是从255开始减少,G是固定255,B还是固定的0;

所以总结出以下规律:

//when index<=2        R=255;    G=up;    B=0; //when 2<index<=3      R=down;   G=255;   B=0; //when 3<index<=4      R=0;      G=255;   B=up; //when 4<index<=5      R=0;      G=down;  B=255; //when 5<index<=6      R=up;     G=0;     B=255; //when 6<index<=7      R=255;    G=up;    B=255; //when 7<index<=8      R=down;   G=down;  B=down;

index表示 红橙黄绿青蓝紫白黑 的顺序;up表示递增,down表示递减;

开始创建自定义控件:WPF实现颜色选择器

右键项目,新增用户控件ColorSlider,新增后,添加以下代码:

<UserControl.Template>         <ControlTemplate TargetType="{x:Type UserControl}">             <Slider Maximum="8" Minimum="0" Width="{TemplateBinding Width}" SmallChange="0.1" LargeChange="0.1"                     ValueChanged="CornerSlider_ValueChanged">                 <Slider.Background>                     <LinearGradientBrush>                         <GradientStop Color="Red"/>                         <GradientStop Color="Orange" Offset="0.125"/>                         <GradientStop Color="Yellow" Offset="0.25"/>                         <GradientStop Color="Lime" Offset="0.375"/>                         <GradientStop Color="Cyan" Offset="0.5"/>                         <GradientStop Color="Blue" Offset="0.625"/>                         <GradientStop Color="Magenta" Offset="0.75"/>                         <GradientStop Color="White" Offset="0.875"/>                         <GradientStop Color="Black" Offset="1"/>                     </LinearGradientBrush>                 </Slider.Background>             </Slider>         </ControlTemplate>     </UserControl.Template>

里面的offset是因为,设置了slider的最大值是8,最小值是0,红橙黄绿青蓝紫白黑 8个颜色平均分配1的话,间隔就应该是0.125;

后台代码如下:

public partial class ColorSlider : UserControl     {         public static readonly DependencyProperty SelectedColorProperty;          public Brush SelectedColor         {             get { return (Brush)GetValue(SelectedColorProperty); }             set { SetValue(SelectedColorProperty, value); }         }          public ColorSlider()         {             InitializeComponent();         }          static ColorSlider()         {             SelectedColorProperty = DependencyProperty.Register("SelectedColor", typeof(Brush), typeof(ColorSlider)                 ,new PropertyMetadata(new SolidColorBrush(Color.FromRgb(255, 0, 0))));         }          private void CornerSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)         {             var sd = sender as CornerSlider;             var value = Math.Round(sd.Value, 2);             var factor = value - Math.Floor(value);             //when index<=2        R=255;    G=up;    B=0;             //when 2<index<=3      R=down;   G=255;   B=0;             //when 3<index<=4      R=0;      G=255;   B=up;             //when 4<index<=5      R=0;      G=down;  B=255;             //when 5<index<=6      R=up;     G=0;     B=255;             //when 6<index<=7      R=255;    G=up;    B=255;             //when 7<index<=8      R=down;   G=down;  B=down;             if (value <= 2)             {                 var g = (byte)(255 * (value / 2));                 SelectedColor = new SolidColorBrush(Color.FromRgb(255, g, 0));             }             else if (value > 2 && value <= 3)             {                 var r = (byte)(255 - 255 * factor);                 SelectedColor = new SolidColorBrush(Color.FromRgb(r, 255, 0));             }             else if (value > 3 && value <= 4)             {                 var b = (byte)(255 * factor);                 SelectedColor = new SolidColorBrush(Color.FromRgb(0, 255, b));             }             else if (value > 4 && value <= 5)             {                 var g = (byte)(255 - 255 * factor);                 SelectedColor = new SolidColorBrush(Color.FromRgb(0, g, 255));             }             else if (value > 5 && value <= 6)             {                 var r = (byte)(255 * factor);                 SelectedColor = new SolidColorBrush(Color.FromRgb(r, 0, 255));             }             else if (value > 6 && value <= 7)             {                 var g = (byte)(255 * factor);                 SelectedColor = new SolidColorBrush(Color.FromRgb(255, g, 255));             }             else             {                 var c = (byte)(255 - 255 * factor);                 SelectedColor = new SolidColorBrush(Color.FromRgb(c, c, c));             }         }     }

实际效果图可能会和原图有出入,是因为我是用自己写的一个CornerSlider控件代替了Slider;

最后就可以通过SelectedColor来获取所选颜色了;

项目github地址是:https://github.com/bearhanQ/WPFFrameWork

QQ群可以随时讨论:332035933;