Graphical grid component

• Download DLL source files - 14.6 Kb
• Sample program - 12.3 Kb
• Sample source files - 5.8 Kb
• Sample game - 28.9 Kb
• Sample game source - 146 Kb

Introduction

GraphicGrid is a control for your .NET applications that makes graphical grid manipulation easier. GraphicalGrids can be used for a wide range of tasks including graphing applications and games just to name a few.

GraphicGrid divides up its workspace and allows you to control what you want to place in the individual cells of your grid. You can populate some or all of them with pictures, colors or even graphical text while leaving others blank. GraphicGrid also allows you to load an image on to the background of its workspace so you can create really interesting and eye catching effects.

This Distribution

I have included five files for you to download:

• GraphicGrid_DLL.zip
  This is the source code and the compiled GraphicGrid DLL.
  
• GraphicGrid_Game.zip
  GraphicGrid_GameSrc.zip
  A very simple game where you wack (click on) the rabbits that appear on the screen. Very similar to the caravel game "Wack a Mole".
  
• GraphicGrid_Sample.zip
  GraphicGrid_SampleSrc.zip
  A sample to demonstrate how to use graphicGrid.

Getting GraphicGrid into your toolbox

I have not made an installed or a cool icon for the control yet so this is what you have to do.

1. Extract GraphicGrid_DLL.zip to a directory under Visual Studio Projects.
2. Create a new project and go to design view.
3. Look over at your toolbox and right click on the name of the tab where you want to put GraphicGrid and select "Add/Remove Items..."
4. Click on the browse button and select GraphicGrid.DLL from the directory where you extracted it.
5. Click "OK" and you will now have the GraphicGrid tool in your toolbox.

Special Properties

Special Methods

Special Events

GridPosition is always expressed as a Point. Lets say your grid was 10x10 and the user clicks in the 5th cell of the 5th row. In any of these special events the value of gridPosition would be point(5, 5).

Detailed comments can also be found in the DLL source files.

Sample Application

We start by draging the panel control and the GraphicGrid control on to the form and setting them to dock. Add a few buttons in the panel and here's what we have them do.

    Private Sub allButtons(ByVal sender As System.Object, _
              ByVal e As System.EventArgs) _
              Handles Button1.Click, Button2.Click, Button3.Click, _
              Button4.Click, Button5.Click, Button6.Click


        ' This is just a big array of points

        ' (Used in create onscreen cells)

        '

        Dim points() As Point = { _
  New Point(0, 0), New Point(0, 1), New Point(0, 2), New Point(0, 3), _
  New Point(1, 0), New Point(2, 1), New Point(3, 0), _
  New Point(4, 0), New Point(4, 1), New Point(4, 2), New Point(4, 3)}

        Select Case sender.name

            Case "Button1"

                ' Create On Screen Cells

                '

                Graphicgrid1.setCell(points, Color.Red)

                ' Off screen (Use Resize button to see them)

                '

                Graphicgrid1.setCell(New Point(9, 15), Color.White)
                Graphicgrid1.setCell(New Point(10, 15), Color.Green)
                Graphicgrid1.setCell(New Point(11, 15), Color.Yellow)
                Graphicgrid1.setCell(New Point(12, 15), Color.Gold)

            Case "Button2"
                
                ' Toggle the grid

                '

                Graphicgrid1.ShowGrid = Not Graphicgrid1.ShowGrid

            Case "Button3"
                
                ' Toggle Big or small size

                '

                If Graphicgrid1.Cells.Equals(New Size(20, 20)) Then
                    Graphicgrid1.Cells = New Size(10, 10)
                Else
                    Graphicgrid1.Cells = New Size(20, 20)
                End If

            Case "Button4"
                
                ' Remove a cell

                ' 

                Graphicgrid1.removeCell(New Point(2, 1))

            Case "Button5"
                
                ' Clear all the cells

                '

                Graphicgrid1.clearCells()

        End Select
    End Sub

That's it, nothing more to do. This is a simple, simple, simple application. I added another button "Button6" its in the code for GraphicGrid_Sample.zip. Its just a light show the cells turn on and off in random order and change color.

Sample Game

"Wack a Mole" (click the bunny), but watch out he goes faster as time goes on! This is a really simple game I made just to demonstrate the control. The code is very simple.

    ' A few bars to keep track of things durring the game

    '

    Public Cell As Point       ' Last location where we put the cell

    Public Gothim = False      ' Did we click of the bunny?



    ' This is the start and stop button on the form

    '

    Private Sub startStop_Click(ByVal sender As System.Object, _
        ByVal e As System.EventArgs) Handles startStop.Click


        ' Start a nice slow game

        '

        Timer.Interval = 2000

        If Not Timer.Enabled Then


            ' Reset and start the game

            '

            BunniesMissed.Text = -1
            BunniesHit.Text = 0
            Timer.Start()


        Else


            ' Stop the game

            '

            Timer.Stop()
        End If
    End Sub




    ' Find a new cell for the bunny and put him in it.

    '

    Private Sub redraw()
        Dim rnd As New Random
        Dim newPoint As Point


        ' Reset inGame vars

        '

        Gothim = False


        ' Generate a new point but make sure it's not the same as the old

        ' point

        '

        Do
            newPoint = New Point(rnd.Next(0, 4), rnd.Next(0, 2))
        Loop While newPoint.Equals(Cell)


        ' Draw the cell

        '

        Cell = newPoint
        Graphicgrid1.clearCells()
        Graphicgrid1.setCell(New Point(Cell.X, Cell.Y), Images.Images(0))
    End Sub




    ' The timer went off, did we get the bunny?

    '

    Private Sub Timer_Tick(ByVal sender As Object, _
         ByVal e As System.EventArgs) Handles Timer.Tick



        If Not Gothim Then BunniesMissed.Text += 1


        If BunniesMissed.Text = 10 Then
            Timer.Stop()
            MsgBox("You stink!", MsgBoxStyle.Exclamation, "Bunnie Hunter")
        Else
            redraw()
        End If
    End Sub

    ' This is where the magic happens.  

    ' They clicked the grid and fired off this event.

    ' 

    Private Sub Graphicgrid1_gridClick( _
        ByVal sender As Object, ByVal GridPoint As _
        System.Drawing.Point) Handles Graphicgrid1.gridClick

        ' Where they clicked, is this where the bunny is?

        '

        If GridPoint.Equals(Cell) Then    ' Yup


            ' Change the bitmap to splater bunny

            '

            Graphicgrid1.removeCell(Cell)
            Graphicgrid1.setCell(New Point(Cell.X, Cell.Y), _
                    Images.Images(1))

            ' Game stuff

            '

            Gothim = True
            BunniesHit.Text += 1
            Timer.Interval -= 25

        Else       ' Humm, the clicked but no bunny here


            ' Clicked on the wrong cell

            '

            BunniesMissed.Text += 1

        End If
    End Sub

Todo

1. Add an edit feature to the GraphicGrid (when you mouseover the grid it hilights the cell).
2. Enhance the Drag and Drop features

Summery

I hope you enjoy using this control. If you have any ideas or anything you would do to make it better please let me know. Also if you have created anything using this control I would appreciate a mention in the credits :-)