Setting DataGrid cell background based on its value (C#, WPF)

Question

(There are similar questions around this topic, but none really match the way I've gone about it.)

I would like to change the colour of each of my DataGrid's cells based on their value inside them (an integer, from 0 to 3). Currently, I am able to change a cell's colour by mousing over, using this:

        <DataGrid Name="mapDisplay" ItemsSource="{Binding}" Margin="0,59,10,0">
            <DataGrid.CellStyle>
                <Style TargetType="DataGridCell">
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" Value="Red" />
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </DataGrid.CellStyle>
        </DataGrid>

This code changes any moused over cell to 'Red'. But how could I change the colour according to its value?

Answer 1

Please refer Change DataGrid cell colour based on values this answer.

I tried the same way which described in the answer with following code and its works fine.

<Window.Resources>        
        <local:ColorConverter x:Key="NameToBrushConverter"/>
 </Window.Resources>

    <Grid>
        <DataGrid ItemsSource="{Binding SampleList}"  AutoGenerateColumns="False">
            <DataGrid.Columns>
                <!-- Inputs -->
                <DataGridTextColumn Width="SizeToCells" Header="Inputs" MinWidth="100" Binding="{Binding RowNum}" >                  

                    <DataGridTextColumn.ElementStyle>
                        <Style TargetType="{x:Type TextBlock}">
                            <Setter Property="Background" Value="{Binding RowNum, Converter={StaticResource NameToBrushConverter}}"/>
                        </Style>
                    </DataGridTextColumn.ElementStyle>

                </DataGridTextColumn>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>

Convertor Code:

public class ColorConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            var input = int.Parse(value.ToString());
            switch (input)
            {
                case 1:
                    return Brushes.LightGreen;
                case 2:
                    return Brushes.LightBlue;
                case 3:
                    return Brushes.Yellow;
                default:
                    return DependencyProperty.UnsetValue;
            }
        }

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

Hope this helps.

Answer 2

If your value-range is finite, you can do it in XAML using below apparoach. Below code assumes your property name is Status : int , and you want to change only the containing cell,and not entire row. Instead of DisplayIndex , you can Header property too to use Column name.

  <DataGrid x:Name="Dgrd">
        <DataGrid.CellStyle>
            <Style TargetType="DataGridCell">
                <Style.Triggers>
                    <MultiDataTrigger>
                        <MultiDataTrigger.Conditions>
                            <Condition Binding="{Binding Status}" Value="0"/>
                            <Condition Binding="{Binding Column.DisplayIndex,RelativeSource={RelativeSource Self}}" Value="1"/>
                        </MultiDataTrigger.Conditions>
                        <Setter Property="Background" Value="Blue"/>
                    </MultiDataTrigger>
                    <MultiDataTrigger>
                        <MultiDataTrigger.Conditions>
                            <Condition Binding="{Binding Status}" Value="1"/>
                            <Condition Binding="{Binding Column.DisplayIndex,RelativeSource={RelativeSource Self}}" Value="1"/>
                        </MultiDataTrigger.Conditions>
                        <Setter Property="Background" Value="Red"/>
                    </MultiDataTrigger>
                    <MultiDataTrigger>
                        <MultiDataTrigger.Conditions>
                            <Condition Binding="{Binding Status}" Value="2"/>
                            <Condition Binding="{Binding Column.DisplayIndex,RelativeSource={RelativeSource Self}}" Value="1"/>
                        </MultiDataTrigger.Conditions>
                        <Setter Property="Background" Value="Yellow"/>
                    </MultiDataTrigger>
                    <MultiDataTrigger>
                        <MultiDataTrigger.Conditions>
                            <Condition Binding="{Binding Status}" Value="3"/>
                            <Condition Binding="{Binding Column.DisplayIndex,RelativeSource={RelativeSource Self}}" Value="1"/>
                        </MultiDataTrigger.Conditions>
                        <Setter Property="Background" Value="Olive"/>
                    </MultiDataTrigger>
                </Style.Triggers>
            </Style>
        </DataGrid.CellStyle>
    </DataGrid>

You can also use a Converter .