Silverlight and Expression Blend prove to be a lethal combo for developing game user interfaces (UIs).
You can use the rich Internet features of Silverlight 3 as well as develop the logic and perform the processing in the code-behind files in a Silverlight 3 application. And you can use Expression Blend to design and enhance the UI.
Let's take a simple example of the Number Puzzle game to demonstrate this. This game works as follows:
A set of buttons are displayed in a 3x3 format, each containing a random number between 1 to 8, except one button which is left blank. Thus, you have 8 random numbers between 1 to 8 displayed on 8 buttons and one button which is blank. For example, it could be like this:
You have to rearrange these numbers such that they are in the form:
No matter what the initial contents of the buttons are, the final outcome must be the above rearranged series. To achieve this, you can move the numbers around. For example in the set shown below, if you click on 3, it replaces the blank and the cell containing 3 now becomes blank.
(before)
(after)
If you click on 6, the result would be as shown below:
So on, you must go on clicking the relevant numbers so that the ultimate result would be the desired outcome of numbers sorted from 1 to 8.
To begin with, let's create a Silverlight 3 application. Let's call it Puzzler.
The basic XAML code to create the buttons set would be:
<UserControl x:Class="Puzzler.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
<Grid x:Name="GridRoot" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="45" />
<RowDefinition Height="45" />
<RowDefinition Height="45" />
</Grid.RowDefinitions>
<Button Name="b1" Content=" " Grid.Column="0" Grid.Row="0"/>
<Button Name="b2" Content=" " Grid.Column="1" Grid.Row="0"/>
<Button Name="b3" Content=" " Grid.Column="2" Grid.Row="0" />
<Button Name="b4" Content=" " Grid.Column="0" Grid.Row="1" />
<Button Name="b5" Content=" " Grid.Column="1" Grid.Row="1" />
<Button Name="b6" Content=" " Grid.Column="2" Grid.Row="1" />
<Button Name="b7" Content=" " Grid.Column="0" Grid.Row="2" />
<Button Name="b8" Content=" " Grid.Column="1" Grid.Row="2" />
<Button Name="b9" Content=" " Grid.Column="2" Grid.Row="2"/>
</Grid>
</UserControl>
Next, since the user is going to click any of the buttons, you will need to trap the Click button. As this is going to be a common event for all the buttons, let's create a event handler called btnClick and then assign it to each of the buttons.
The XAML code for this would be:
<Button x:Name="b1" Content=" " Grid.Column="1" Grid.Row="0" Click="btnClick" />
<Button x:Name="b2" Content=" " Grid.Column="1" Grid.Row="0" Click="btnClick" />
<Button x:Name="b3" Content=" " Grid.Column="2" Grid.Row="0" Click="btnClick" />
<Button x:Name="b4" Content=" " Grid.Column="0" Grid.Row="1" Click="btnClick"/>
<Button x:Name="b5" Content=" " Grid.Column="1" Grid.Row="1" Click="btnClick" />
<Button x:Name="b6" Content=" " Grid.Column="2" Grid.Row="1" Click="btnClick"/>
<Button x:Name="b7" Content=" " Grid.Column="0" Grid.Row="2" Click="btnClick"/>
<Button x:Name="b8" Content=" " Grid.Column="1" Grid.Row="2" Click="btnClick"/>
<Button x:Name="b9" Content=" " Grid.Column="2" Grid.Row="2" Click=
"btnClick"/>
Save this code and test the user interface.
In the next part of this article, we will view how to add the logic and functionality in the code-behind and also how to enhance the design of the user interface.
Part II | Part III | Part IV