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