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

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


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.


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


A slightly different approaching is, instead of targeting the TextBlock element, which often leaves a border around the control, to the DataGridCell itself instead. In my case I already had a style I wanted to inherit from, I just needed to change background colours depending on the value:

<DataGridTextColumn     Width="*"    Header="Status"    Binding="{Binding EventStatus, Converter={StaticResource DescriptionAttributeConverter}}"    HeaderStyle="{StaticResource DataGridColumnHeaderStyleCenterAligned}">    <DataGridTextColumn.CellStyle>        <Style TargetType="{x:Type DataGridCell}" BasedOn="{StaticResource DataGridCellStyleCenterAligned}">            <Style.Triggers>                <DataTrigger Binding="{Binding EventStatus}" Value="1">                    <Setter Property="Background" Value="Green" />                </DataTrigger>                <DataTrigger Binding="{Binding EventStatus}" Value="2">                    <Setter Property="Background" Value="Red" />                </DataTrigger>            </Style.Triggers>        </Style>    </DataGridTextColumn.CellStyle></DataGridTextColumn>

Might be of some use to people my situation.