使用DataGridTemplateColumn和Rectangle制作颜色选择器Color

当前做的项目需要对曲线颜色进行设置，曲线显示在DataGrid中。

先说一下错误情况。

一开始我使用DataGridComboBoxColumn代码如下：

    <DataGrid ItemsSource="{Binding CurveSettingList,ElementName=curveSetWin}"
                  AutoGenerateColumns="False" IsReadOnly="False" CanUserSortColumns="False"
                  CanUserAddRows="False" CanUserDeleteRows="False"
                  LoadingRow="dataGrid_LoadingRow" AlternationCount="2">
            <DataGrid.Columns>
                <DataGridComboBoxColumn Header="{DynamicResource lineColor}" MinWidth="60" 
                                        ItemsSource="{Binding Source={StaticResource colorBrushes}}"
                                        SelectedValueBinding="{Binding LineColor, Converter={StaticResource color2RectangleConverter}}"
                                        SelectedItemBinding="{Binding LineColor, Converter={StaticResource color2RectangleConverter}, UpdateSourceTrigger=PropertyChanged}"
                                        HeaderStyle="{StaticResource dgHeader}" Width="*">
                </DataGridComboBoxColumn>
            </DataGrid.Columns>
        </DataGrid>

colorBrushes如下：

 <ObjectDataProvider MethodName="GetType" 
                            ObjectType="{x:Type sys:Type}" x:Key="colorsTypeOdp">
            <ObjectDataProvider.MethodParameters>
                <sys:String>System.Windows.Media.Colors, PresentationCore,
            Version=3.0.0.0, Culture=neutral, 
            PublicKeyToken=31bf3856ad364e35</sys:String>
            </ObjectDataProvider.MethodParameters>
        </ObjectDataProvider>
        <ObjectDataProvider ObjectType="{x:Type local:GetBrushes}"  
                            MethodName="GetRectangles" x:Key="colorBrushes">
            <ObjectDataProvider.MethodParameters>
                <ObjectDataProvider ObjectInstance="{StaticResource colorsTypeOdp}"  
                            MethodName="GetProperties">
                </ObjectDataProvider>
            </ObjectDataProvider.MethodParameters>
        </ObjectDataProvider>

绑定的效果如下：

存在的问题就是：curveName列和lineThickness是可以正确绑定的。（curveName和lineThickness是DataGrid的另外两列，我上边的代码没有复制上去。）lineColor列是根据ObjectDataProvider 提供的Rectangle显示颜色选择器。它的选项也可以填充各种颜色，但是在加载时lineColor列不显示相应的颜色，选中时再点击空白的地方也会消失。

通过使用VS2015中的Live Visual Tree工具观察发现DataGridComboBoxColumn 的非编辑状态的DataGridCell内容是TextBlock类，与想要的Rectangle不符。所以转换思路使用DataGridTemplateColumn。

下面是正确的情况：

<DataGridTemplateColumn Header="{DynamicResource lineColor}"
                                        HeaderStyle="{StaticResource dgHeader}" Width="*"
                                        CellTemplate="{StaticResource DateTemplate}"
                                        CellEditingTemplate="{StaticResource EditingDateTemplate}">
                </DataGridTemplateColumn>

其中的DataTemplate和EditingDataTemplate是这样的：

<!--显示模板-->
        <DataTemplate x:Key="DateTemplate" >
            <StackPanel>
                <Border>
                    <Rectangle Fill="{Binding LineColor, Converter={StaticResource color2BrushConverter}}" Width="60" Height="20"></Rectangle>
                </Border>
            </StackPanel>
        </DataTemplate>
        <!--编辑模板-->
        <DataTemplate x:Key="EditingDateTemplate">
            <ComboBox ItemsSource="{Binding Source={StaticResource colorBrushes}}"
                      SelectedItem="{Binding LineColor, Converter={StaticResource color2RectangleConverter},Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
                      >
            </ComboBox>
        </DataTemplate>

colorBrushes请看错误的情况。

其中color2BrushConverter如下：

 public class Color2BrushConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            Color? color = value as Color?;
            if (color.HasValue)
            {
                return new SolidColorBrush(color.Value);
            }
            else
            {
                return null;
            }
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

color2RectangleConverter如下：

  public class Color2RectangleConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            Color? color = value as Color?;
            if (color.HasValue)
            {
                Rectangle newRect = new Rectangle();
                newRect.Fill = new SolidColorBrush(color.Value);
                newRect.Height = 20;
                newRect.Width = 60;
                newRect.Margin = new Thickness(0);
                return newRect;
            }
            else
            {
                return null;
            }
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            Rectangle rect = value as Rectangle;
            Brush brush = rect.Fill;
            Color color = (Color)ColorConverter.ConvertFromString(brush.ToString());
            return color;
        }
    }

效果如下：

问题出在Rectangle的Fill绑定的是System.Windows.Media.Color类，这是不行的，必须是Brush类。思路来自

https://stackoverflow.com/questions/5474828/adding-a-small-coloured-rectangle-in-datagrid-cell/5474889#5474889

点击打开链接