Click here to Skip to main content
15,867,308 members
Articles / Programming Languages / Visual Basic
Article

Graphical grid component

Rate me:
Please Sign up or sign in to vote.
4.70/5 (21 votes)
13 Jan 20044 min read 171.9K   3.2K   41   40
Easy manipulation of graphical grids

Sample Image - picture.png

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

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 = color.red
CellsHow many grids you want (row x col)
Example: object.Cells = new size(10, 10)

Special Methods

setCell

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

removeCell

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.

VB.NET
  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

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.

VB.NET
' 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 :-)

License

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


Written By
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.



Comments and Discussions

 
GeneralcCell collection question Pin
foundryqa18-Apr-04 15:35
foundryqa18-Apr-04 15:35 
GeneralRe: cCell collection question Pin
foundryqa24-Apr-04 16:57
foundryqa24-Apr-04 16:57 
GeneralRe: cCell collection question Pin
Matthew Hazlett29-Apr-04 8:17
Matthew Hazlett29-Apr-04 8:17 
GeneralRe: cCell collection question Pin
foundryqa2-May-04 15:27
foundryqa2-May-04 15:27 
GeneralSuper Component Pin
trisectdevelopment16-Mar-04 21:25
trisectdevelopment16-Mar-04 21:25 
GeneralRe: Super Component Pin
Matthew Hazlett17-Mar-04 17:11
Matthew Hazlett17-Mar-04 17:11 
GeneralVery usefull Pin
Najhal5-Feb-04 6:56
Najhal5-Feb-04 6:56 
GeneralI like it! Pin
Frank Hileman23-Jan-04 8:35
Frank Hileman23-Jan-04 8:35 
Nice component you made here.

check out VG.net: www.vgdotnet.com
An animated vector graphics system integrated in VS.net
GeneralCool! Pin
Kocha21-Jan-04 3:54
Kocha21-Jan-04 3:54 
GeneralNew sample game Pin
Matthew Hazlett15-Jan-04 14:51
Matthew Hazlett15-Jan-04 14:51 
GeneralTransparency Pin
Matthew Hazlett15-Jan-04 6:56
Matthew Hazlett15-Jan-04 6:56 
GeneralFiles Pin
Matthew Hazlett14-Jan-04 15:56
Matthew Hazlett14-Jan-04 15:56 
GeneralRe: Files Pin
Matthew Hazlett15-Jan-04 6:36
Matthew Hazlett15-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.