Silverlight Tip of the Day #4: Building the Game Interface Using the Grid Control.
[Blog Mirrored from https://silverlight.net/blogs/msnow/default.aspx]
Silverlight provides a <Grid> 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 <Grid> 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
<UserControl x:Class="Fireball.Page"
xmlns="https://schemas.microsoft.com/client/2007"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
Width="800" Height="728">
We will be using the following <Grid> 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 <Grid> control with 3 rows.
Column 1: This is the left border bar.
Column 2: This has another <Grid> 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:
<Grid Background="Black" ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="12"/>
<ColumnDefinition Width="776"/>
<ColumnDefinition Width="12"/>
</Grid.ColumnDefinitions>
</Grid>
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.
<Grid Background="Black" ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="12"/>
<ColumnDefinition Width="776"/>
<ColumnDefinition Width="12"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="1" ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="62"></RowDefinition>
<RowDefinition Height="538"></RowDefinition>
<RowDefinition Height="128"></RowDefinition>
</Grid.RowDefinitions>
</Grid>
</Grid>
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 called images.
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 <Image> 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:
<Image Canvas.ZIndex="1001" Grid.Column="0" Source="images/column.png"/>
<Image Canvas.ZIndex="1001" Grid.Column="2" Source="images/column.png"/>
This will put the border bar in the 1st and 3rd columns of the first <Grid>
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.
<Canvas Canvas.ZIndex="1001" Background="Black" x:Name="LogoCanvas" Canvas.Top="0" Grid.Row="0">
<Image Source="images/toppanel.png"/>
<Image Canvas.Top="5" Canvas.Left="0" Source="images/silverlightfireball.png"/>
</Canvas>
The chat window is composed of various parts and are declared as:
<Canvas Canvas.ZIndex="1001" Background="Black" Canvas.Top="0" Grid.Row="2" Grid.Column="0">
<Image Source="images/panel.png"/>
<Image Canvas.Top="20" Canvas.Left="170" Source="images/chatwindow.png"/>
<Button Canvas.Top="30" Canvas.Left="720" Width="50" Background="Brown" Content="Send" ></Button>
</Canvas>
To conclude, the complete XAML in Page.xaml should like something like this:
<UserControl x:Class="Fireball.Page"
xmlns="https://schemas.microsoft.com/client/2007"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
Width="800" Height="728">
<Grid Background="Black" ShowGridLines="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="12"/>
<ColumnDefinition Width="776"/>
<ColumnDefinition Width="12"/>
</Grid.ColumnDefinitions>
<Image Canvas.ZIndex="1001" Grid.Column="0" Source="images/column.png"/>
<Grid Grid.Column="1" ShowGridLines="False">
<Grid.RowDefinitions>
<RowDefinition Height="62"></RowDefinition>
<RowDefinition Height="538"></RowDefinition>
<RowDefinition Height="128"></RowDefinition>
</Grid.RowDefinitions>
<Canvas Canvas.ZIndex="1001" Background="Black" x:Name="LogoCanvas" Canvas.Top="0" Grid.Row="0">
<Image Source="images/toppanel.png"/>
<Image Canvas.Top="5" Canvas.Left="0" Source="images/silverlightfireball.png"/>
</Canvas>
<Canvas x:Name="MapCanvas" Canvas.Top="0" Grid.Column="1">
</Canvas>
<Canvas Canvas.ZIndex="1001" Background="Black" Canvas.Top="0" Grid.Row="2" Grid.Column="0">
<Image Source="images/panel.png"/>
<Image Canvas.Top="20" Canvas.Left="170" Source="images/chatwindow.png"/>
<Button Canvas.Top="30" Canvas.Left="720" Width="50" Background="Brown" Content="Send" ></Button>
</Canvas>
</Grid>
<Image Canvas.ZIndex="1001" Grid.Column="2" Source="images/column.png"/>
</Grid>
</UserControl>
Thank you,
--Mike Snow
Comments
- Anonymous
November 18, 2008
PingBack from http://www.tmao.info/silverlight-tip-of-the-day-4-building-the-game-interface-using-the-grid-control/