Updating row colour when a value changes in WPF/xaml

Question

I've looked at a number of answers already on stackoverflow, but none of the replies seems to be able to give me what I need. This question seemed to describe my situation quite closely, but the solution did not work for me.

I have a check box column in a DataGrid, and when a user clicks the checkbox, since the data is bound to a BindableList, the value (IsOnList) associated with it gets updated. The type object of the bindable list also stores a bool to indicate if the value has been changed (Changed), which gets flipped when IsOnList changes.

If the value has been changed, I want to indicate this to the user, by setting the back ground to red. Relevant parts of the xaml are below. I have tried setter and trigger style on the data grid row, but with little luck (for testing, I also put in mouse over to make sure these were getting picked up, and it worked fine, as well as trying things like TwoWay). The DataTriggers will be called when the grid is loaded, so, since changed is always false when the grid is loaded, the background will be blue. When I click the check box, that updates Changed to true, the background does not change colour. I have even added a column for the Changed property to see if that value changes, but it does not.

<UserControl.Resources>
    <vm:ProductListEditViewModel x:Key="ViewModel"/>
    <vm:ChangedHighlightConverter x:Key="ChangedHighlightConverter"/>
</UserControl.Resources>

<tk:DataGrid ItemsSource="{Binding EditableLists}" x:Name="dataGrid" Grid.Row="1"
                 ...
                 SelectedItem="{Binding Path=SelectedAttribute, Mode=TwoWay}">

        <tk:DataGrid.RowStyle>
            <Style TargetType="tk:DataGridRow">
                <Setter Property="Background" Value="{Binding Changed, Converter={StaticResource ChangedHighlightConverter}}" />
                <Style.Triggers>
                    <DataTrigger Binding="{Binding Path=Changed, Mode=OneWay}" Value="True">
                        <Setter Property="Background" Value="Red" />
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Changed, Mode=TwoWay}" Value="True">
                        <Setter Property="Background" Value="Red" />
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Changed}" Value="False">
                        <Setter Property="Background" Value="Blue" />
                    </DataTrigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Foreground" Value="Red"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </tk:DataGrid.RowStyle>

        <tk:DataGrid.Columns>
            <tk:DataGridTextColumn Header="Group Name" Binding="{Binding GroupDescription}" Width="120" IsReadOnly="True"/>
            <tk:DataGridTextColumn Header="List Name" Binding="{Binding ListDescription}" Width="120" IsReadOnly="True"/>
            <tk:DataGridTextColumn Header="List ID" Binding="{Binding ListId}" Width="50" IsReadOnly="True"/>
            <tk:DataGridTextColumn Header="Quantity" Binding="{Binding Quantity}" Width="50" IsReadOnly="True"/>
            <tk:DataGridTextColumn Header="Comment" Binding="{Binding Description}" Width="120" IsReadOnly="True"/>
            <tk:DataGridTextColumn Header="Changed" Binding="{Binding Changed, Mode=TwoWay}" Width="40" IsReadOnly="True"/>
            <tk:DataGridTemplateColumn Header="On List" Width="50">
                <tk:DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <CheckBox HorizontalAlignment="Center" IsChecked="{Binding Path=IsOnList, UpdateSourceTrigger=PropertyChanged}"/>
                    </DataTemplate>
                </tk:DataGridTemplateColumn.CellTemplate>
            </tk:DataGridTemplateColumn>
        </tk:DataGrid.Columns>

    </tk:DataGrid>

The relevant parts of my class are:

public bool IsOnList
    {
        get { return isOnList; }
        set {
            Changed = !changed;
            isOnList = value;
        }
    }

public bool Changed
{
        get { return changed; }
        set { this.changed = value; }
}

I'm pretty new to C# and xaml, so have been struggling trying to make this work. Am I missing something obvious?

Answer 1

Without seeing the entire code of your class, you may need to implement INotifyPropertyChanged in your class so that WPF bindings know when properties are changing. You aren't firing any PropertyChanged events so the background style will never update (nor will the Changed property in the DataGridRow).