Ufuk Can Bicici
Ufuk Can Bicici

Reputation: 3649

WPF: Change GridView cell colors when two specific cells in the GridView differ in values

I have the following problem: I have a GridView embedded into a ListView. It has two columns (the first and second ones) which initially have the same values in their cells, but by using other UI elements the user may able to change the value in a cell in the second column. What I want to do is to change the color of cells in the same row, when their values differ due to a change from the UI. Here is the ListView and GridView I am talking about:

enter image description here

Here, the first cells in both "Observation" and "Hidden State" columns should change their colors, indicating a difference in the values. And I have the following XAML code for the List and GridViews:

    <ListView Grid.Row="6" Margin="10" Name="ObservationsListView" SelectionChanged="ObservationsListView_SelectionChanged_1">
        <ListView.View>
            <GridView>
                <GridViewColumn Header="Observation" Width="122" DisplayMemberBinding="{Binding observationStr}" />
                <GridViewColumn Header="Hidden State" Width="122" DisplayMemberBinding="{Binding stateStr}" />
                <GridViewColumn Header="Value" Width="122" DisplayMemberBinding="{Binding valueStr}" />
            </GridView>
        </ListView.View>
    </ListView>

What is the easiest way to do that? Simply, something like

 GridView.Columns[0].Cell[currentCellIndex].Color = RED
 GridView.Columns[1].Cell[currentCellIndex].Color = RED

would do fine for me, but I am aware that things are more complex in WPF due to all the data binding stuff. A short way solution like the above one would be great for my causes here.

Upvotes: 1

Views: 1791

Answers (1)

Sheridan
Sheridan

Reputation: 69987

The easiest thing that you can do is to add another property to your class that has the observationStr and stateStr properties in it. The new property should be of type bool and return true when the values do not equal each other and false when they do. Then you can data bind to that property in a Trigger in the grid to update the colour for you:

public bool AreValuesChanged
{
    get { return observationStr != stateStr; }
}

Of course, you'd also need to call the NotifyPropertyChanged("AreValuesChanged") method when you update the other two values to make this work:

public string observationStr // repeat for stateStr
{
    get { return _observationStr; }
    set { _observationStr = value; NotifyPropertyChanged(observationStr); 
        NotifyPropertyChanged(AreValuesChanged); }
}

For the colour change, you could add a simple DataTrigger into a Style - make sure that this is declared within scope of the ListView control:

<Style TargetType="{x:Type ListViewItem}">
    <Style.Triggers>
        <DataTrigger Binding="{Binding AreValuesChanged}" Value="True">
            <Setter Property="Background" Value="Red" />
        </DataTrigger>
    </Style.Triggers>
</Style>

Upvotes: 3

Related Questions