如何定义显示从 RGB 值中选择颜色矩形的 DataGrid ComboBox 列？

Question

我设法定义了在组合框中显示可用颜色索引 (int) 值的列。我应该显示一个填充了由颜色的 RGB 值定义的颜色的矩形，而不是颜色索引。

XAML：

<DataGrid Name="SelectionSets" CanUserAddRows="False" 
        CanUserResizeColumns="True" CanUserSortColumns="True" 
        ItemsSource="{Binding SelectionSets}" AutoGenerateColumns="False"
        ScrollViewer.CanContentScroll="True"
        ScrollViewer.VerticalScrollBarVisibility="Visible"
        SelectedItem="{Binding SelectedSelectionSet}">
    <DataGrid.Columns>
              <DataGridComboBoxColumn Header="{StaticResource XpStrColor}" SelectedValueBinding="{Binding ColorIndex}" 
                       SelectedValuePath="Index" DisplayMemberPath="Index">
                  <DataGridComboBoxColumn.ElementStyle>
                       <Style TargetType="ComboBox">
                              <Setter Property="ItemsSource" Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Path=DataContext.Colors}"/>
                              <Setter Property="IsReadOnly" Value="True"/>
                       </Style>
                  </DataGridComboBoxColumn.ElementStyle>
                  <DataGridComboBoxColumn.EditingElementStyle>
                       <Style TargetType="ComboBox">
                              <Setter Property="ItemsSource" Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Path=DataContext.Colors}"/>
                       </Style>
                 </DataGridComboBoxColumn.EditingElementStyle>
          </DataGridComboBoxColumn>
    </DataGrid.Columns>
</DataGrid>

ViewModel 下面是我自己的实现 INotifyPropertyChanged 和 SetValue 引发事件的类。

视图模型：

public class MainViewModel : ViewModel
{
    private ObservableCollection<DrawingColor> _colors;
    public ObservableCollection<DrawingColor> Colors
    {
        get { return _selectionSets; }
        set { this.SetValue(ref _colors, value); }
    }

    private ObservableCollection<SelectionSetViewModel> _selectionSets;
    public ObservableCollection<SelectionSetViewModel> SelectionSets
    {
        get { return _selectionSets; }
        set { this.SetValue(ref _selectionSets, value); }
    }

    private SelectionSetViewModel _selectedSelectionSet;
    public SelectionSetViewModel SelectedSelectionSet
    {
        get { return this._selectedSelectionSet; }
        set { this.SetValue(ref _selectedSelectionSet, value); }
    }
}

一行的类：

public class SelectionSetViewModel : ViewModel
{
    //...

    private int _colorIndex;
    public int ColorIndex
    {
        get { return _colorIndex; }
        set { SetValue(ref _colorIndex, value); }
    }
    //...
 }

颜色类：

    public class DrawingColor
    {
        public int Index { get; set; }
        public Byte R { get; set; }
        public Byte G { get; set; }
        public Byte B { get; set; }
    }

所以 DataContext 和类结构已经工作了。

我也（有点）知道如何在 ComboBox 中显示颜色矩形：

                <ComboBox.ItemTemplate>
                    <DataTemplate>
                        <WrapPanel>
                            <Rectangle Height="10" Width="80">
                                <Rectangle.Fill>
                                    <SolidColorBrush Color ="{Binding Converter={StaticResource ColorIndexToColorConverter}}"/>
                                </Rectangle.Fill>
                            </Rectangle>
                        </WrapPanel>
                    </DataTemplate>
                </ComboBox.ItemTemplate>

转换器

public class ColorIndexToColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter,
        System.Globalization.CultureInfo culture)
    {
        if (((DrawingColor)value).Index == -1 || ((DrawingColor)value).Index == -10)
            return Color.FromArgb(0, 255, 255, 255);
        else
            return Color.FromArgb(255, ((DrawingColor)value).R, ((DrawingColor)value).G, ((DrawingColor)value).B);
    }

    public object ConvertBack(object value, Type targetType, object parameter,
        System.Globalization.CultureInfo culture)
    {
        return value.Equals(true) ? parameter : Binding.DoNothing;
    }
}

但是我不明白如何将 DataTemplete 与 DataGridComboBoxColumn 包含 DisplayMemberPath 和 DataGridComboBoxColumn.ElementStyle 的示例结合起来。

Answer 1

尝试将其添加为 ComboBox 样式的一部分。像这样：

<DataGridComboBoxColumn Header="{StaticResource XpStrColor}" SelectedValueBinding="{Binding ColorIndex}" 
        SelectedValuePath="Index" DisplayMemberPath="Index">
    <DataGridComboBoxColumn.ElementStyle>
        <Style TargetType="ComboBox">
            <Setter Property="ItemsSource" Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Path=DataContext.Colors}"/>
            <Setter Property="IsReadOnly" Value="True"/>
            <Setter Property="ItemTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <WrapPanel>
                            <Rectangle Height="10" Width="80">
                                <Rectangle.Fill>
                                    <SolidColorBrush Color ="{Binding Converter={StaticResource ColorIndexToColorConverter}}"/>
                                </Rectangle.Fill>
                            </Rectangle>
                        </WrapPanel>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </DataGridComboBoxColumn.ElementStyle>
    <DataGridComboBoxColumn.EditingElementStyle>
        <Style TargetType="ComboBox">
            <Setter Property="ItemsSource" Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Path=DataContext.Colors}"/>
            <Setter Property="ItemTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <WrapPanel>
                            <Rectangle Height="10" Width="80">
                                <Rectangle.Fill>
                                    <SolidColorBrush Color ="{Binding Converter={StaticResource ColorIndexToColorConverter}}"/>
                                </Rectangle.Fill>
                            </Rectangle>
                        </WrapPanel>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </DataGridComboBoxColumn.EditingElementStyle>
</DataGridComboBoxColumn>

要修复强制转换异常，请检查该值是否为转换器中的 DrawingColor。如果不是，则返回 null。像这样：

public class ColorIndexToColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter,
        System.Globalization.CultureInfo culture)
    {
        if (!(value is DrawingColor))
            return null;
        if (((DrawingColor)value).Index == -1 || ((DrawingColor)value).Index == -10)
            return Color.FromArgb(0, 255, 255, 255);
        else
            return Color.FromArgb(255, ((DrawingColor)value).R, ((DrawingColor)value).G, ((DrawingColor)value).B);
    }

    public object ConvertBack(object value, Type targetType, object parameter,
        System.Globalization.CultureInfo culture)
    {
        return value.Equals(true) ? parameter : Binding.DoNothing;
    }
}