SilverVlad

Silverlight 2 was finally released this Tuesday and I updated the AgLayoutControl demo web site one hour early (sorry, I could not wait until midnight - hope nobody from MS noticed :-) This update did not just bring the web site up to date, it introduced several new features of the LayoutControl - the main control from the AgLayoutControl library. All this new functionality is about bringing the power of LayoutControl to your fingertips - through customization. And this time you can even use your keyboard! :-)

When you go to the LayoutControl demo ("LayoutControl" link in "Controls" group box on the demo web site), the first thing you will notice is the IsCustomization property. It switches the LayoutControl to/from customization mode. In this mode the LayoutControl takes over all mouse input going to its children. Now you can select one or more items inside the LayoutControl:

You can use the Esc key to reduce the selection to one item, or, if there is already only one item selected, to select the item's parent LayoutGroup:

You can continue pressing Esc until you get to the root layout group - the LayoutControl itself (for those of you who are not familiar with the LayoutControl's architecture please read this). The ability to select the parent LayoutGroup provides 2 benefits: you can customize this element and you can learn about the layout structure of your LayoutControl.

I wrote already about item drag & drop in the LayoutControl. This is a very powerful feature, but it is not quite enough to build a complex and flexible layout. Meet your new friend - the customization toolbar:

It appears after you've selected an item or when you move the mouse over one of the selected items. You might have noticed that the customization toolbar is not shown on the previous images. This is because I hid it clicking on the empty area inside LayoutControl.

Right now the customization toolbar only allows you to change an item's HorizontalAlignment and VerticalAlignment. See how the layout updates after I set the item's horizontal alignment to Left and vertical alignment to Stretch:

In the future this toolbar will provide more customization options. You can use it with both items and LayoutGroups inside the LayoutControl.

When you have one LayoutGroup selected, in addition to customizing alignments you can change the spacing between items inside this group. Just press 0..9 keys to set the space you desire. I pressed 0 to completely remove item spacing in the selected LayoutGroup (this works for the LayoutControl itself too):

Have you noticed the dotted areas between items/layout groups?

These are splitters, automatically generated by the LayoutControl based on the ability and "desire" of each item to resize. By default, splitters are shown only during customization. You can change this behavior to always or never show them. The visibility of splitters can be defined for the entire LayoutControl or for each LayoutGroup and its child groups.

When you resize an item/LayoutGroup using a splitter, its Width or Height property is being changed. If, however, you decide to reset an item's size to its default value, you can do it by double-clicking on the corresponding splitter. As a result, the item's Width/Height will be reset to Double.NaN and the item will get its default size based on its content and alignment.

You might ask - why do you need splitters in Silverlight, where all elements by default resize themselves to their best size in order to show their content completely? It is true, in Silverlight we usually don't need to explicitly set an element's size. However, there are cases when this can be useful: for example, if you want to give your end-users the ability to make one part of a page smaller so they can see more information in another part. This is the case with the main page of the AgLayoutControl demo web site. Splitters there are used to resize the left navigation bar and the top banners group.

Did you pick up the hint I gave you in the previous paragraph? Yes, the main page of the demo web site has been redone: instead of using a mix of 6 DockLayoutControls and 1 FlowLayoutControl as it was before, it's now built using just a single LayoutControl. Isn't that a definitive exposition of the power and flexibility the LayoutControl offers you?

Now it is time for you to play with these new features. Please go to the AgLayoutControl demo web site and check out the updated demo of the LayoutControl. I would appreciate your thoughts about what you like/dislike/hate/want to have in the LayoutControl, especially with regard to its customization capabilities. Any feedback is welcome here in the comments area or on the AgLayoutControl forum.

P.S. We are trying to get the video about the LayoutControl to the Show Off competition at PDC'2008. So if you are at PDC this year and get the opportunity to view the video, make sure to vote for us :-)

Just recently RAD was a modern abbreviation. Everybody was trying hard to make its tool fit the Rapid Application Development lifestyle. That life was so easy...

Now it is the XXI century. It brought us Canvas, StackPanel and Grid in Silverlight. They are newborns, they don't know what RAD means. But there are some controls born with the memory of the previous life and they feel your pain. You want them every time you need to write XAML just to modify your layout a little. And if you have a blank canvas in front of you, you understand that you will have to write a long story :-)

One such piece of technology - LayoutControl - uses modern advances without forgetting the easy RAD life of the past. Yes, you don't need to write any XAML with it. Actually you don't need a keyboard at all.

Don't believe us? Try it yourself! Just go to Area51 and click the LayoutControl link in the Controls group box. Preview the future of Silverlight layout management now.

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 :-)