Jose Fajardo

Friday March 07, 2008

Live Messenger done with Silverlight 2.0 - Login Screen Layout

In this post I will take the login screen mock up and create a Silverlight layout. Before I discuss the screens lets talk about layouts in general.

When building applications one of the hardest things to get right is the layout of controls and how they behave when the application resizes.

When designers create mock ups they generally create screens that are snapshots taken at a single point in time. Some of the more experienced designers produce multiple mock ups that show the same application behaving as they would expect when resized at the same single point in time. I prefer the multiple mock up process showing the effect of resizing but at the end of the day it all depends on what your designers/UX people are willing to do.

Why should the mock ups show the effects of resizing? It is extremely time consuming to do this however my reasoning for it is that because it affects the UI then it's in the domain of the Graphic Artist and/or User Experience person to get right. Of course you can argue that it should also be driven by business requirements, true but at the end of the day it is the UI so it should be captured in the UI mock ups. That's just my opinion :)

Prior to Silverlight 2.0 the only way to layout controls was to use a canvas control and you had to wire up to the resize event of the page and do funky logic to position controls using their left and top positions. It was extremely complicated and something I would not want to do manually on every project.

Silverlight 2.0 beta introduced two new layout controls that make positioning controls when the application resizes dead simple.

1. Grid

2. Stackpanel

A grid, for me, is exactly like a table in HTML. I have been known to favor tables over divs, the die hard CSS fanatics pull me down all the time on this however it works for me. Below is how I use grids and stack panels:

1. Grids - I split the application into parts, where a part is a logical grouping of controls. I then want to position the parts in relation to other parts and also in relation to the overall size of the application workspace. I use a grid for this

2. Stack panels - I use to layout controls within each part.

Note that a part itself can be made up of other parts, I'm probably going to confuse most of you here so let's get into the examples.

Also bare in mind that this posting will only create the layout areas. The actual controls will be introduced in a future posting.

Login screen mock ups

I've logically identified three parts to the login page. Ultimately this comes down to the developer and how they will cut the application up.

a) Header part

b) Body part

c) Footer part

The three above mentioned parts, header, body, footer, I would use a grid to lay them out.

Don't be scared by the above XML syntax . All it is saying is

1. Create a grid called grdMessenger

2. That grid will have 3 rows, and I've explicitly named each row

3. rowHeader will be of a constant height of 60 pixels

4. rowFooter will be of a constant height of 120 pixels

5. rowBody will be of varying height.

Basically when the application resizes vertically the rowBody will grow/shrink based on the direction of the resize

Header Part

Now the header part above, to me, is made up of 2 parts so again I would use another grid to layout these 2 parts.

The above syntax shows us creating a grid to be embed itself in the parent grid "grdMessenger", it will put itself on the first row which is ordinal 0 (Grid.Row="0"). This new grid will contain 2 new columns, a left part and a right part. The right part is fixed to 160 pixels and the left part can grow.

The Right part above is again made up of 2 parts so I would use another grid to layout these parts.

As you can see this newly created grid is wired up to the second column of the "grdMessengerHeader" (highlighted yellow).

The full xAML layout can be seen at the bottom of this posting.

Footer Part

The footer part, to me, is made up of two other parts

So I would use a grid to layout these two parts.

You can see from the picture above that this grid will position itself on the 3rd row (Grid.Row="2" due to ordinal starting at 0) of the parent grid which is "grdMessenger ". This footer grid "grdMessengerFooter" will contain two rows, the second row will be of fixed height 25 pixels and the first row will variable resize.

The full xAML of the layout can be seen at the bottom of this posting.

Body Part

This is a bit more complicated. If you resize the actual messenger application you realize that the body part actually consists of four logical groupings of controls. As live messenger resizes, these groupings are either shown or hidden based on the amount of real estate available. This is what I was saying earlier regarding having the designer mock up the resized layouts. For instance the designer could have provided me the following screen shots all taken at the same point in time but showing how the application behaves in various resized modes.

As you can see as the application resizes various parts are hidden. This is why I am a strong believer in the UI mock ups having this information because it is easier to understand when in picture form in front of you. Without going into too much detail I would create a grid to contain the four identified parts.

From the above syntax you can see this new grid will position itself in the 1st row of the parent grid "grdMessenger". It will itself contain four rows each of varying heights.

Full xAML showing the layout

Silverlight Login Page LAYOUT

Here is the Silverlight login page built with the new 2.0 features. As you can see it was dead simple and grids/layouts make your life so much easier when laying out controls.

It's crucial you find your own peace of mind with these controls, don't take my approach as bible. Get comfortable with it on your own terms and in time you will be building amazingly complex layouts in record time.

The picture below on the left shows the Silverlight 2.0 beta Login page with ShowGridLines set to True. The picture on the right shows my current Live Messenger application.

Using simple Grid controls we can easily achieve the desired layout. When the application resizes height wise all the rows we defined as "*" will resize variably. Prior to Silverlight 2.0 beta I had to manually handle this resizing.

Thanks Microsoft for making my life so much easier. This grid control is amazing, it is my favorite control and over time I am sure you guys will fall in love with it too.

In the next blog posting we will start adding placeholder controls into the defined grid areas. We will get intimate with the Stackpanel and ideally you will gain an appreciation of when you should use a Stackpanel over a grid.

Source code can be found here, it's in my skydrive account so please let me know if you have issues downloading it.

A working Silverlight 2.0 sample will be uploaded online very soon.

Remember to keep sharing what you learn!