CODEWITHSUNDEEP
c#wpfxaml
Omar Heaba
Omar Heaba

Reputation: 193

How can I change the background color of a cell by a condition?

How can I change the background color of a cell by a condition by a numeric value?

For example, when the price is greater than 10, the background is colored red.

I did this but the value remains constant, I want this to apply to all values that are greater than 100, for example.

  <DataGridTextColumn Binding="{Binding Price}"
        Header="Price">
        <DataGridTextColumn.ElementStyle>
            <Style TargetType="{x:Type TextBlock}">
                <Style.Triggers>
                    <Trigger Property="Text" Value="100">
                        <Setter Property="Foreground" Value="Red"/>
                        <Setter Property="FontWeight" Value="Bold"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </DataGridTextColumn.ElementStyle>
    </DataGridTextColumn>

Upvotes: 0

Views: 953

Answers (1)

Corentin Pane
Corentin Pane

Reputation: 4943

You can use an IValueConverter to convert prices into colors and define a DataGridTextColumn.CellStyle to use this converter.

Define this somewhere in your code:

public class PriceToBackgroundColorConverter : IValueConverter {
    // Converts a value into a color.
    // Returns Red if value is greater than 100, else White.
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture) {
        int price = (int)value;
        if (price > 100) {
            return Brushes.Red;
        } else {
            return Brushes.White;
        }
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) {
        throw new NotImplementedException();
    }
}

Now you can use this converter by adding it to the Resources of your DataGrid (or of any parent control) and using a Setter to style all DataGridCell objects.

    <DataGrid ItemsSource="{Binding Items}">
        <DataGrid.Resources>
            <wpfapp1:PriceToBackgroundColorConverter x:Key="PriceToBackgroundColorConverter"></wpfapp1:PriceToBackgroundColorConverter>
        </DataGrid.Resources>
        <DataGrid.Columns>
            <DataGridTextColumn Binding="{Binding Price}" Header="Price">
                <DataGridTextColumn.CellStyle>
                    <Style TargetType="DataGridCell">
                        <Setter Property="Background" Value="{Binding Path=Price, Converter={StaticResource PriceToBackgroundColorConverter}}"></Setter>
                    </Style>
                </DataGridTextColumn.CellStyle>
            </DataGridTextColumn>
        </DataGrid.Columns>
    </DataGrid>

This will instruct your DataGridTextColumn to apply a Style to all its DataGridCell children, and this Style binds the Background property of each DataGridCell to its Price property through the PriceToBackgroundColorConverter.

You can change the converter code to perform any kind of logic you want, have several colors for different ranges etc.

You can also define more converters and more Setter to change additional properties.

Upvotes: 1

Related Questions