Category / Section
How to change border of the stacked header and its record in WPF DataGrid (SfDataGrid)?
3 mins read
You can change the border around each stacked header column by writing style for GridStackedHeaderCellControl in WPF DataGrid (SfDataGrid). For applying the same border thickness over the complete grid, write style for GridHeaderCellControl and GridCell.
Refer to the example code example to write style for GridStackedHeaderCellControl.
public class StackedHeaderConverter : IValueConverter
{
int previousChildColumnIndex = -1;
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var stackedColumn = value as StackedColumn;
var dataGrid = Application.Current.MainWindow.FindName("sfdatagrid") as SfDataGrid;
string[] childcolumns = stackedColumn.ChildColumns.Split(',');
string firstChildColumn = childcolumns.FirstOrDefault();
var column = dataGrid.Columns[firstChildColumn];
var colindex = dataGrid.Columns.IndexOf(column);
//If style is applied for previous stackedheader cell, no need to apply left border for currentcell.
if (colindex != 0 && previousChildColumnIndex == colindex - 1)
return new Thickness(0, 0, 3, 1);
var previousLastColumn = childcolumns.LastOrDefault();
previousChildColumnIndex = dataGrid.Columns.IndexOf(dataGrid.Columns[previousLastColumn]);
return new Thickness(3, 0, 3, 1);
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
Refer to the following code example to write style for GridHeaderCellControl.
public class HeaderConverter : IValueConverter
{
//To find whether style is applied for previous HeaderCell.
bool isStyleApplied = false;
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var gridColumn = value as GridColumn;
var dataGrid = Application.Current.MainWindow.FindName("sfdatagrid") as SfDataGrid;
if (gridColumn == dataGrid.Columns.FirstOrDefault())
isStyleApplied = false;
foreach (var row in dataGrid.StackedHeaderRows)
{
var stackedColumns = row.StackedColumns;
foreach (var column in stackedColumns)
{
string[] childcolumns = column.ChildColumns.Split(',');
//If there is only one child column, need to apply border for both left and right unless right border for previous cell is not applied.
if (gridColumn != null && childcolumns.Count() == 1 && gridColumn.MappingName == childcolumns.FirstOrDefault() && !isStyleApplied)
{
isStyleApplied = true;
return new Thickness(3, 0, 3, 1);
}
else if (gridColumn != null && gridColumn.MappingName == childcolumns.LastOrDefault())
{
isStyleApplied = true;
return new Thickness(0, 0, 3, 1);
}
//if the cell if first child column, need to check right border of previous cell's right border.
else if (gridColumn != null && gridColumn.MappingName == childcolumns.FirstOrDefault() && !isStyleApplied)
{
isStyleApplied = true;
return new Thickness(3, 0, 1, 1);
}
}
}
isStyleApplied = false;
return new Thickness(0, 0, 1, 1);
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
Refer to the following code example to apply style for GridCell.
public class CustomStyleSelector : StyleSelector
{
//To find whether style is applied for previous GridCell.
bool isStyleApplied = false;
public override Style SelectStyle(object item, DependencyObject container)
{
var data = item as Model;
if (data == null)
return base.SelectStyle(item, container);
var gridCell = container as GridCell;
var gridColumn = gridCell.ColumnBase.GridColumn;
var dataGrid = Application.Current.MainWindow.FindName("sfdatagrid") as SfDataGrid;
//Need to set isStyleApplied false for the new row
if (gridColumn == dataGrid.Columns.FirstOrDefault())
isStyleApplied = false;
foreach (var row in dataGrid.StackedHeaderRows)
{
var stackedColumns = row.StackedColumns;
foreach (var column in stackedColumns)
{
string[] childcolumns = column.ChildColumns.Split(',');
//If there is only one child column, need to apply border for both left and right unless right border for previous cell is not applied.
if (data != null && childcolumns.Count() == 1 && gridColumn.MappingName == childcolumns.FirstOrDefault() && !isStyleApplied)
{
isStyleApplied = true;
return Application.Current.Resources["gridCellStyle3"] as Style;
}
else if (data != null && gridColumn.MappingName == childcolumns.LastOrDefault())
{
isStyleApplied = true;
return Application.Current.Resources["gridCellStyle2"] as Style;
}
//if the cell if first child column, need to check right border of previous cell's right border.
else if (data != null && gridColumn.MappingName == childcolumns.FirstOrDefault() && !isStyleApplied)
{
isStyleApplied = true;
return Application.Current.Resources["gridCellStyle1"] as Style;
}
}
}
isStyleApplied = false;
return base.SelectStyle(item, container);
}
}
XAML:
<Window.Resources>
<local:StackedHeaderConverter x:Key="stackedHeaderConverter"/>
<local:HeaderConverter x:Key="headerConverter"/>
<local:CustomStyleSelector x:Key="cellStyleSelector"/>
<Style TargetType="Syncfusion:GridStackedHeaderCellControl">
<Setter Property="BorderThickness" Value="{Binding Converter={StaticResource stackedHeaderConverter}}"/>
</Style>
<Style TargetType="Syncfusion:GridHeaderCellControl">
<Setter Property="BorderThickness" Value="{Binding Converter={StaticResource headerConverter}}"/>
</Style>
</Window.Resources>
<Syncfusion:SfDataGrid Name="sfdatagrid"
AllowEditing="True" AllowFiltering="True"
CellStyleSelector="{StaticResource cellStyleSelector}"
ItemsSource="{Binding EmployeeDetails}"/>
View WPF DataGrid Stacked Headers Demo in GitHub
