by Bob Keeney

Many years ago, Erick Tejkowski posted a tutorial on alternating row colors to get the same style as an iTunes type listbox. The solution is simple, but yet many people still ask how to do it. We’ll step through the process on how to do this with REALbasic 2007.

Create the Class

Code reusability is a good thing. We’ll subclass the standard REALbasic listbox. Add a new class to your project and name it “ARListBox”. In the properties list set its super to “ListBox” so it can inherit all of the listbox events and properties.

Edit the ARListbox code and add a property called “bAlternateRows as Boolean” and set it’s scope to Public. Find the CellBackgroundPaint event and add this code:

Function CellBackgroundPaint(g As Graphics, row As Integer, column As Integer) As Boolean
If bAlternateRows And row Mod 2 = 0 Then
   g.ForeColor = RGB(237, 243, 254)
   g.FillRect(0, 0, g.Width, g.Height)
End If
End Function

The function is pretty straightforward but we’ll go through it line by line. The event is called by by REALbasic when it needs to draw the ListBox (as in a refresh event), you don’t have to do anything to get this to work. RB passes in the graphics object as well as the row and column of the cell in question.

If bAlternateRows is set to TRUE we take the row variable and use the MOD function to determine if the row is even or not. The MOD function is the same as saying, take the row, divide it by 2 and give me the remainder. If the remainder is zero, then do the painting.

When we want to make the row the alternate color we set the foreground of the graphics object to our alternate color. In this case, we’re using a hard coded color and you could easily substitute your own. Then we call the FillRect method of the graphics object and fill the entire graphics object starting at top, left (i.e. 0, 0) and filling the entire width and height of the graphics object.

An Aside on the Event Handling

Technically, we should return a True from this function if we’ve handled the DrawCellBackgroundPaint event so RB doesn’t try to do it twice. But since we haven’t created a new DrawCellBackgroundPaint event this isn’t an issue and RB doesn’t really care. If you ever want to override this functionality in the future, you would define a new event named exactly the same as the DrawCellBackgroundPaint (you could name it anything, but it helps using the same function name) with the same parameters and return value. To allow your instantiated class to override the behavior you then add this:

Function CellBackgroundPaint(g As Graphics, row As Integer, column As Integer) As Boolean
//Call our event and see if the user has handled it
If CellBackgroundPaint(g, row, column) Then Return True 
 
//If we haven’t handled it, this is the default behavior
If bAlternateRows And row Mod 2 = 0 Then
   g.ForeColor = RGB(237, 243, 254)
   g.FillRect(0, 0, g.Width, g.Height)
End If 
 
Return True
End Function

Edit Property List Behavior

Now that we’ve defined our class go back to the project tab and right click on the ARListBox class. Select Property List Behavior from the options. Once the dialog opens, scroll down the properties list and check the bAlternateRows checkbox and then click the OK button.

Once we’ve checked this option, our bAlternateRows variable may be set through the IDE instead of having to set it via code. This is simply a shortcut and could easily have been done via code in the open event or done using Computed Properties. One could argue that Computed Properties may be the best way to do this if you decide to change the color or toggle the bAlternateRows value at runtime. In our simple example this isn’t an issue.

Add the Control To a Window

Now go to Window1 that was created for you when you created a new project. Choose “Project Controls” from the tools pallet and drag a new instance of ARListbox on to your window. Resize and change properties as necessary. In the Properties List you’ll see the bAlternatveRows property under the ‘behavior’ heading. Make sure it’s checked.

Go into the code editor and find the Open event of ARListbox1 (the default name of our new ARListbox object. In the open event use this code:

Sub Open()
Dim i As Integer
For i = 1 To 15
   Me.AddRow "Row " + Str(i)
   Me.Cell(i - 1, 1) = "Cell (" + str(i) + ", 1)"
   Me.Cell(i - 1, 2) = "Cell (" + str(i) + ", 2)"
Next
End Sub

This code simply gives us some sample data for our listbox to use. You can play around with the number of rows and the text in the cells, but the important point is that each even row in the listbox is colored!

Conclusion

With this sample project we’ve created a very simple and elegant variation of the standard listbox. It demonstrates how to subclass a control and some of the basics of events. Enjoy!

(No Ratings Yet)

 Loading ...