Presenting Colorful Gradient Background for WinForms DataGrid | Syncfusion Blogs
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (178).NET Core  (29).NET MAUI  (214)Angular  (110)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (41)Black Friday Deal  (1)Blazor  (223)BoldSign  (15)DocIO  (24)Essential JS 2  (109)Essential Studio  (200)File Formats  (68)Flutter  (133)JavaScript  (225)Microsoft  (120)PDF  (81)Python  (1)React  (105)Streamlit  (1)Succinctly series  (131)Syncfusion  (936)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (52)Windows Forms  (61)WinUI  (71)WPF  (162)Xamarin  (161)XlsIO  (38)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (9)Business intelligence  (55)Button  (4)C#  (156)Chart  (138)Chart of the week  (53)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (67)Development  (650)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (6)Essential Tools  (14)Excel  (43)Extensions  (22)File Manager  (7)Gantt  (19)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (512)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (43)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (54)Security  (4)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (12)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (393)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (607)What's new  (333)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Gradient background support in winforms datagrid

Presenting Colorful Gradient Background for WinForms DataGrid

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"));

Gradient background to the column cells

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"));

Gradient Background to the column header

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"));

Pattern style to the column header


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 forumDirect-Trac, or feedback portal. We are always happy to assist you!


Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed
Syncfusion Ad