当绑定属性的值更改时，更改DataGrid单元格的文本颜色

Question

I have a DataGrid in WPF, filled with elements of an ObservableCollection ( ElementGroup items that have an ID and a Text property and are read from an XML file). What I want to achieve is that the text color of the cell content changes when a user has edited the value of the cell. The color of the cell should remain for example green as soon as the user leaves the cell and the value is different than the original value.

A user control with the following datagrid:

<DataGrid Grid.Row="7" Grid.Column="3" ItemsSource="{Binding Config.ElementGroups, Mode=TwoWay}" AutoGenerateColumns="False" >            
    <DataGrid.Columns>  
        <DataGridTextColumn Header="ID" Binding="{Binding Id, Mode=TwoWay}" Width="Auto"/>
        <DataGridTextColumn Header="Group Name" Binding="{Binding Text, Mode=TwoWay}" Width="*" />
    </DataGrid.Columns>
</DataGrid>

Nothing in the code behind of the User Control.

The ElementGroup class with the 2 Properties, that also implements INotifyPropertyChanged (extra class in order to re-use it)

public class ElementGroup : NotifyPropertyChangedBase, ITag
{
    private int myId;
    private string myText;

    public ElementGroup()
    {
        Elements = new List<Element>();
    }

    public List<Element> Elements { get; private set; }

    public int Id 
    { 
        get { return myId; }
        set
        {
            if (myId == value)
            {
                return;
            }
            myId = value;
            OnPropertyChanged();
        }
    }

    public string Text
    {
        get { return myText; }
        set
        {
            if (myText == value)
            {
                return;
            }
            myText = value;
            OnPropertyChanged();
        }
    }
}

The datagrid rows are correctly filled:

datagrid example

I listen to the property changed event in my viewmodel. The event is fired and the breakpoint is hit when I set it to the handler and then change a cell of the datagrid. The HasTextChanged and HasIdChanged functions return true if the change is a real change or false if the value was changed to the previous value.

private void GroupPropertyChanged(object sender, PropertyChangedEventArgs propertyChangedEventArgs)
{
    ElementGroup changedGroup = sender as ElementGroup;

    switch (propertyChangedEventArgs.PropertyName)
    {
        case "Text":
            GroupChanged = HasTextChanged(changedGroup);
            OnPropertyChanged("GroupChanged");
            break;
        case "Id":
            GroupChanged = HasIdChanged(changedGroup);
            OnPropertyChanged("GroupChanged");
            break;
    }           
}

At first I thought I just return a color and bind the foreground color to the datagrid, just as it is working for a simple TextBox :

<TextBox Grid.Row="5" Grid.Column="3" Text="{Binding Config.Description}" Foreground="{Binding DescriptionColor}"/>

But putting the same Foreground binding to the DataGridTextColumns did not work. I tried to adapt the answer found here ( Change Color of DatagridCell ) but could not get it to work ( DescriptionColor in below example is SolidColorBrush DescriptionColor = Brushes.Green :

<DataGridTextColumn Header="Group Name" Binding="{Binding Text, Mode=TwoWay}" Width="*" >
    <DataGridTextColumn.CellStyle>
        <Style>
            <Setter Property="Border.Background" Value="{Binding DescriptionColor}"/>
        </Style>
    </DataGridTextColumn.CellStyle>
</DataGridTextColumn>

All other cell color change answers I found were about setting a trigger and if the value changes to a specified value, then the color can be changed.

So I decided to go for the "real change yes/no" approach and added a style trigger my datagrid:

<DataGrid Grid.Row="7" Grid.Column="3" ItemsSource="{Binding Config.ElementGroups, Mode=TwoWay}" AutoGenerateColumns="False" >
    <DataGrid.CellStyle>
        <Style TargetType="{x:Type DataGridCell}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding GroupChanged}" Value="True">
                    <Setter Property="Background" Value="Green"/>
                </DataTrigger>
                <DataTrigger Binding="{Binding GroupChanged}" Value="False">
                    <Setter Property="Background" Value="Black"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </DataGrid.CellStyle>
    <DataGrid.Columns>  
        <DataGridTextColumn Header="ID" Binding="{Binding Id, Mode=TwoWay}" Width="Auto"/>
        <DataGridTextColumn Header="Group Name" Binding="{Binding Text, Mode=TwoWay}" Width="*" />
    </DataGrid.Columns>
</DataGrid>

This also didn't work and I begin to wonder if I miss something elementary.

Has anybody an idea what I do wrong, or what I have to do to get this to work? I must admit that I am not 100% understanding how the trigger works and if it really knows what to do...

Thanks

Answer 1

If I clearly understand you want to mark cell what is currently edited by user. So if you are using DataGridTextBoxColumns you can add EditingElementStyle for them.

<DataGrid.Resources>
    <Style x:Key="EditingStyle" TargetType="TextBox">
        <Setter Property="Background" Value="Green" />
        <Setter Property="Foreground" Value="White" />
    </Style>
</DataGrid.Resources>

And the columns should look like this.

<DataGridTextColumn Header="ID" Binding="{Binding Id, Mode=TwoWay}" Width="Auto"
                    EditingElementStyle="{StaticResource EditingStyle}" />

Update

To remaing color of edited cells you can 1 add some bool props into ElementGroup that indicating edited cells. Something like this.

private bool _isIdChanged;
public bool IsIdChanged
{
    get { return _isIdChanged; }
    set { _isIdChanged = value; NotifyPropertyChanged( "IsIdChanged" ); }
}

2 You should add into the id setter IsIdChanged = true .

...
myId = value;
OnPropertyChanged();
IsIdChanged = true;

3 Change the binding for ID column.

Binding="{Binding Id, Mode=TwoWay, NotifyOnTargetUpdated=True}"

4 Add style for this column.

<Style x:Key="IdStyle" TargetType="DataGridCell">
    <Style.Triggers>
        <DataTrigger Binding="{Binding IsIdChanged}" Value="True">
            <Setter Property="Background" Value="Green" />
        </DataTrigger>
    </Style.Triggers>
</Style>

<DataGridTextColumn Name="ID" ... CellStyle="{StaticResource IdStyle}" />

5 After binding to the DataGrid should change all values of the IsIdChanged of the collection elements to false. And it needed to set it to false after changing values from code behind.

6 Should add same code for other columns. Hope this helps.

Update

I've looked at your code, you should change DataTrigger binding to this.

<DataTrigger Binding="{Binding IdChanged}" Value="True">
    <Setter Property="Background" Value="Green" />
</DataTrigger>

And you should add these strings in the constructor of ChangeConfigSettingViewModel . It should be last strings of constructor for initializing IdChanged values to false.

foreach ( PersonModel pers in myPersons )
{
    pers.IdChanged = false;
}