Articles in this section
Category / Section

How to apply alternate column style in WPF DataGrid (SfDataGrid) based on enum value?

2 mins read

WPF DataGrid (SfDataGrid) does not provide the support to apply alternate column style based on Enum value. You can apply alternative column style based on the Enum value can be used by customizing the converter to the GridCell background property in SfDataGrid.

<Window.Resources>   
       <local:DataGridCellContentToColorConverter x:Key="DataGridCellToColor"/>    
       
        <Style x:Key="cellStyle" TargetType="syncfusion:GridCell">
            <Style.Triggers>
                <DataTrigger Binding="{Binding Path=IsChecked, ElementName=StyleCheckBox,Mode=TwoWay}" Value="True">
                    <Setter Property="Background" >
                       <Setter.Value>
                         <MultiBinding Converter="{StaticResource DataGridCellToColor}">
                           <MultiBinding.Bindings>
                             <Binding RelativeSource="{RelativeSource Mode=Self}"/>
                             <Binding Path ="ColumnBase.ColumnIndex"  RelativeSource="{RelativeSource Self}"/>
                             <Binding Path ="ColumnBase.RowIndex"  RelativeSource="{RelativeSource Self}"/>
                             <Binding ElementName="syncgrid"/>
                           </MultiBinding.Bindings>
                         </MultiBinding>
                       </Setter.Value>
                   </Setter>
                </DataTrigger>
            </Style.Triggers>
        </Style>
</Window.Resources>

 

public class DataGridCellContentToColorConverter : IMultiValueConverter
{
        public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
        {
            //get the GridCell proeprty 
            var cell = values[0] as GridCell;
 
            //get the columnIndex value  
            var columnIndex = (int)values[1];
 
            //get the rowIndex value  
            var rowIndex = (int)values[2];
 
            //get the SfDataGrid 
            var dataGrid = values[3] as SfDataGrid;
 
            //Returns start column index of the VisibleColumn. 
            var startIndex = dataGrid.ResolveToStartColumnIndex();
            columnIndex = columnIndex - startIndex;
 
            // Get the resolved current record index  
            var recordIndex = dataGrid.ResolveToRecordIndex(rowIndex);
 
            object data = null;
            if (values[0] != null && values[1] != null)
            {
                //check if datagrid grouped or not 
                if (dataGrid.View.TopLevelGroup != null)
                {
                    // Get the current row record while grouping 
                    var record = dataGrid.View.TopLevelGroup.DisplayElements[recordIndex];
 
                    if (!record.IsRecords) //skips caption summary, group summary rows 
                        return DependencyProperty.UnsetValue;
 
                    var dataCell = (record as RecordEntry).Data;
 
                    data = (dataCell as DataRowView).Row.ItemArray[columnIndex];
                }
                else
                {
                    data = (cell.DataContext as DataRowView).Row.ItemArray[columnIndex];
                }
 
                //type case to get the comparison enum value                 
                var employeeComparison = (data as Employee).ComparisonState;
 
                if (employeeComparison == ComparisonStateEnum.DIFFERENT)
                {
                    return new SolidColorBrush(Colors.Red);
                }
                else if (employeeComparison == ComparisonStateEnum.EQUAL)
                {
                    return new SolidColorBrush(Colors.Blue);
                }
                else
                    return DependencyProperty.UnsetValue;
 
            }
            return DependencyProperty.UnsetValue;
 
        }
        public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
}

The following screenshot shows the applied alternate column style based on Enum value in SfDataGrid,

Shows the alternate column style applied in SfDataGrid

The following screenshot shows the alternate column style applied while grouping in SfDataGrid,

Shows the column style applied While grouping in SfDataGrid

Shows the Column style applied in SfDataGrid

Take a moment to peruse the WPF DataGrid - Conditional Styling documentation, where you can find about Styling with code examples.

Please refer this link to know about the essential features of WPF DataGrid.

View WPF DataGrid Alternate Column Style Demo in GitHub.

 

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