We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Platform: WPF |
Control: SfDataGrid |
Published Date: April 14, 2016 |
Last Revised Date: March 29, 2021 |
.NET Framework: 4.5 |
Product Version: 13.4.0.53

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.

2X faster development

The ultimate WPF UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile