Drag and Drop for Board Games

Environment: W2K, VS.NET

This application shows how the drag and drop features in C# could be used to
create a simple board game or whatever. I didn’t put any type of game in
the application in order to keep the source code simple. The application
just lets you move the dots around the board. It allows highlighting
a tile when you drag over it, doesn’t allow dragging onto a tile with a dot,
and the cursor changes depending on whether or not you can drop the dot.

Code

There are two classes in this project: smDragDropTest and smTile.

smDragDropTest inherits from System.Windows.Forms.Form and is used for the main form. In order to allow the drag and drop to register properly you must mark your main with [STAThread] if that isn’t there it will throw an exception.

public class smDragDropTest :
                System.Windows.Forms.Form

smTile inherits from System.Windows.Forms.PictureBox and is used for the board tiles

public class smTile :
           System.Windows.Forms.PictureBox

smDragDropTest dynamically creates the smTiles on the form to create
a board.

// Initialize the grid
grid = new smTile[MAX_GRID_SIZE, MAX_GRID_SIZE];

// Initialize each tile in the grid
for (int row = 0; row < MAX_GRID_SIZE; row++) {

  for (int col = 0; col < MAX_GRID_SIZE; col++) {

    try {
      // Create the tile
      grid[row,col] = new smTile();

      // Set the location for the tile
      xSpot = (col * IMAGE_WIDTH) + BORDER_OFFSET;
      ySpot = (row * IMAGE_HEIGHT) + BORDER_OFFSET;
      grid[row,col].Location = new Point(xSpot, ySpot);

      // Add the tile to the form
      this.Controls.Add(grid[row,col]);
    }
    catch {
      // Just catch an exception, no error handling yet
      System.Console.WriteLine(
      "Exception caught for tile[{0}, {1}]",
      row, col);
    }
  }
}

The smTile constructor loads the images and sets up the event handlers. We are going to handle the mouse down, drag enter, drag leave, and drag drop events. In order for an object to allow dragging you must set the AllowDrop property to true. To see what each event handler does you can look at the code, it is pretty straight forward.

filledImage = new System.Drawing.Bitmap("dotBox.jpg");
emptyImage = new System.Drawing.Bitmap("emptyBox.jpg");
overImage = new System.Drawing.Bitmap("overBox.jpg");

this.MouseDown += new MouseEventHandler(OnMouseDown);
this.DragEnter += new DragEventHandler(OnDragEnter);
this.DragDrop += new DragEventHandler(OnDragDrop);
this.DragLeave += new EventHandler(OnDragLeave);
this.AllowDrop = true;

To start the dragging process we use the OnMouseDown event. All you have to do is call DoDragDrop.

public void OnMouseDown( object sender,
                         MouseEventArgs e)
{
  // Only allowing dragging if there is an item
  if (hasItem) {

    // Start the dragging process
    DragDropEffects effect = DoDragDrop( this.Image,
	                             DragDropEffects.Copy);

    // Check to see if the image was dropped somewhere
    if (effect != DragDropEffects.None) {

      // It was dropped so remove the item
      RemoveItem();
    }
  }
}

In order to use custom cursors and not the default drag and drop cursors you must override OnGiveFeedback. Once you do that it is your job to change the cursors when you need to.

protected override void OnGiveFeedback(
                     GiveFeedbackEventArgs gfbEvent)
{
  // Allow us to use our own cursors when dragging
  gfbEvent.UseDefaultCursors = false;
};

In OnDragEnter we check to see if the correct data is being dragged into the box by using the GetDataPresent(DataFormats.Bitmap) from the DragEventArgs. If it is the right kind of data we set the Effect property of DragEventArgs to whatever effect you want.  In this case we are dragging around Bitmaps and allowing them to be copied.  Since we handle the images ourselves we don’t really care about the data, we are just using it for a place holder to give use the drag and drop functionality.

// Check to see if we can handle what is being dragged
if (e.Data.GetDataPresent(DataFormats.Bitmap)) {
  // Change the cursor to a hand
  this.Cursor = Cursors.Hand;
  // Lets it know what effects can be done
  e.Effect = DragDropEffects.Copy;
  // Change the image
  this.Image = overImage;
}

Well that is about it. Hopefully someone finds it helpful.

Downloads

Download demo project & source- 31 Kb