Building a Silverlight Game : Part 3 : Adding some rectangles

This is the third post in a series on building a Silverlight game.  In the last post, we created our game canvas and three stack-panels to hold our rectangles. Our goal is to create the Towers of Hanoi game pictured below.

We have our canvas set up and it has three stack-panels that will hold our rectangles.

   1: <UserControl x:Class="TowersTutorial.MainPage"

   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 

   5:     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 

   6:     mc:Ignorable="d">

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

   8:       <StackPanel Height="100" Width="100"/>

   9:       <StackPanel Height="100" Width="100"/>

  10:       <StackPanel Height="100" Width="100"/>

  11:   </Canvas>

  12: </UserControl>

We want to position these three stack panels so they each have an equal share of the canvas.  You’ll also notice that the stack panels do not extend all the way to the bottom of the canvas, but stop short to leave room for the “grass” that the rectangles are sitting on.

Replace the three boring stack panels with the code snippet below.  Notice that we’re explicitly setting the height, width, and Canvas.Left so these stack panels end up exactly where we want them.

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

   2:             Height="380" Width="257" Canvas.ZIndex="1" Canvas.Left="15" />

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

   4:             Height="380" Width="257" Canvas.ZIndex="1" Canvas.Left="272"/>

   5: <StackPanel x:Name="RightPanel" Orientation="Vertical" 

   6:             Height="380" Width="257" Canvas.ZIndex="1" Canvas.Left="529"/>

Now we just need some dummy rectangles to sit in the first stack panel to simulate what things look like at the beginning of the game.  We’ll fancy things up shortly but these dummy rectangles will let us wire up our drag and drop logic.

You can create these rectangles in either Expression Blend or Visual Studio, but they should end up looking something like this.

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

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

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

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

If you don’t specify height and width, Silverlight will not allocate any room for the rectangles and they won’t be visible.  If you don’t specify a Fill (background color), they will be invisible.  It’s important to give all Silverlight controls some shape and color.

Now we have four rectangles.  The orange, blue, and green rectangles are our game pieces and the black rectangle is a platform for the other three to sit on.  If you view this in Blend (or run it from VS), you’ll see that our game is starting to take shape.

Next post, we’ll look into how to get those rectangles down at the bottom where they belong.