Articles in this section
Category / Section

How to change the row background based on property in record of WPF DataGrid (SfDataGrid)?

1 min read

The background of row can be changed dynamically based on any property value in record by writing style of TargetType as VirtualizingCellsControl in WPF DataGrid (SfDataGrid). In the style setter the background can be changed based on property value using converter.

In the below code snippet, VirtualizingCellsControl’s background is changed based on IsChecked property in data object using converter.

XAML

<Style x:Key="stylecolor" TargetType="Syncfusion:VirtualizingCellsControl">
      <Setter Property="Background" Value="{Binding Path=IsChecked, Converter={StaticResource CustomRowStyleConverter}, UpdateSourceTrigger=PropertyChanged}" />
</Style>

C#

public class CustomRowStyleConverter:IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        if((bool)value)
           return new SolidColorBrush(Colors.Green) { Opacity = 0.7 };
        return DependencyProperty.UnsetValue;
    }
 
    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

 

If you want to change the background based on two properties in underlying data object, then you can pass the data object to converter using MultiBinding.

In the below code snippet, the row background is change based on record in CustomRowStyleMultiValueConverter.

XAML

<Style x:Key="stylecolor" TargetType="Syncfusion:VirtualizingCellsControl">
     <Setter Property="Background">
            <Setter.Value>
                  <MultiBinding Converter="{StaticResource CustomRowStyleMultiValueConverter}">
                         <Binding Path="IsChecked" />
                         <Binding RelativeSource="{RelativeSource Self}" />
                  </MultiBinding>
            </Setter.Value>
     </Setter>
 </Style>

C#

public class CustomRowStyleMultiValueConverter : IMultiValueConverter
 {
    public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        var dataContext = (values[1] as VirtualizingCellsControl).DataContext;
        if ((bool)values[0] == null)
           return DependencyProperty.UnsetValue;
        if ((bool)values[0])
           return new SolidColorBrush(Colors.Green) { Opacity = 0.7 };
        return DependencyProperty.UnsetValue;
 
    }
    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Change the row background based on property in record of WPF DataGrid

View sample in GitHub.


Conclusion

I hope you enjoyed learning about how to the row background based on property in record of WPF SfDataGrid.

You can refer to our WPF DataGrid featuretour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our WPF DataGrid demo to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied