Building a Silverlight Game : Part 2 : Starting the Basic Layout

This is the second post in a series on building a Silverlight game.  Read Part 1 : Introduction & Tools.

In this post, we’ll set up the basic layout necessary for the game. Based on the game screenshot above and the rules for Towers of Hanoi, we can see that the most basic element we’ll need is a three-column layout for the rectangles.  In the picture above, all the rectangles are in the first column and the goal, of course, is to move them to the third column.

To start, create a blank Silverlight Application project in Visual Studio. When asked, choose not to host the application in a new website.

After your project has been created, Visual Studio will open up MainPage.xaml for you and you should see something a lot like this.

   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" d:DesignWidth="640" d:DesignHeight="480">

   7:   <Grid x:Name="LayoutRoot">

   8:  

   9:   </Grid>

  10: </UserControl>

Changing to Grid and Fixed Height & Width

The default layout container for new Silverlight pages and controls is a grid, which is great for business-type apps and arranging things in a table-like format.  But since we’re building a game, we need a bit finer control.  Also, since we’re building a game, we can get away with a fixed height and width.

You can make these two changes in either Visual Studio or Blend.  To make the changes in Visual Studio, just adjust the XAML manually so it matches the finished product below.

To make the changes in Blend, first open to same Visual Studio solution file in Expression Blend.  Once the solution loads, open up MainPage.xaml, right-click on the LayoutRoot element, and change the layout type to Canvas.

When that’s done, change the width and height to the hard-coded values of 800 and 430.

Just for good measure, if you’d like to remove the designer height and width from the XAML you can.  These properties are only used by the designer and are not necessary when using a fixed height and width for a canvas.  Open the XAML in either Blend or Visual Studio to remove those properties.

When finished with this step, you should have XAML that looks a lot like this. 

   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: </UserControl>

Adding Three Columns

With that out of the way, our next task is to create three columns for the rectangles to exist in.  Given the choices available for Silverlight layout containers, StackPanel is a perfect choice for this.  Let’s add three StackPanels to our canvas.

To do this in Blend, first select the LayoutRoot to make it the active control.  Then, right-click the layout controls toolbar on the left and select StackPanel.  After that, you can double-click the StackPanel icon to add a StackPanel to the LayoutRoot.  Do this three times, making sure to re-select the LayoutRoot each time.

When finished in Blend, your Objects explorer should look like this.

To make this change in Visual Studio, or to confirm that your Blend changes went well, just change your XAML to look like this.

   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>

In the next post, we’ll finished up the basic layout.