Syncfusion has provided gradient background support for the WinForms DataGrid for all types of cells for the 2020 Volume 1 release so you can add colorful backgrounds to your DataGrid cells. Gradient colors use a gradual blending of one color to another color to give an eye-catching effect to a cell.
In this article, we are going to look into how to apply gradient backgrounds to cells in your WinForms DataGrid.
Applying a gradient background to a column
You can apply a gradient background to columns using the Column.CellStyle.Interior property. The property type is BrushInfo. It supports the functionalities that provide different custom options to apply gradient background color. You can fill the gradient background with the following different styles:
- Horizontal: Specifies a gradient from left to right.
- Vertical: Specifies a gradient from top to bottom.
- ForwardDiagonal: Specifies a gradient from upper left to lower right.
- BackwardDiagonal: Specifies a gradient from upper right to lower left.
- PathRectangle: Specifies a gradient in rectangle shape.
- PathEllipsis: Specifies a gradient in ellipsis shape.
In the following code example, gradient colors are filled in the horizontal direction.
this.sfDataGrid.Columns[6].CellStyle.Interior = new Syncfusion.WinForms.Core.BrushInfo(GradientStyle.Horizontal, ColorTranslator.FromHtml("#5aff8d"), ColorTranslator.FromHtml("#12cb74"));
this.sfDataGrid.Columns[7].CellStyle.Interior = new Syncfusion.WinForms.Core.BrushInfo(GradientStyle.Horizontal, ColorTranslator.FromHtml("#FFDF80"), ColorTranslator.FromHtml("#FFA925"));
this.sfDataGrid.Columns[8].CellStyle.Interior = new Syncfusion.WinForms.Core.BrushInfo(GradientStyle.Horizontal, ColorTranslator.FromHtml("#f77891"), ColorTranslator.FromHtml("#ff5862"));
Applying gradient background to the column header
You can apply gradient backgrounds to the column headers using the Column.HeaderStyle.Interior or Style.HeaderStyle.Interior properties. Please refer to the following code example.
this.sfDataGrid.Style.HeaderStyle.Interior = new Syncfusion.WinForms.Core.BrushInfo(GradientStyle.Horizontal, ColorTranslator.FromHtml("#f77891"), ColorTranslator.FromHtml("#ff5862"));
Applying gradient background for other cells
The Interior property is available in the styling API of all the cells. See the styling UG documentation to learn more about the APIs used to customize the appearance of the other cells.
Applying pattern style for cells
You can use the PatternStyle property to fill the background colors in the desired pattern formats. We have provided 50+ pattern styles to enhance the user experience.
Please refer to the following example, in which the SmallGrid PatternStyle is applied.
this.sfDataGrid.Style.HeaderStyle.Interior = new Syncfusion.WinForms.Core.BrushInfo(PatternStyle.SmallGrid, ColorTranslator.FromHtml("#5aff8d"), ColorTranslator.FromHtml("#12cb74"));
Conclusion
I hope you enjoyed this blog and got an idea about how to set gradient backgrounds and pattern styles to the cells of the WinForms DataGrid. These features are available in our 2020 Volume 1 release. You can refer to this UG documentation for more information. Also, you can try out these GitHub examples.
If you aren’t a customer yet, you can try our 30-day free trial to check out these features. Also, try our other samples from this GitHub location.
If you wish to send us feedback or would like to submit any questions, please feel free to contact us through our support forum, Direct-Trac, or feedback portal. We are always happy to assist you!
