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表示递减；

开始创建自定义控件:

右键项目，新增用户控件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;