DataGridView, add unique gradient to each Row

Question

2.00/5 (1 vote)

See more:

I like to add a gradient brush to each row of my datagridview. I like to change the gradient colors for each row independently depending of some cell values in the row.

I know how to add a solid background color to each, cell, row, column etc. but I do not know how to add a gradient brush to each row individualy.

I need to fill the datagridview with values, the datagridview is disconnected from any database or other data source. After filling the datagridview, I want to step trough each row, find my key values, decide the gradient colors and then add the gradient to the row.

I like to do something similar to what I now do with a background color:

VB

For Each R As DataGridViewRow In DGV.Rows
    Dim CS As New DataGridViewCellStyle
    Select Case i
         Case 1 : CS.BackColor = Color.Yellow
         Case 2 : CS.BackColor = Color.Blue
    End Select
    R.DefaultCellStyle = CS
Next

Is this possible? And How do you do this?
I am using VB.NET and VS 2008 and 2010

Peter Schwennesen

[Modified: changed code tag to pre]

Posted 22-Apr-10 6:26am

PeterSchwennesen

Updated 22-Apr-10 6:29am

William Winner

v2

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

William Winner · Answer 1 · 2010-04-22T06:34:00

You probably want to override the RowPrePaint event. There is sample code at DataGridView..::.RowPrePaint Event[^] on how to paint a gradient row background if the row is selected. You would just need to modify it to your needs.

[Update]
Man, it took me forever to actually figure out how to implement that. All I had to do was set the RowTemplate's DefaultCellStyle's BackColor to Transparent to make it work, but it took me a while to figure that out.

Anyway, I'm not sure what you mean by it's not painting correctly. Whenever you resize the DataGridView, it repaints. I verified this by simply having the form resize the DGV if I resized the form, and I had the RowPrePaint print "RowPrePaint" to the debugger window.

I do see some problems with your code, though. Primarily that when you create a New Rectangle, you want to pass in the top, left location, and the height and width. You instead pass in the top, left and bottom, right. With your code, it was painting below the rows available.

Change it to:

VB

Dim P1 As New System.Drawing.Point(New System.Drawing.Point(Left, Top))
Dim P2 As New System.Drawing.Point(New System.Drawing.Point(Right - Left, Bottom - Top))

The other problem I see is that e.RowBounds.Right extends beyond the columns if the DGV is wider than the columns are. You can fix that using the GetColumnDisplayRectangle. Change to:

VB

Dim Top As Integer = e.RowBounds.Top
Dim Bottom As Integer = e.RowBounds.Bottom
Dim lastColumnRect As Rectangle = _
        DataGridView1.GetColumnDisplayRectangle(DataGridView1.ColumnCount - 1, False)
Dim Right As Integer = lastColumnPt.X + lastColumnPt.Width
Dim Left As Integer = e.RowBounds.Left

With those changes, it will only draw within the actual row bounds.

It's also interesting to note that when you move any of the scrollbars, it also repaints. So you could go iteratively through the columns using the GetColumnDisplayRectangle and set the last input to true to only get the columns that are actually in the display and you could set the rectangle to that.

PeterSchwennesen · Answer 2 · 2010-04-22T07:10:00

Thanks for the answer. I have mannaged to produce the following that seems to do the work:

Sub DGV_RowPrePaint(ByVal sender As Object, ByVal e As DataGridViewRowPrePaintEventArgs) Handles DGV.RowPrePaint<br />
<br />
        Dim Top As Integer = e.RowBounds.Top<br />
        Dim Bottom As Integer = e.RowBounds.Bottom<br />
        Dim Right As Integer = e.RowBounds.Right<br />
        Dim Left As Integer = e.RowBounds.Left<br />
<br />
        Dim P1 As New System.Drawing.Point(New System.Drawing.Point(Left, Top))<br />
        Dim P2 As New System.Drawing.Point(New System.Drawing.Point(Right, Bottom))<br />
        Dim C1 As System.Drawing.Color = Color.Azure<br />
        Dim C2 As System.Drawing.Color = Color.Chocolate<br />
<br />
        Dim RegType As Integer = DGV.Rows(e.RowIndex).Cells("RegType").Value<br />
<br />
        Select Case RegType<br />
            Case 0<br />
                C1 = Color.Blue<br />
                C2 = Color.LightSeaGreen<br />
            Case 1<br />
                C1 = Color.LightSalmon<br />
                C2 = Color.Indigo<br />
            Case 2<br />
                C1 = Color.LightSkyBlue<br />
                C2 = Color.Khaki<br />
            Case 3<br />
                C1 = Color.LightYellow<br />
                C2 = Color.Lavender<br />
        End Select<br />
<br />
        Dim RA As New Rectangle(P1, P2)<br />
        Dim BB As New System.Drawing.Drawing2D.LinearGradientBrush(RA, C1, C2, System.Drawing.Drawing2D.LinearGradientMode.Horizontal)<br />
        Try<br />
            e.Graphics.FillRectangle(BB, RA)<br />
        Finally<br />
            BB.Dispose()<br />
        End Try<br />
<br />
    End Sub<br />

But. the painting is not properly done, the gradient is not over the hole width of the datagridview, when resizing the form.
Are there some way to have the form repaintet (and the datagridview) ??

Peter Schwennesen

DataGridView, add unique gradient to each Row

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0