C# WPF实现带基础色预览及自定义取色器选项的组合框开发咨询

基础实现逻辑 #

完全不依赖第三方控件库，仅用原生WPF实现，分为4个核心步骤： #

1. 定义颜色项数据模型 #

用来统一存储下拉项的展示信息和标识

public class ColorItem
{
    public string DisplayName { get; set; }
    public SolidColorBrush ColorBrush { get; set; }
    // 标记是否为自定义取色的入口项
    public bool IsCustomPicker { get; set; } = false;
}

2. 初始化下拉列表数据源 #

生成你要求的8个基础色+自定义入口项：

// 下拉列表绑定的数据源，建议放在ViewModel或者窗体后台
public ObservableCollection<ColorItem> ColorItems { get; set; } = new ObservableCollection<ColorItem>();

public void InitColorList()
{
    // 8个RGB分量仅为0/255的基础色
    var baseColors = new List<Color>()
    {
        Colors.Black,
        Colors.Red,
        Colors.Green,
        Colors.Blue,
        Colors.Yellow,
        Colors.Cyan,
        Colors.Magenta,
        Colors.White
    };

    foreach (var color in baseColors)
    {
        ColorItems.Add(new ColorItem()
        {
            DisplayName = color.ToString(),
            ColorBrush = new SolidColorBrush(color)
        });
    }

    // 最后添加自定义取色入口
    ColorItems.Add(new ColorItem()
    {
        DisplayName = "更多颜色...",
        IsCustomPicker = true
    });
}

3. 自定义ComboBox展示模板 #

完全可以根据你的设计稿调整样式，这里提供基础结构：

<!-- 提前在资源里声明Boolean转Visibility的转换器 -->
<Window.Resources>
    <BooleanToVisibilityConverter x:Key="BoolToVisConverter"/>
</Window.Resources>

<ComboBox 
    x:Name="ColorComboBox" 
    ItemsSource="{Binding ColorItems}" 
    SelectionChanged="ColorComboBox_SelectionChanged"
    Width="180" Height="28">
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal" Margin="3,0" Height="22">
                <!-- 左侧颜色预览块 -->
                <Border 
                    Width="20" Height="20" 
                    Margin="0,0,8,0" 
                    BorderBrush="#AAAAAA" BorderThickness="1"
                    Background="{Binding ColorBrush}">
                    <!-- 自定义入口项显示三个点占位 -->
                    <TextBlock 
                        Text="..." 
                        HorizontalAlignment="Center" VerticalAlignment="Center"
                        Visibility="{Binding IsCustomPicker, Converter={StaticResource BoolToVisConverter}}"/>
                </Border>
                <!-- 右侧显示名称 -->
                <TextBlock Text="{Binding DisplayName}" VerticalAlignment="Center"/>
            </StackPanel>
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>

4. 处理选择事件和自定义取色逻辑 #

如果不想引用WinForm的ColorDialog，也可以自己写个简单的WPF颜色弹窗，用三个Slider分别控制RGB分量即可：

private void ColorComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (ColorComboBox.SelectedItem is ColorItem selectedItem)
    {
        // 点击的是自定义取色入口
        if (selectedItem.IsCustomPicker)
        {
            // 示例用WinForm原生ColorDialog，需要提前引用System.Windows.Forms程序集
            using (var colorDialog = new System.Windows.Forms.ColorDialog())
            {
                if (colorDialog.ShowDialog() == System.Windows.Forms.DialogResult.OK)
                {
                    // WinForm颜色转WPF颜色
                    var wpfColor = Color.FromArgb(
                        colorDialog.Color.A, 
                        colorDialog.Color.R, 
                        colorDialog.Color.G, 
                        colorDialog.Color.B);
                    
                    // 将选好的自定义颜色插入到列表倒数第二位，方便下次直接选择
                    ColorItems.Insert(ColorItems.Count - 1, new ColorItem()
                    {
                        DisplayName = wpfColor.ToString(),
                        ColorBrush = new SolidColorBrush(wpfColor)
                    });
                    // 自动选中新增的自定义颜色
                    ColorComboBox.SelectedIndex = ColorItems.Count - 2;
                    return;
                }
            }
            // 用户取消取色的话，恢复之前的选中状态
            ColorComboBox.SelectedItem = e.RemovedItems.Count > 0 ? e.RemovedItems[0] : null;
            return;
        }

        // 这里写普通颜色选中后的业务逻辑，比如把颜色赋值给目标控件
        // 示例：TargetControl.Background = selectedItem.ColorBrush;
    }
}

样式适配说明 #

如果需要完全匹配参考图，只需要修改ComboBox的ItemContainerStyle、调整预览块的圆角、边框颜色、字体样式即可，不需要修改核心逻辑。

内容的提问来源于stack exchange，提问作者TechNoob