Say no to Verbose XAML with EasyGrid!

EasyGrid is a simple enhancement to the basic Grid layout panel in WPF/Silverlight. The sole purpose of EasyGrid is to eliminate the verbose markup that clutters your XAML when you define Grids with many rows and columns.

EasyGrid provides a "mini-language" that lets you create all of the rows and columns of the grid by simply providing a value to the EasyGrid's Data property.

Before getting into the mini-language specifics, lets look at an example. Say we want to define a Grid that contains 4 columns, the first and last a fixed width, and the middle two variable, and 12 rows. You would wind up with markup something like this:



If you're anything like me, looking at markup like this gives you a headache! The EasyGrid version looks like this:

The EasyGrid Mini-Language

The EasyGrid performs its magic via the Data property, which contains a string that represents all of the rows and columns of the grid. The Data property actually has two modes of operation, a simple mode and a verbose(?!?) mode.

Simple Mode

In the simple mode, you can create a grid with a number of rows and columns that all have the "*" sizing specifier by using this syntax:

Data="CxR"

where C represents the number of desired columns and R represents the number of desired rows.

For example:

Data="12x30"

Verbose Mode

In this mode, you use tokens to specify rows and columns. You can also use the "x" character to represent a number of rows or columns with the same sizing specification.

C - A "C" in the Data string means that the next token(s) will define grid columns.

R - A "R" in the Data string means that the next token(s) will define grid rows.

# - A number token (for example "12" defines a row or column with a fixed size.

#* - A number followed by a * (for example 4*) defines a row or column with a proportional size.

Auto - The "Auto" token defines a row or column with an automatic size.

#x(token) - When there is a #x preceding a token, it means that the row or column will be repeated the specified number of times. For example, C 5x3* creates 5 columns with sizing of 3*.

That's all there is to the EasyGrid. Use it in your projects and "say no to verbose XAML!".

Download the EasyGrid component.

Solar Vengeance 6 Lobby

I completed the multiplayer lobby interface for Solar Vengeance 6 in Silverlight. Click the link below to log into the new lobby. You can set your profile, including a Glyph image, and chat with other users in the lobby.

Implementing the lobby in the app was easy once my PrismServer components were ported to Silverlight. The PrismConnection component provides an easy way to connect a Silverlight app to a running PrismServer.

In SV6 I create the PrismConnection component in code, but you could also create it in your XAML since it descends from DependencyObject. You'd just need to be sure to place it within a ContentControl, because Silverlight panels can't take DependencyObjects directly. When defined in XAML, you can set the properties like Host, Port, and SubjectName in your XAML, as well as hook up event handlers.

In my custom application class I declare a private variable to hold the PrismConnection object, and a public property to provide access to it in other pages. In Application StartUp event, I create the instance:

_prism = new PrismConnection("1.2.3.4", 4502, false);
_prism.SubjectName = "SV6";

You'd replace "1.2.3.4" with the host name or IP address where your PrismServer is running.

To connect, call the Connect method, which will eventually fire either the ConnectSuccessful or ConnectFailed events.

In your ConnectSuccessful event handler you can call either Login (for existing users) or LoginNew (for new users). Login takes 2 parameters, a user name and a password. LoginNew takes 1 parameter, an instance of a PrismUser object that represents the user information for the new user.

These methods will eventually fire either the LoginOK or the LoginFailed events, which you can handle accordingly.

The PrismUser class has some helper methods that make it easy to store and retrieve Glyph images for users. The SV6 Lobby lets you select a local image file on your computer to represent you as your Glyph. PrismUser encodes this image into a Base64 string, and saves it in the PrismUser object, in one of the "Detail" fields. PrismUser GetDetail/SetDetail methods let you store arbitrary information with a PrismUser and have it saved on the server.

When a user logs back in, its encoded Glyph string is decoded and converted back into an ImageSource which is then displayed next to them in the Lobby.

I use the PrismUser GetDetail/SetDetail to store other game-specific information about a user, such as their rank and rating.

Handling chat in the Lobby is virtually effortless thanks to PrismConnection doing all of the dirty work. To send a line of chat to other users, simply call the SendChat method. A ChatRecieved event is triggered when an incoming chat message is received. The EventArgs class provides you the PrismUser who sent the chat as well as the line of text itself.

Now that the Lobby is completed I can move onto converting the actual game mechanics!

Solar Vengeance 6 Development Build - with Lobby!