How do I change the background color of a cell using WPF Toolkit Datagrid

Question

I'm using the WPF toolkit datagrid, and I'd like to set the background color of a cell, not the row, based on the content of the cell.

For the sake of simplicity, lets say the column is called Foo and I'd like the background of the cell to be blue when Foo is 1, red when Foo is 2, Yellow when Foo is 3 and Green when Foo is greater than 3.

If I can do that, I'm pretty sure I can solve any of the more complex cases that I need to deal with.

Answer 1

One of the ways how you could do this is to define the ElementStyle for the column and then bind the textblock background to the color property of the data element behind the datagrid row. Here's an example:

DataGridTextColumn xaml:

<DataGridTextColumn Width="SizeToCells"   
                       MinWidth="150" 
                       Binding="{Binding Name}">

    <DataGridTextColumn.ElementStyle>
        <Style TargetType="{x:Type TextBlock}">
            <Setter Property="TextBlock.Background" Value="{Binding Color}" />
        </Style>
    </DataGridTextColumn.ElementStyle>
</DataGridTextColumn>

data item declaration:

public class TestItem
{
    public TestItem(int foo)
    {
        Foo = foo;
    }

    public int Foo { get; set; }
    public Brush Color
    {
        get
        {
            Color color = Colors.Green;
            switch (Foo)
            {
                case 1: color = Colors.Red; break;
                case 2: color = Colors.Yellow; break; 
            }
            return new SolidColorBrush(color);
        }
    }
}

hope this helps, regards

Answer 2

You do this with Styles and DataTriggers. Just set your ElementStyle with your default background property, in this case Green, and add DataTriggers for the other cases:

<DataGridTextColumn Binding="{Binding WhateverIWantToDisplay}" >
  <DataGridTextColumn.ElementStyle>
    <Style TargetType="{x:Type TextBlock}">

      <Setter Property="Background" Value="Green" />

      <Style.Triggers>
        <DataTrigger Binding="{Binding Foo}" Value="1">
          <Setter Property="Background" Value="Blue" />
        </DataTrigger>

        <DataTrigger Binding="{Binding Foo}" Value="2">
          <Setter Property="Background" Value="Red" />
        </DataTrigger>

        <DataTrigger Binding="{Binding Foo}" Value="2">
          <Setter Property="Background" Value="Yellow" />
        </DataTrigger>

      </Style.Triggers>
    </Style>
  </DataGridTextColumn.ElementStyle>
</DataGridTextColumn>

Another approach is to use a binding with a converter:

<DataGridTextColumn Binding="{Binding WhateverIWantToDisplay}" >
  <DataGridTextColumn.ElementStyle>
    <Style TargetType="{x:Type TextBlock}">

      <Setter Property="Background"
        Value="{Binding Foo, Converter={x:Static my:FooToColorConverter.Instance}}" />

    </Style>
  </DataGridTextColumn.ElementStyle>
</DataGridTextColumn>

with this converter:

public class FooToColorConverter : IValueConverter
{
  public static readonly IValueConverter Instance = new FooToColorConverter();
  public object Convert(object value, ...
  {
    int foo = (int)value;
    return
      foo==1 ? Brushes.Blue :
      foo==2 ? Brushes.Red :
      foo==3 ? Brushes.Yellow :
      foo>3 ? Brushes.Green :
        Brushes.Transparent;  // For foo<1
  }
  public object ConvertBack(...
  {
    throw new NotImplementedException();
  }
}

Note that answer serge_gubenko gave will work as well, but only if your Foo property value never changes. This is because the Color property getter will only be called once. His solution can be improved by changing Color to a read-only DependencyProperty and updating it whenever Foo is assigned, but it is generally a bad idea to have UI-specific information like colors in your data model, so it is not recommended.