How to set DataGrid's row Background, based on a property value using data bindings
Use a DataTrigger
:
<DataGrid ItemsSource="{Binding YourItemsSource}"> <DataGrid.RowStyle> <Style TargetType="DataGridRow"> <Style.Triggers> <DataTrigger Binding="{Binding State}" Value="State1"> <Setter Property="Background" Value="Red"></Setter> </DataTrigger> <DataTrigger Binding="{Binding State}" Value="State2"> <Setter Property="Background" Value="Green"></Setter> </DataTrigger> </Style.Triggers> </Style> </DataGrid.RowStyle></DataGrid>
The same can be done without DataTrigger
too:
<DataGrid.RowStyle> <Style TargetType="DataGridRow"> <Setter Property="Background" > <Setter.Value> <Binding Path="State" Converter="{StaticResource BooleanToBrushConverter}"> <Binding.ConverterParameter> <x:Array Type="SolidColorBrush"> <SolidColorBrush Color="{StaticResource RedColor}"/> <SolidColorBrush Color="{StaticResource TransparentColor}"/> </x:Array> </Binding.ConverterParameter> </Binding> </Setter.Value> </Setter> </Style> </DataGrid.RowStyle>
Where BooleanToBrushConverter
is the following class:
public class BooleanToBrushConverter : IValueConverter{ public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { if (value == null) return Brushes.Transparent; Brush[] brushes = parameter as Brush[]; if (brushes == null) return Brushes.Transparent; bool isTrue; bool.TryParse(value.ToString(), out isTrue); if (isTrue) { var brush = (SolidColorBrush)brushes[0]; return brush ?? Brushes.Transparent; } else { var brush = (SolidColorBrush)brushes[1]; return brush ?? Brushes.Transparent; } } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { throw new NotImplementedException(); }}
In XAML, add and define a RowStyle Property for the DataGrid with a goal to set the Background of the Row, to the Color defined in my Employee Object.
<DataGrid AutoGenerateColumns="False" ItemsSource="EmployeeList"> <DataGrid.RowStyle> <Style TargetType="DataGridRow"> <Setter Property="Background" Value="{Binding ColorSet}"/> </Style> </DataGrid.RowStyle>
And in my Employee Class
public class Employee { public int Id { get; set; } public string Name { get; set; } public int Age { get; set; } public string ColorSet { get; set; } public Employee() { } public Employee(int id, string name, int age) { Id = id; Name = name; Age = age; if (Age > 50) { ColorSet = "Green"; } else if (Age > 100) { ColorSet = "Red"; } else { ColorSet = "White"; } }}
This way every Row of the DataGrid has the BackGround Color of the ColorSet
Property of my Object.