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

来源：互联网发布：滚动屏编辑软件编辑：程序博客网时间：2024/05/17 01:08

当前做的项目需要对曲线颜色进行设置，曲线显示在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

点击打开链接

0 0