使用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
点击打开链接