How do I change the color of Cell in WPF DataGrid based on a property of the object in itemsource?

Question

I have a very simple object called CellData. Is defined as:

public sealed class CellData
{
    internal string DisplayText
    {
        get;
        set;
    }

    public string Color
    {
        get;
        set;
    }

    public override string ToString()
    {
        return this.DisplayText;
    }
}

I can get it to display using the WPF toolkit DataGrid just fine. However, I want to be able to change the background color of each cell based on what data is in the cell. I'm having trouble understanding what type of binding I need to do because I can't see to get to the CellData object in my DataTrigger. I have tried the following, and several other variations but I can't get it to work:

            <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=(CellData).Color, Mode=OneWay}" Value="1">
                <Setter Property="Background" Value="Red" />
                <Setter Property="Foreground" Value="White" />
            </DataTrigger>

I am pretty new to XAML databidinding so any suggestions would be greatly appreciated. Thank you.

Answer 1

You can use a ValueConverter: create a binding between the cell's background color and the Color property of your object, then add a ValueConverter to ensure that your data is properly converter to the object needed to set the background.

Answer 2

I'm guessing you have a RowData object that contains several CellData objects, that you have bound the ItemsSource of the DataGrid to a list of RowData objects, and that you are using DataGridTextColumns or other DataGridBoundColumns bound to the properties on RowData, maybe just by using AutoGenerateColumns="True".

The problem is that the DataContext for the cell is actually the RowData, not the CellData. The Binding is only used for the Text property of the TextBlock and TextBox. This is useful if you want to have the triggers based on other properties of the RowData object, but makes it difficult in scenarios like yours where you have a rich data structure for the cell data.

If you are creating the columns explicitly, you can just use the property for the column again in the trigger:

<DataGridTextColumn Binding="{Binding Foo}">
    <DataGridTextColumn.CellStyle>
        <Style TargetType="DataGridCell">
            <Style.Triggers>
                <!-- DataContext is the row, so start 
                     binding path with Foo property -->
                <DataTrigger Binding="{Binding Foo.Color}" Value="1">
                    <Setter Property="Background" Value="Red" />
                    <Setter Property="Foreground" Value="White" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </DataGridTextColumn.CellStyle>
</DataGridTextColumn>

Unfortunately, this won't let you share the style between columns since it is specific to the column name. If you want to do that, you may need to create a custom DataGridColumn subclass that has a property of type Binding that it applies to the DataContext property of the object returned by GenerateElement and GenerateEditingElement.

(Using a Binding with RelativeSource of Self as you did in your sample gives you the element in the visual tree rather than its DataContext, which won't help you get to the CellData object.)