Building a Silverlight Game : Part 7 : Getting Started with Dragging Rectangles

This is the seventh post in a series on building a Silverlight game.  In the last post, we wrote code to set up a rectangle for dragging.  In this post, we’ll look at what it will take to drag the rectangle around the playing area.

Recap

So we don’t lose sight of the big picture, remember that our overall goal is to build a Towers of Hanoi clone that looks like this:

And so far, we’ve built a Towers of Hanoi clone that looks like this:

The current part of the game that we’re working on is the code to drag rectangles around the playing area since that’s pretty much the only thing there is to the game.  Last week, we wrote the code that sets up a rectangle for dragging.  Remember that this involved three things

1. Setting a flag that tells us a rectangle is being dragged
2. Adjusting the opacity of the rectangle to provide a nice visual effect
3. Capturing the mouse so the rectangle will be sure to respond to mouse events

Dragging

This week, we’ll think about the code that we need to write to drag the rectangle around the canvas. There are five things that need to happen to move the rectangle around

1) We have to check the flag that was set previously.  If a dragging operation is not current, we certainly don’t want rectangles moving around the screen.  So we’re only going to drag things around the screen if the flag is set to true.

2) We need to get the rectangle out of the stack panel (remember that our rectangles are sitting in a stack panel).  Items in a stack panel have to be in a stack.  Think of the stack of papers on your desk.  You can’t drag them around while they’re in the stack; you have to get them out first. 

   1: <StackPanel x:Name="LeftPanel" Orientation="Vertical" 

   2:     Canvas.ZIndex="1" VerticalAlignment="Bottom">

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

   4:                MouseEnter="Rectangle_MouseEnter" 

   5:                MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" />

   6:     <Rectangle Height="50" Width="110" Fill="Blue" />

   7:     <Rectangle Height="50" Width="120" Fill="Green" />

   8:     <Rectangle Height="5" Width="120" Fill="Black" />

   9: </StackPanel>

3) We need to place the rectangle somewhere that it can be dragged.  The root canvas is perfect for this.  Remember that our three stack panels are contained in a canvas.  A canvas container keeps track of its children by exact position, which is perfect for dragging.  Imagine that we’re taking a piece of paper from the stack on your desk and placing it on the desk to drag it around.

   1: <Canvas x:Name="LayoutRoot" Width="800" Height="430">

   2:     <Border Height="380" Width="257" Canvas.Left="15">

   3:         <StackPanel x:Name="LeftPanel" Orientation="Vertical" 

   4:             Canvas.ZIndex="1" VerticalAlignment="Bottom">

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

   6:                        MouseEnter="Rectangle_MouseEnter" 

   7:                        MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" />

   8:             <Rectangle Height="50" Width="110" Fill="Blue" />

   9:             <Rectangle Height="50" Width="120" Fill="Green" />

  10:             <Rectangle Height="5" Width="120" Fill="Black" />

  11:         </StackPanel>

  12:     </Border>

4) We need to bring the rectangle forward, closer to the player.  We don’t want the rectangle to accidentally get dragged behind another graphic or another rectangle, so we’ll set the ZIndex to make sure that any rectangle that is currently being dragged is the front-most object.

5) And finally, the most important thing of all, we need to move the rectangle to the current position of the mouse so that as the player moves the mouse the rectangle moves with it.  That’s the essence of dragging after all.

Conclusion

So that’s it.  If we can write code to do those five things, we can drag a rectangle around the playing area.  Next post, we’ll write the code to do those things.  We didn’t write any code this week, so the code from last week will still be the most recent.