wpf自定义好看支持输入hex和rgb的colorpicker

要实现一个好看支持输入 hex 和 rgb 的 ColorPicker，可以按照以下步骤进行操作：

1. 创建自定义控件类：新建一个类，继承自 System.Windows.Controls.Control，命名为 CustomColorPicker。

2. 添加控件模板：在 Generic.xaml 文件中添加控件模板，定义 ColorPicker 的外观和行为。

3. 添加依赖属性：添加颜色相关的依赖属性，如 SelectedColor、AvailableColors 等，便于在 XAML 中绑定和设置值。此外还需要添加支持输入的依赖属性，如 Hex、R、G、B 等。

4. 实现控件逻辑：在 CustomColorPicker 类中实现控件逻辑，处理用户交互和属性变化等事件。比如，在 Hex 属性变化时，可以解析出对应的颜色值并更新 SelectedColor 属性；在 SelectedColor 属性变化时，可以更新 Hex、R、G、B 等属性的值。

以下是一个简单的自定义 ColorPicker 控件示例：

public class CustomColorPicker : Control
{
    static CustomColorPicker()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(CustomColorPicker), new FrameworkPropertyMetadata(typeof(CustomColorPicker)));
    }

    public static readonly DependencyProperty SelectedColorProperty = DependencyProperty.Register(
        "SelectedColor", typeof(Color), typeof(CustomColorPicker), new FrameworkPropertyMetadata(Colors.Black, OnSelectedColorChanged));

    public Color SelectedColor
    {
        get { return (Color)GetValue(SelectedColorProperty); }
        set { SetValue(SelectedColorProperty, value); }
    }

    private static void OnSelectedColorChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var picker = (CustomColorPicker)d;
        picker.SetHexFromColor((Color)e.NewValue);
        picker.SetRGBFromColor((Color)e.NewValue);
    }

    public static readonly DependencyProperty AvailableColorsProperty = DependencyProperty.Register(
        "AvailableColors", typeof(IEnumerable<Color>), typeof(CustomColorPicker), new FrameworkPropertyMetadata(GetDefaultColors()));

    public IEnumerable<Color> AvailableColors
    {
        get { return (IEnumerable<Color>)GetValue(AvailableColorsProperty); }
        set { SetValue(AvailableColorsProperty, value); }
    }

    private static IEnumerable<Color> GetDefaultColors()
    {
        return new[]
        {
            Colors.Black, Colors.White, Colors.Red, Colors.Green, Colors.Blue,
            Colors.Yellow, Colors.Cyan, Colors.Magenta, Colors.Orange, Colors.Purple
        };
    }

    public static readonly DependencyProperty HexProperty = DependencyProperty.Register(
        "Hex", typeof(string), typeof(CustomColorPicker), new FrameworkPropertyMetadata("#000000", OnHexChanged));

    public string Hex
    {
        get { return (string)GetValue(HexProperty); }
        set { SetValue(HexProperty, value); }
    }

    private static void OnHexChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var picker = (CustomColorPicker)d;
        var hex = (string)e.NewValue;
        picker.SetColorFromHex(hex);
    }

    public static readonly DependencyProperty RProperty = DependencyProperty.Register(
        "R", typeof(int), typeof(CustomColorPicker), new FrameworkPropertyMetadata(0, OnRGBChanged));

    public int R
    {
        get { return (int)GetValue(RProperty); }
        set { SetValue(RProperty, value); }
    }

    public static readonly DependencyProperty GProperty = DependencyProperty.Register(
        "G", typeof(int), typeof(CustomColorPicker), new FrameworkPropertyMetadata(0, OnRGBChanged));

    public int G
    {
        get { return (int)GetValue(GProperty); }
        set { SetValue(GProperty, value); }
    }

    public static readonly DependencyProperty BProperty = DependencyProperty.Register(
        "B", typeof(int), typeof(CustomColorPicker), new FrameworkPropertyMetadata(0, OnRGBChanged));

    public int B
    {
        get { return (int)GetValue(BProperty); }
        set { SetValue(BProperty, value); }
    }

    private static void OnRGBChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var picker = (CustomColorPicker)d;
        var r = picker.R;
        var g = picker.G;
        var b = picker.B;
        picker.SetColorFromRGB(r, g, b);
    }

    private void SetColorFromHex(string hex)
    {
        var color = (Color)ColorConverter.ConvertFromString(hex);
        SelectedColor = color;
    }

    private void SetHexFromColor(Color color)
    {
        Hex = color.ToString();
    }

    private void SetColorFromRGB(int r, int g, int b)
    {
        var color = Color.FromRgb((byte)r, (byte)g, (byte)b);
        SelectedColor = color;
    }

    private void SetRGBFromColor(Color color)
    {
        R = color.R;
        G = color.G;
        B = color.B;
    }
}

在 Generic.xaml 中添加模板：

<Style TargetType="{x:Type local:CustomColorPicker}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:CustomColorPicker}">
                <StackPanel>
                    <TextBlock Text="Available Colors:"/>
                    <ListBox ItemsSource="{TemplateBinding AvailableColors}"
                             SelectedItem="{Binding RelativeSource={RelativeSource TemplatedParent},
                                                      Path=SelectedColor}"/>
                    <TextBlock Text="Hex:"/>
                    <TextBox Text="{Binding RelativeSource={RelativeSource TemplatedParent},
                                           Path=Hex, Mode=TwoWay}"/>
                    <TextBlock Text="RGB:"/>
                    <StackPanel Orientation="Horizontal">
                        <TextBox Width="40" Text="{Binding RelativeSource={RelativeSource TemplatedParent},
                                                           Path=R, Mode=TwoWay}"/>
                        <TextBox Width="40" Text="{Binding RelativeSource={RelativeSource TemplatedParent},
                                                           Path=G, Mode=TwoWay}"/>
                        <TextBox Width="40" Text="{Binding RelativeSource={RelativeSource TemplatedParent},
                                                           Path=B, Mode=TwoWay}"/>
                    </StackPanel>
                    <Rectangle Width="50" Height="50" Margin="5"
                               Fill="{Binding RelativeSource={RelativeSource TemplatedParent},
                                             Path=SelectedColor}"/>
                </StackPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

使用自定义控件：

<local:CustomColorPicker SelectedColor="{Binding MyColor}" 
                         AvailableColors="{Binding MyColors}"/>

其中 MyColor 和 MyColors 是绑定到 ViewModel 中的属性，表示选中的颜色和可选的颜色列表。