Click here to Skip to main content
12,999,628 members (74,742 online)
Click here to Skip to main content
Add your own
alternative version


41 bookmarked
Posted 13 Jan 2004

Graphical grid component

, 13 Jan 2004
Rate this:
Please Sign up or sign in to vote.
Easy manipulation of graphical grids

Sample Image - picture.png


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:

    This is the source code and the compiled GraphicGrid DLL.
    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".
    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 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

ShowGridThis is true or false if you want the grid to display in the controls workspace
Example: object.ShowGrid = True
GridColorWhat color you want the grid to be
Example: object.GridColor =
CellsHow many grids you want (row x col)
Example: object.Cells = new size(10, 10)

Special Methods


Definition: setCell(Cell As Point, newColor As Color)
Example: object.setCell(New Point(9, 15), Color.White)
Note: This sets any one cell to be filled in with a color

Definition: setCell(Cells As Point(), newColor As Color)
Example: object.setCell({New Point(9, 15), New Point(9,16)}, Color.White) <BR>Note: This sets a range of cells to be filled in with a color

Definition: setCell(Cell As Point, newBitmap As Bitmap)<BR>Example: object.setCell(New Point(9, 15), new bitmap("cell.png"))<BR>Note: This sets a cell to be filled with a bitmap

Definition: setCell(ByVal Cells As Point(), ByVal newBitmap As Bitmap)<BR>Example: object.setCell({New Point(9, 15), New Point(9,16)}, new bitmap("cell.png")) <BR>Note: This sets a range of cells to be filled in with a bitmap


Definition: removeCell(Cell as Point) <BR>Example: object.removeCell(New Point(9, 15)) <BR>Note: This removes a cell from the grid

Definition: removeCell(Cells As Point())<BR>Example: object.removeCell({New Point(9, 15), New Point(9,16)}) <BR>Note: This removes a range of cells from the grid

clearCellsDefinition: clearCells()<BR>Example: object.clearCells()<BR>Note: This removes all cells from the grid

Special Events

gridClickThis is fired when you click somewhere in the grid.
Returns: Object and GridPosition
gridDoubleClickThis is fired when you double click somewhere in the grid.
Returns: Object and GridPosition
gridMouseMoveThis is fired when you move the mouse somewhere in the grid.
Returns: Object and GridPosition
gridMouseUpThis is fired after you click somewhere in the grid.
Returns: Object, MouseEventArgs and GridPosition
gridMouseDownThis is fired after you click somewhere in the grid.
Returns: Object, MouseEventArgs and GridPosition

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

Sample image

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

          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)
                  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

      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 Its just a light show the cells turn on and off in random order and change color.

Sample Game

Sample game screenshot

"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


        ' Stop the game
    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
        newPoint = New Point(rnd.Next(0, 4), rnd.Next(0, 2))
    Loop While newPoint.Equals(Cell)

    ' Draw the cell
    Cell = newPoint
    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
        MsgBox("You stink!", MsgBoxStyle.Exclamation, "Bunnie Hunter")
    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.setCell(New Point(Cell.X, Cell.Y), _

        ' 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


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


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 :-)


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Matthew Hazlett
Web Developer
United States United States
I started programming for fun when I was about 10 on an Franklin Ace 1000.

I still do it just for fun but it has gotten me a few jobs over the years. More then I can say for my Microsoft Certifications. Smile | :)

The way I learned was by example, now its time to give back to the next generation of coders.

You may also be interested in...

Comments and Discussions

QuestionMove selection Pin
Member 1164419610-May-15 21:19
memberMember 1164419610-May-15 21:19 
QuestionDirectory structure in grid? Pin
tauferre25-Aug-11 2:43
membertauferre25-Aug-11 2:43 
GeneralGraphicGrid C# migration Pin
UFAnders13-Jul-08 18:32
memberUFAnders13-Jul-08 18:32 
GeneralA Very good Graphic Grid Pin
lukebrincat27-May-08 5:55
memberlukebrincat27-May-08 5:55 
GeneralVS2005 No add/rem item @ toolbox but Pin
ideve2-May-07 9:14
memberideve2-May-07 9:14 
GeneralCreating components Pin
NUMBER1PEEP10-Feb-07 5:29
memberNUMBER1PEEP10-Feb-07 5:29 
GeneralImage or Bitmap movement Pin
Member #368875521-Jan-07 21:59
memberMember #368875521-Jan-07 21:59 
GeneralHighlight Copy Past Pin
lysis_lysis31-Oct-06 19:23
memberlysis_lysis31-Oct-06 19:23 
Generalget the image name from a cell Pin
ntib30-Jun-06 5:06
memberntib30-Jun-06 5:06 
QuestionGet property from a single cell? Pin
Qvicksilver28-Jun-05 3:13
memberQvicksilver28-Jun-05 3:13 
AnswerRe: Get property from a single cell? Pin
lysis_lysis8-Dec-05 18:12
memberlysis_lysis8-Dec-05 18:12 
AnswerRe: Get property from a single cell? Pin
TimCarr27-Mar-07 5:52
memberTimCarr27-Mar-07 5:52 
GeneralAnyone used it in yet. Pin
jameswhitfield15-Apr-05 8:47
sussjameswhitfield15-Apr-05 8:47 
GeneralScroll Pin
Bharti Ramji25-Feb-05 4:55
memberBharti Ramji25-Feb-05 4:55 
GeneralRe: Scroll Pin
lysis_lysis29-Oct-05 18:00
memberlysis_lysis29-Oct-05 18:00 
GeneralEach individual cell Pin
etchan26-Dec-04 14:36
memberetchan26-Dec-04 14:36 
QuestionRe: Each individual cell Pin
jswoofer23-Oct-06 6:18
memberjswoofer23-Oct-06 6:18 
GeneralDrawing tools Pin
Swapnil Pithwa4-Oct-04 2:41
sussSwapnil Pithwa4-Oct-04 2:41 
GeneralDraw letters and graphs Pin
mauleTTT19-Sep-04 11:42
membermauleTTT19-Sep-04 11:42 
GeneralCompitable version of .NET Pin
Swapnil Pithwa20-Aug-04 5:25
sussSwapnil Pithwa20-Aug-04 5:25 
GeneralRe: Compitable version of .NET Pin
Matthew Hazlett20-Aug-04 6:21
memberMatthew Hazlett20-Aug-04 6:21 
GeneralRe: Compitable version of .NET Pin
KevJB20-Oct-04 21:10
memberKevJB20-Oct-04 21:10 
GeneralAdding a button to the Grid Pin
opticnurve14-May-04 8:25
memberopticnurve14-May-04 8:25 
GeneralRe: Adding a button to the Grid Pin
Matthew Hazlett14-May-04 8:30
memberMatthew Hazlett14-May-04 8:30 
GeneralRe: Adding a button to the Grid Pin
opticnurve14-May-04 9:13
memberopticnurve14-May-04 9:13 
GeneralRe: Adding a button to the Grid Pin
lysis_lysis1-Feb-10 11:12
memberlysis_lysis1-Feb-10 11:12 
GeneralcCell collection question Pin
foundryqa18-Apr-04 15:35
sussfoundryqa18-Apr-04 15:35 
GeneralRe: cCell collection question Pin
foundryqa24-Apr-04 16:57
memberfoundryqa24-Apr-04 16:57 
GeneralRe: cCell collection question Pin
Matthew Hazlett29-Apr-04 8:17
memberMatthew Hazlett29-Apr-04 8:17 
GeneralRe: cCell collection question Pin
foundryqa2-May-04 15:27
memberfoundryqa2-May-04 15:27 
GeneralSuper Component Pin
trisectdevelopment16-Mar-04 21:25
membertrisectdevelopment16-Mar-04 21:25 
GeneralRe: Super Component Pin
Matthew Hazlett17-Mar-04 17:11
memberMatthew Hazlett17-Mar-04 17:11 
GeneralVery usefull Pin
Najhal5-Feb-04 6:56
memberNajhal5-Feb-04 6:56 
GeneralI like it! Pin
Frank Hileman23-Jan-04 8:35
memberFrank Hileman23-Jan-04 8:35 
GeneralCool! Pin
Kocha21-Jan-04 3:54
memberKocha21-Jan-04 3:54 
GeneralNew sample game Pin
hazlema15-Jan-04 14:51
memberhazlema15-Jan-04 14:51 
GeneralTransparency Pin
hazlema15-Jan-04 6:56
memberhazlema15-Jan-04 6:56 
GeneralFiles Pin
hazlema14-Jan-04 15:56
memberhazlema14-Jan-04 15:56 
GeneralRe: Files Pin
hazlema15-Jan-04 6:36
memberhazlema15-Jan-04 6:36 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170624.1 | Last Updated 14 Jan 2004
Article Copyright 2004 by Matthew Hazlett
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid