With the release of Silverlight 2 Beta 1, all developers got a long awaited layout management system and some useful panels: StackPanel and Grid. In addition to Canvas, these containers were intended to satisfy all the layout needs developers will have.
So did it happen? Some might say - yes, why not: almost any layout can be built using the Grid. Right, but what is the price the developer/designer has to pay to construct any fairly complicated page of a real world application? My opinion - I cannot afford this price, I cannot afford to use Grid. Grid is nice for those cases with simple static layouts, when you know upfront what controls you want and where they will be located.
Unfortunately such scenarios almost certainly do not exist in real applications. During the development process controls invariably need to be moved to another location, deleted, or new ones inserted into the existing layout. Quite often these layouts are very complex and any modification becomes a puzzle: with the Grid you will have to change the Column/Row/ColumnSpan/RowSpan properties not just for the control whose position has changed, but for any other controls around it too. And if you decide to give your end-users some freedom to modify the layout of your application's pages how are you going to do this with the Grid?
The situation looks pretty bad, but there is a solution. This solution is still cooking, but we can give you a chance to smell its beautiful aroma :-) So it smells something like this (you can see it live on the Area51 web site - the LayoutControl link in the Controls group box):
You might say: "Man, is there any order there? It looks too complex." But in reality everything there is simple: this entire layout is built using one simple element - LayoutGroup. You can orient it horizontally:
or vertically:
One simple principle - the LayoutGroup can be a child of another LayoutGroup - helps you build that complex layout from simple elements. Here:
you can see two LayoutGroups: one vertical group contains items 11 and 12, a second horizontal group has the first group and item 13 as children.
LayoutGroup looks like StackPanel, but it has a lot of advanced functionality that makes the magic work:
- It does not just stack items, LayoutGroup looks at the item's alignment to determine how the item should be placed: a horizontal group, for example, will align the item to the right if the item's HorizontalAlignment is Right, center it in the empty space inside the group if the item's HorizontalAlignment is Center, and stretch it if it's Stretch. In this layout group:
items 5 and 6 are left aligned, 7 and 10 are centered, 8 and 9 are right aligned. Here:
item 1 is left aligned, item 4 is right aligned and items 2 and 3 are both stretched proportionally to their desired sizes.
- If the LayoutGroup has default alignment it determines its actual alignment based on the alignment of its children. Min/max sizes for the LayoutGroup are also calculated according to the min/max sizes of its children.
- In the future LayoutGroup will automatically provide splitters to resize its items and implement some additional functionality to make building complex layouts simple.
As you can see, when you use LayoutControl (part of the AgLayoutControl suite) and want to change the position of some control inside it you do just that - just move it to a new place, remove it, or insert it if the control is not there yet. Everything else will be magically done for you by LayoutControl. No more puzzles, just do what you want.
This is the first blog post about LayoutControl, the control that may make you rethink the way page layout should be built in Silverlight. More aromas are coming...
P.S. Those of you with some spare time can try to build the layout from the first image using Grid. And if this task is too easy for you, try to modify the layout you just built :-)