• Status: Solved
• Priority: Medium
• Security: Public
• Views: 199

# Create a "Grid" inside Picture Box

Check out this immage, http://www.temecularodrun.com/temp/grid.jpg

I know how to do the code loops to create the output results, but how do you do the "grid"?  All those neat little black lines that contain the results.

In .asp this is a simple <tr><td> loop, how do you do it in VB?

If more points are necessary let me know.
0
mgfranz
• 2
• 2
1 Solution

Commented:
Here is a complete example, but 100 pts would be nice as it took some time to code.

Add a picturebox and a button to a form.  Make the picture box a fair size.

Option Explicit
Private mGrid(1 To 10, 1 To 10)
Private Sub Command1_Click()
Dim i As Integer
Dim j As Integer

For i = 1 To 10
For j = 1 To 10
mGrid(i, j) = i * j
Next j
Next i

Call sDrawGrid

End Sub

Public Sub sDrawGrid()

Dim sngStartX As Single, sngStartY As Single
Dim sngEndX As Single, sngEndY As Single
Dim i As Integer, j As Integer
Dim x As Single, y As Single, xx As Single, yy As Single
Dim sngW As Single, sngH As Single
Dim strCell As String
Dim lngColor As Long

With Picture1

sngStartX = 45
sngStartY = 45
sngEndX = .ScaleWidth - 45
sngEndY = .ScaleHeight - 45

'With keyword does not work with certain graphic methods, because of MS laziness.

For i = 1 To 10
If i Mod 2 = 0 Then   'alternate every second column
lngColor = vbWhite
Else
lngColor = RGB(255, 255, 192)  'light yello
End If

x = i / 10 * sngEndX 'right edge of coloured block
xx = (i - 1) / 10 * sngEndX 'left edge of coloured block
If xx = 0 Then xx = sngStartX  'correction to formula for first line
Picture1.Line (xx, sngStartY)-(x, sngEndY), lngColor, BF
Next i
For i = 1 To 10
x = i / 10 * sngEndX 'current position of line being drawn
Picture1.Line (x, sngStartY)-(x, sngEndY)
Next i

y = 1 / 10 * sngEndY
'Line at table head
Picture1.Line (sngStartX, y)-(sngEndX, y)
'Line at left edge
Picture1.Line (sngStartX, sngStartY)-(sngStartX, sngEndY)
'line at top
Picture1.Line (sngStartX, sngStartY)-(sngEndX, sngStartY)
'line at bottom
Picture1.Line (sngStartX, sngEndY)-(sngEndX, sngEndY)

'Tricky part, center numbers in boxes
For i = 1 To 10
For j = 1 To 10
strCell = Format(mGrid(i, j))
sngW = .TextWidth(strCell)
sngH = .TextHeight(strCell)
x = (CSng(i) * 2 - 1) / 20 * sngEndX - sngW / 2  'first part is simplification of formula ((i + (i-1))/2)/10 find center of cell
y = (CSng(j) * 2 - 1) / 20 * sngEndY - sngH / 2
.CurrentX = x
.CurrentY = y
Picture1.Print strCell
Next j
Next i

End With

End Sub
0

Author Commented:
OK, Cool.  Now what if I want to have each number in a box?  So that the results are in a full grid?

And your'e right, 100 point is more suiting...
0

Commented:
>Now what if I want to have each number in a box?  So that the results are in a full grid?<

I assume you mean draw grid lines for each cell?  Make the following changes to the DrawGrid subroutine

Public Sub sDrawGrid()

Dim sngStartX As Single, sngStartY As Single
Dim sngEndX As Single, sngEndY As Single
Dim i As Integer, j As Integer
Dim x As Single, y As Single, xx As Single, yy As Single
Dim sngW As Single, sngH As Single
Dim strCell As String
Dim lngColor As Long

With Picture1

sngStartX = 45
sngStartY = 45
sngEndX = .ScaleWidth - 45
sngEndY = .ScaleHeight - 45

'With keyword does not work with certain graphic methods, because of MS laziness.

For i = 1 To 10
If i Mod 2 = 0 Then   'alternate every second column
lngColor = vbWhite
Else
lngColor = RGB(255, 255, 192)  'light yello
End If

x = i / 10 * sngEndX 'right edge of coloured block
xx = (i - 1) / 10 * sngEndX 'left edge of coloured block
If xx = 0 Then xx = sngStartX  'correction to formula for first line
Picture1.Line (xx, sngStartY)-(x, sngEndY), lngColor, BF
Next i

For i = 1 To 10
x = i / 10 * sngEndX 'current position of line being drawn
Picture1.Line (x, sngStartY)-(x, sngEndY)
Next i
For i = 1 To 10
y = i / 10 * sngEndY 'current position of line being drawn
Picture1.Line (sngStartX, y)-(sngEndX, y)
Next i
'Commented out lines no longer needed since each line being drawn above
'   y = 1 / 10 * sngEndY
'   'Line at table head
'   Picture1.Line (sngStartX, y)-(sngEndX, y)
'Line at left edge
Picture1.Line (sngStartX, sngStartY)-(sngStartX, sngEndY)
'line at top
Picture1.Line (sngStartX, sngStartY)-(sngEndX, sngStartY)
'   'line at bottom
'   Picture1.Line (sngStartX, sngEndY)-(sngEndX, sngEndY)

'Tricky part, center numbers in boxes
For i = 1 To 10
For j = 1 To 10
strCell = Format(mGrid(i, j))
sngW = .TextWidth(strCell)
sngH = .TextHeight(strCell)
x = (CSng(i) * 2 - 1) / 20 * sngEndX - sngW / 2  'first part is simplification of formula ((i + (i-1))/2)/10 find center of cell
y = (CSng(j) * 2 - 1) / 20 * sngEndY - sngH / 2
.CurrentX = x
.CurrentY = y
Picture1.Print strCell
Next j
Next i

End With

End Sub

0

Author Commented:
Beautiful... thank you sir!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

## Featured Post

• 2
• 2
Tackle projects and never again get stuck behind a technical roadblock.