Click here to Skip to main content
Click here to Skip to main content
Go to top

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

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

ShowGrid This is true or false if you want the grid to display in the controls workspace
Example: object.ShowGrid = True
GridColor What color you want the grid to be
Example: object.GridColor = color.red
Cells How 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)
Note: This sets a range of cells to be filled in with a color

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

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

removeCell

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

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

clearCells Definition: clearCells()
Example: object.clearCells()
Note: This removes all cells from the grid

Special Events

gridClick This is fired when you click somewhere in the grid.
Returns: Object and GridPosition
gridDoubleClick This is fired when you double click somewhere in the grid.
Returns: Object and GridPosition
gridMouseMove This is fired when you move the mouse somewhere in the grid.
Returns: Object and GridPosition
gridMouseUp This is fired after you click somewhere in the grid.
Returns: Object, MouseEventArgs and GridPosition
gridMouseDown This 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 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.

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

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

Share

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.
 


Comments and Discussions

 
QuestionDirectory structure in grid? Pinmembertauferre25-Aug-11 2:43 
GeneralGraphicGrid C# migration PinmemberUFAnders13-Jul-08 18:32 
GeneralA Very good Graphic Grid Pinmemberlukebrincat27-May-08 5:55 
GeneralVS2005 No add/rem item @ toolbox but Pinmemberideve2-May-07 9:14 
GeneralCreating components PinmemberNUMBER1PEEP10-Feb-07 5:29 
GeneralImage or Bitmap movement PinmemberMember #368875521-Jan-07 21:59 
GeneralHighlight Copy Past Pinmemberlysis_lysis31-Oct-06 19:23 
Generalget the image name from a cell Pinmemberntib30-Jun-06 5:06 
QuestionGet property from a single cell? PinmemberQvicksilver28-Jun-05 3:13 
AnswerRe: Get property from a single cell? Pinmemberlysis_lysis8-Dec-05 18:12 
AnswerRe: Get property from a single cell? PinmemberTimCarr27-Mar-07 5:52 
GeneralAnyone used it in asp.net yet. Pinsussjameswhitfield15-Apr-05 8:47 
GeneralScroll PinmemberBharti Ramji25-Feb-05 4:55 
GeneralRe: Scroll Pinmemberlysis_lysis29-Oct-05 18:00 
GeneralEach individual cell Pinmemberetchan26-Dec-04 14:36 
QuestionRe: Each individual cell Pinmemberjswoofer23-Oct-06 6:18 
GeneralDrawing tools PinsussSwapnil Pithwa4-Oct-04 2:41 
GeneralDraw letters and graphs PinmembermauleTTT19-Sep-04 11:42 
GeneralCompitable version of .NET PinsussSwapnil Pithwa20-Aug-04 5:25 
GeneralRe: Compitable version of .NET PinmemberMatthew Hazlett20-Aug-04 6:21 
GeneralRe: Compitable version of .NET PinmemberKevJB20-Oct-04 21:10 
GeneralAdding a button to the Grid Pinmemberopticnurve14-May-04 8:25 
GeneralRe: Adding a button to the Grid PinmemberMatthew Hazlett14-May-04 8:30 
GeneralRe: Adding a button to the Grid Pinmemberopticnurve14-May-04 9:13 
GeneralRe: Adding a button to the Grid Pinmemberlysis_lysis1-Feb-10 11:12 

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

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

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