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

本文关键字：RGB 选择 色矩 颜色 显示 何定义 定义 ComboBox DataGrid | 更新日期: 2023-09-27 18:06:46

我设法在组合框中定义显示可用颜色索引(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引发事件。

ViewModel: 

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); }
    }
    //...
 }
Class for color: 
    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.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与包含DisplayMemberPath和DataGridComboBoxColumn. elementstyle .

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

的示例相结合

尝试将其添加为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;
    }
}
相关文章：