Now that we've seen several ways to use GDI+, let's continue converting the program that was built using the Upgrade Wizard in the previous article. There are still graphics in the program that don't use GDI+. If you need to download that program, Click Here. In this article, we explore several new GDI+ additions to the Tic Tac Toe program, but because the program retains the overall architecture of the original VB 6 program, the end product still leaves a lot to be desired. I'll point out the problems and then in the next (and last!) article in this series, I'll show you a Tic Tac Toe program written from the ground up using VB.NET and GDI+. The differences will explain a lot.
We learned in the previous article that the Upgrade Wizard doesn't provide a way to draw the diagonal lines on the Tic Tac Toe playing grid. These had to be programmed with GDI+ before the program would run at all. This GDI+ code was added to solve the problem of drawing "win" lines, including the diagonal ones:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
' Set up Win Line graphics
Dim g As Graphics
' Sets g to a Graphics object representing
' the drawing surface of the form
g = Me.CreateGraphics
Dim myPen As New Pen(Color.Red)
myPen.Width = 5
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Actually drawing the lines involved specifying where the line started and where it ended. This was all done with a big Select Case block:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Select Case iWin
Case 0
g.DrawLine(myPen, _
XPoint.RightSide, YPoint.FirstRow, _
XPoint.LeftSide, YPoint.FirstRow)
Case 1
g.DrawLine(myPen, _
XPoint.RightSide, YPoint.SecondRow, _
XPoint.LeftSide, YPoint.SecondRow)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
... and so forth for all eight possible win lines.
But this was the only GDI+ code added since the rest of the program worked and the goal back then was to see what the minimum coding would have to be to upgrade the program.
This left the X and O markers as Label components rather than GDI+ graphics. Let's see what it takes to convert the X and O markers as well.
Actually drawing the markers is pretty much the same thing as drawing the lines. "Simply" figure out where they go and code a "DrawLine" call using the same graphics object. But the word, "simply" might not be quite accurate.
The first problem is that the "Tag" property of the Label components was a key part of the logic that the program used to figure out what went where. If the Tag property of a Label was "3", the program would know that the third square in the grid had been clicked. Since the new program doesn't have any Label components, we have to find a new way. The new way I used was to take advantage of the VB.NET MouseDown event for the form. One of the properties of that component is the X (horizontal) and Y (vertical) location of the mouse. Another Select Case block turns this into both an index value from 0 to 8 - used by the same logic as the original program - and a starting location for GDI+ to use to draw the actual X and O markers. In examining this code, remember that the GDI+ coordinate system starts at the upper left corner and positive values measure to the right and down. Click here for an illustration. (Remember to click the Back button on your browser to return.)
The code to do this looks like this:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Dim indexarray(,) As Short = _
New Short(2, 2) {{0, 3, 6}, {1, 4, 7}, {2, 5, 8}}
Select Case e.X
Case Is > 124
Case Is < 4
Case Is > 92
horiz = 94
xindex = 2
Case Is > 60
horiz = 62
xindex = 1
Case Is > 28
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
and so forth.
The values are passed back to the rest of the program. The variables horiz and vert are global but could have been passed as well.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
index = indexarray(xindex, yindex)
GamePlay(index)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Actually drawing the markers is done just the way previous GDI+ examples were using the horiz and vert variables just calculated.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
' Change the label to the appropriate symbol
g.DrawString(sPlaySign, _
New Font("Arial Bold", 14), _
Brushes.Firebrick, horiz, vert)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
And that's it! Oh ... except that the way control is handled internally was changed a lot so that the game can be ended or new games started. No MsgBox controls were used because they still erase the GDI+ markers and win lines. This happens because we're still using the framework of the original VB 6 program.
