如何更改 WPF DataGrid 中某些单元格的背景颜色？

How to change background color for some cell in WPF DataGrid?

提问by Alexus

I have a datagrid binded to an object collection.

我有一个绑定到对象集合的数据网格。

One property of the objects is a string that store a color value.

对象的一个​​属性是存储颜色值的字符串。

On this "COLORBACKGROUND" cell click, a colorpicker opens to change it.

在这个“COLORBACKGROUND”单元格上单击，颜色选择器会打开以更改它。

What I need is to change the background color of the cell by the value displayed in datagrid rows (#RGB).

我需要的是通过数据网格行 (#RGB) 中显示的值更改单元格的背景颜色。

<DataGrid SelectionUnit="Cell" SelectedCellsChanged="DgDataTable_OnSelectedCellsChanged" x:Name="DgDataTable" Grid.Row="0" Grid.ColumnSpan="2" Margin="10,20,10,0" AutoGenerateColumns="true" HeadersVisibility="All" RowHeaderWidth="20" Style="{StaticResource AzureDataGrid}" GridLinesVisibility="Horizontal" LoadingRow="dgDataTable_LoadingRow" ColumnHeaderHeight="10" AlternatingRowBackground="{DynamicResource {x:Static SystemColors.GradientActiveCaptionBrushKey}}" AutoGeneratingColumn="DgDataTable_AutoGeneratingColumn">
    <DataGrid.RowHeaderStyle>
        <Style TargetType="DataGridRowHeader">
            <Setter Property="FontSize" Value="10"/>
            <Setter Property="Background" Value="LightCyan"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
        </Style>
    </DataGrid.RowHeaderStyle>
    <DataGrid.CellStyle>
        <Style TargetType="DataGridCell">
            <Setter Property="TextBlock.TextAlignment" Value="Center"/>
          <!--  <Style.Triggers>
                <Trigger Property="Text" Value="John">
                    <Setter Property="Background" Value="LightGreen"/>
                </Trigger>
            </Style.Triggers> -->
        </Style>
    </DataGrid.CellStyle>
</DataGrid>

I tried something with AutoGenerating column :

我用 AutoGenerating 列尝试了一些东西：

private void DgDataTable_AutoGeneratingColumn(object sender, DataGridAutoGeneratingColumnEventArgs e)
{
    if (e.PropertyName == "SrcAlert")
    {
        DataGridComboBoxColumn cb = new DataGridComboBoxColumn();
        e.Column = cb;
        cb.ItemsSource = new List<string> {"1", "2"};
        cb.SelectedValueBinding = new Binding("SrcAlert");
        e.Column.Header = "SrcAlert";
    }
    if (e.PropertyName.Equals("ColorBackground"))
    {
        DataGridTextColumn tc = new DataGridTextColumn();
        e.Column = tc;
        tc.Foreground = (Color)ColorConverter.ConvertFromString(DgDataTable.CurrentCell.Item.ColorBackground);
    }
}

this Item.ColorBackgrounddoesn't compile... I put it for my explanation, thats what I need.

这Item.ColorBackground不编译...我把它作为我的解释，这就是我需要的。

I tried another solution I found :

我尝试了另一种解决方案：

if (e.PropertyName.Equals("ColorBackground"))
{
    string s = DgDataTable.CurrentCell.Item.ToString();
    e.Column.CellStyle.Setters.Add(new Setter(DataGridCell.BackgroundProperty, (Color)ColorConverter.ConvertFromString(s)));
}

but that was a fail.

但那是失败的。

Thank you for your help !

感谢您的帮助 ！

---

---

编辑： ASh 解决方案的屏幕截图，非常适合我：

---

---

EDIT : I adapted your solution for multiple columns with color Picker :

编辑：我使用颜色选择器为多列调整了您的解决方案：

I add style setters to display only colors in the cells :

我添加样式设置器以仅在单元格中显示颜色：

    <Style TargetType="DataGridCell" x:Key="ColorPickerCellBG" 
       BasedOn="{StaticResource CommonCell}">
        <Setter Property="Background" Value="{Binding Path=BG}"/>
        <Setter Property="Foreground" Value="Transparent"/>
        <Setter Property="Width" Value="30"></Setter>
    </Style>
    <Style TargetType="DataGridCell" x:Key="ColorPickerCellAL" 
       BasedOn="{StaticResource CommonCell}">
        <Setter Property="Background" Value="{Binding Path=AL}"/>
        <Setter Property="Foreground" Value="Transparent"/>
        <Setter Property="Width" Value="30"></Setter>
    </Style>
    <Style...

When the cell is clicked, the rgb color value is visible, the style must be "ClickedCell"... How can I Improve that ?

单击单元格时，rgb 颜色值可见，样式必须为“ClickedCell”...我该如何改进？

回答by ASh

it is possible to apply special style to a single auto-generated column.

可以将特殊样式应用于单个自动生成的列。

declare two cell styles in resources

在资源中声明两种单元格样式

<Window.Resources>
    <Style TargetType="DataGridCell" x:Key="CommonCell"
           BasedOn="{StaticResource {x:Type DataGridCell}}">
        <Setter Property="TextBlock.TextAlignment" Value="Center"/>
    </Style>

    <Style TargetType="DataGridCell" x:Key="ColorPickerCell" 
           BasedOn="{StaticResource CommonCell}">
        <Setter Property="Background" Value="{Binding Path=ColorBackground}"/>
    </Style>
</Window.Resources>

ColorPickerCellinherits CommonCellstyle.

ColorPickerCell继承CommonCell风格。

<DataGrid SelectionUnit="Cell" 
          x:Name="DgDataTable" 
          AutoGenerateColumns="true" HeadersVisibility="All" RowHeaderWidth="20" 
          GridLinesVisibility="Horizontal" 
          ColumnHeaderHeight="10" 
          AlternatingRowBackground="{DynamicResource {x:Static SystemColors.GradientActiveCaptionBrushKey}}" 

          CellStyle="{StaticResource CommonCell}"
          AutoGeneratingColumn="DgDataTable_AutoGeneratingColumn">

    <DataGrid.RowHeaderStyle>
        <Style TargetType="DataGridRowHeader">
            <Setter Property="FontSize" Value="10"/>
            <Setter Property="Background" Value="LightCyan"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
        </Style>
    </DataGrid.RowHeaderStyle>

</DataGrid>

change CellStylefor a generated column:

更改CellStyle生成的列：

private void DgDataTable_AutoGeneratingColumn(object sender, DataGridAutoGeneratingColumnEventArgs e)
{
    if (e.PropertyName == "ColorBackground")
    {
        e.Column.CellStyle = (sender as DataGrid).FindResource("ColorPickerCell") as Style;
    }
}

回答by AnjumSKhan

Apply a Converter, this Converteris used for two diff. purpose hence returns two diff types. Beauty of this approach is : You can change the propertyin XAMLitself. No change needed in code now, and hence it is MVVM friendly.

应用 a Converter，这Converter用于两个差异。因此目的返回两种差异类型。这种方法的美妙之处：您可以更改property的XAML本身。现在不需要更改代码，因此它是 MVVM 友好的。

For example, in DataTriggerchange Value=BkgPropto Value=Nameand see.

例如，在DataTrigger变化Value=BkgProp到Value=Name和看到。

Sample XAML :

示例 XAML：

<Window ...>
    <Window.Resources>
        <local:PropBasedStringToColorConverter x:Key="StringToColorCnvKey"/>
    </Window.Resources>
    <Grid>
        <DataGrid x:Name="Dgrd">
        <DataGrid.Resources>
            <Style TargetType="DataGridCell">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding .Column, RelativeSource={RelativeSource Self}, Converter={StaticResource StringToColorCnvKey}}" Value="BkgProp">
                        <Setter Property="Background" Value="{Binding BkgProp, Converter={StaticResource StringToColorCnvKey}}"/>
                    </DataTrigger>
                </Style.Triggers>                    
            </Style>
        </DataGrid.Resources>
    </DataGrid>
    </Grid>
</Window>

Sample Data :

样本数据 ：

Dgrd.ItemsSource = new[] { new { BkgProp = "#abcdef", Name = "Anjum" }, new { BkgProp = "#edf2ed", Name = "Anjum" }, new { BkgProp = "#ff0000", Name = "Anjum" } }.ToList();

Converter Code :

转换器代码：

public class PropBasedStringToColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        object result = null;

        if (value == null) return "N/A";

        if (value.GetType() == typeof(DataGridTextColumn))
        { 
            string path = ((Binding)((DataGridTextColumn)value).Binding).Path.Path;
            return path;
        }
        else if (value.GetType() == typeof(string))
        {
            result = new SolidColorBrush((Color)ColorConverter.ConvertFromString(value.ToString()));
        }
        return result;
    }

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