Building a Silverlight Game : Part 6 : Setting up a rectangle for dragging

This is the sixth post in a series on building a Silverlight game.  In the last post, we wrote code to change the cursor into a hand when the player mouses over the orange rectangle.

Introduction

In this post, we’ll write some code to set up a rectangle for dragging and dropping.  If we think about the idea of dragging a rectangle around the screen, there are a few things we need to take are of before a rectangle is ready to be dragged around.

1. We need to set a flag that we’re dragging.  When we drag, we’re going to tie that to the rectangle MouseMove event and we don’t want to drag all the time, just when we’re supposed to.  So we’ll set a flag to tell us that dragging is currently active. That will prevent rectangles from being dragged around the screen every time the player mouses over them.
2. We need to adjust the opacity of the rectangle to provide a nice visual effect. This will distinguish the dragged rectangle from the rest of the rectangles.
3. We need to capture the mouse.  It is possible in Silverlight to move the cursor so fast that the cursor will come out of the item being dragged.  When we capture the mouse we tell Silverlight to keep responding to events as if the mouse was still inside the item being dragged.

Adding the MouseLeftButtonDown event handler

Our first task is to wire up the MouseLeftButtonDown event for the orange rectangle.  This is easiest in Blend.  Just select the orange rectangle, open the Properties tab, and then hit the event button in the upper right.  This will display all the events that we can wire up for the rectangle.  Double-click inside the MouseLeftButtonDown textbox to have Blend automatically create an event handler.

If you would rather use Visual Studio, you can just manually add the event handler code to the rectangle’s XAML and then add the Rectangle_MouseLeftButtonDown method to the XAML’s code-behind.

   1: <Rectangle Height="50" Width="100" Fill="Orange" 

   2:            MouseEnter="Rectangle_MouseEnter" 

   3:            MouseMove="Rectangle_MouseLeftButtonDown " />

   1: private void Rectangle_MouseLeftButtonDown (object sender, MouseEventArgs e)

   2: {

   3:     // TODO: Add event handler implementation here.

   4: }

Inside the Rectangle_MouseLeftButtonDown event handler, we’ll make a call to do the three things that are required to set up a rectangle for dragging and dropping: setting the flag, changing the opacity, and capturing the mouse.  We don’t want to put all of this code in our code-behind though, so let’s write a new class called “DragAndDrop” that can contain all of drag-and-drop logic. 

But first, let’s write the code that will call our new class.  As you can see below, we’re going to call an instance of our DragAndDrop class’s StartDrag method and send it the rectangle that we want to start dragging.

   1: private void Rectangle_MouseLeftButtonDown(object sender, 

   2:      MouseButtonEventArgs e)

   3: {

   4:     dragAndDrop.StartDrag(sender as Rectangle);

   5: }

The DragAndDrop class

The DragAndDrop class is nice and simple.  It has a boolean that knows if something is being dragged or not and it has one method that can start the dragging process for a given rectangle.

   1: public class DragAndDrop

   2: {

   3:     private bool dragging = false;

   4:  

   5:     public void StartDrag(Rectangle rectangle)

   6:     {

   7:         if (rectangle.Cursor.Equals(Cursors.Hand))

   8:         {

   9:             dragging = true;

  10:             rectangle.CaptureMouse();

  11:             rectangle.Opacity = 0.6;

  12:         }

  13:     }

  14: }

The StartDrag method first checks to see if the rectangle’s cursor is a hand.  If it is, then we know that this rectangle must be on top and so is eligible for dragging.  This will prevent players from dragging rectangles that are not on top.

If the rectangle is on top, we just do the three things required to start dragging

1. Set the boolean to true
2. Capture the mouse so events on the rectangle will continue to fire even if the mouse leaves the rectangle’s area
3. Set the opacity of the rectangle to 0.6.  This means that the rectangle being dragged will be 40% see through.

In our next post, we’ll write some code to actually drag the rectangle around the canvas. 

Download source code so far