Silverlight Tip of the Day #3: Building the Game Interface Using the Grid Control.

Silverlight provides a  control that makes it very easy to plan and layout the user interface for your game. This control also supports imbedding grids within grids similar to how you would have embedded tables within tables in Word.

Before we start to create the interface for our game "Fireball", let's take a look at the end result:

The user interface for your game is stored in your Page.xaml file. The first thing you will want to do before adding the control is set the Width and Height of your Silverlight control. In our case, we are going with 800x728. You can set this by adding a Width and Height attribute to the UserControl in Page.Xaml

"Fireball.Page" 

    xmlns="http://schemas.microsoft.com/client/2007" 

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

     Width="800" Height="728">

We will be using the following  attributes:

• Background - The background color of the control. Set this to "black".
• ShowGridLines - This is intended to be used for layout planning purposes only. Thus, you can only have dotted lines. For now, you can set this to "True", but when you are done don't forget to set this to "False" or you will have some ugly lines on your interface.

In our case, we are going to have 3 columns. In the second column, we will imbed another  control with 3 rows.

Column 1: This is the left border bar.

Column 2: This has another  control with three rows:

Row 1: Banner that says "Silverlight Fireball". 
Row 2: Game Map area. 
Row 3: Chat Window and other buttons.

Column 3: This is the right border bar.

To create the 3 columns we will add the following XAML to Page.xaml:

"Black" ShowGridLines="True"> 
       
          "12"/> 
          "776"/> 
          "12"/>  
       
 

We are setting the first and last columns Width="12" since this is just a narrow border bar. Set the second column to Width="776" since this is the primary space for the banner, game map and chat window.

If you look at the preview window, you will now see this:

Now, let's imbed another Grid in the second column of the first grid so that we have the 3 rows we specified above. To do this, for this second Grid specify Grid.Column=1 (Zero index based). This tells Silverlight to put this grid control in the 2nd column of the first grid.

"Black" ShowGridLines="True"> 
        
           "12"/> 
           "776"/> 
           "12"/>  
        
 
       "1" ShowGridLines="True"> 
            
               "62"> 
               "538"> 
               "128"> 
            
       

Set the first row Height = 62, this is the height of our banner. 

Set the second row Height=538, this is the height of our map. 
Set the third row Height=128, this is the height of our chat window.

Voila:

Now, let's add some graphics!

Step 1: In the solution explorer, right click on your Fireball project node and select Create New Folder. Create a folder calledimages.

Step 2: Right click on the following images below, choose Save Target As and save the images to your new folder images.

Step 3: Right click on your newly created folder images, choose Add | Existing Item. Add all the images in that folder to the project, otherwise they will not be loaded and displayed. That is, it's not enough to just have the file in the folder, you have to specifically add it to the project or it would know it's there.

Step 4: Adding the graphics to your grid. For each of these graphical elements, we will declare an  control. All controls in Silverlight allow you to specify what row and what column you want that control displayed in. The Canvas.ZIndex specifies the drawing order, since we always want the border on top I chose the value "1001". For our left and right border bars we declare:

"1001" Grid.Column="0" Source="images/column.png"/>
 
"1001" Grid.Column="2" Source="images/column.png"/>
 

This will put the border bar in the 1st and 3rd columns of the first 

The top panel and the Silverlight Fireball banner are grouped in a Canvas objects and placed in the first row of the second Grid and declared as. You can position the "Silverlight Fireball" image using Canvas.Left and Canvas.Top attributes. By default, these attributes are Zero if they are not set.

"1001" Background="Black" x:Name="LogoCanvas" Canvas.Top="0" Grid.Row="0"> 

"1001" Background="Black" x:Name="LogoCanvas" Canvas.Top="0" Grid.Row="0"> 
    "images/toppanel.png"/> 
    "5" Canvas.Left="0" Source="images/silverlightfireball.png"/> 

The chat window is composed of various parts and are declared as:

"1001" Background="Black" Canvas.Top="0" Grid.Row="2" Grid.Column="0"> 

"1001" Background="Black" Canvas.Top="0" Grid.Row="2" Grid.Column="0"> 
    "images/panel.png"/> 
    "20" Canvas.Left="170" Source="images/chatwindow.png"/> 
     

To conclude, the complete XAML in Page.xaml should like something like this:

"Fireball.Page"
    xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Width="800" Height="728">
 
    "Black" ShowGridLines="False">
        
            "12"/>
            "776"/>
            "12"/>  
        
        "1001" Grid.Column="0" Source="images/column.png"/>
        "1" ShowGridLines="False">
            
                "62">
                "538">
                "128">
            
            "1001" Background="Black" x:Name="LogoCanvas" Canvas.Top="0" Grid.Row="0">
                "images/toppanel.png"/>
                "5" Canvas.Left="0" Source="images/silverlightfireball.png"/>
            
            "MapCanvas" Canvas.Top="0" Grid.Column="1">              
            
            "1001" Background="Black" Canvas.Top="0" Grid.Row="2" Grid.Column="0">
                "images/panel.png"/>
                "20" Canvas.Left="170" Source="images/chatwindow.png"/>              
                
            
        
        "1001" Grid.Column="2" Source="images/column.png"/>
    

Thank you,