This is the fifth post in a series on building a Silverlight game. In the last post, we finished our basic layout: three stack panels for the game rectangles, some rectangles to play with, and a bottom border for the rectangles to sit on.
With all of that set, we can start writing some code. The first thing to do is let the user know which rectangle they are allowed to drag. The rules of the game state that you can only drag the top rectangle around. In our case, this is the orange rectangle.
The standard way to let someone know that they can interact with an object is to change the cursor from the default arrow to a hand, so that’s what we’ll do. We need to set things up so that when the player mouses over the orange rectangle, the cursor changes into a hand.
Blend makes event handling an n easy task through the events pane. Select the orange rectangle, and then look for the lightning bolt icon over on the Properties tab. This gives us access to all of the events available for the orange rectangle.
The one we want is the MouseEnter event. Double-click inside of the textbox next to MouseEnter and Blend will create an event handler for us.
1: public partial class MainPage : UserControl
2: {
3: public MainPage()
4: {
5: InitializeComponent();
6: }
7:
8: private void Rectangle_MouseEnter(object sender, MouseEventArgs e)
9: {
10: // TODO: Add event handler implementation here.
11: }
12: }
Blend 3 will let us write C#, but the experience is a better in Visual Studio. If you don’t have Blend, you can accomplish the same event handle wire-up task by adjusting the XAML for your orange rectangle to look like the snippet below and then manually adding the Rectangle_MouseEnter code to your code-behind.
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: <Rectangle Height="50" Width="110" Fill="Blue" />
6: <Rectangle Height="50" Width="120" Fill="Green" />
7: <Rectangle Height="5" Width="120" Fill="Black" />
8: </StackPanel>
Inside of Rectangle_MouseEnter, we can write our code to change the cursor into a hand. The easiest thing to do is this:
1: private void Rectangle_MouseEnter(object sender, MouseEventArgs e)
2: {
3: Rectangle rectangle = sender as Rectangle;
4: rectangle.Cursor = Cursors.Hand;
5: }
We cast the sender of the event to a rectangle (because it is a rectangle) and then set the Cursor to Cursors.Hand. This does the job, but isn’t very flexible. We eventually want this code to apply to all of our rectangles, not just the orange one, so let’s add some checks to make sure that the rectangle is on top of its stack. We only want to change the cursor to a hand if the rectangle being moused over is on top.
So we adjust our Rectangle_MouseEnter to look like this:
1: private void Rectangle_MouseEnter(object sender, MouseEventArgs e)
2: {
3: Rectangle rectangle = sender as Rectangle;
4: Panel panel = rectangle.Parent as Panel;
5: rectangle.Cursor = (RectangleIsOnTop(rectangle, panel))
6: ? Cursors.Hand
7: : Cursors.Arrow;
8: }
All we’re lacking now is the RectangleOnTop() method referenced by our new conditional logic. Since the children (rectangles) of the stack panel are ordered by their index, with 0 being on top, such a method might look like this.
1: private static bool RectangleIsOnTop(Rectangle rectangle, Panel panel)
2: {
3: return panel.Children.IndexOf(rectangle).Equals(0);
4: }
Now when we mouse over the orange rectangle, our cursor will change into a hand to indicate that we can drag the rectangle around. In the next post, we’ll write some code to start dragging the rectangle around.