You might have noticed that previous work on AgLayoutControl was concentrated on making the layout construction easier. For the 2009.2 release we started building on the foundation created previously and focused on UI construction.
Almost any nontrivial web application - be it a company web site, online store or line-of-business application - groups information or data entry fields in some form of group boxes. They can contain information about a product, weather, current stock prices, login fields, credit card information an so on. Some of these group boxes are organized in forms or panels. In many cases, information inside group boxes is represented by pairs of label and content, where content can be a read-only piece of information or an entry field. To make the UI look better and easier to use, labels of such elements are usually aligned relative to each other; not only within a group box, but also across different group boxes.
Right now in Silverlight 3 you have to use a lot of simple elements to construct such UI with group boxes, content with labels and align everything right. Then, if you need to modify such UI, you will need to reassign a lot of properties, move elements around, create new objects in some cases and realign labels to accommodate the changes you want to do. This is a lot of hard and time consuming work that you have to do and it does not add to the business value of your application.
Here comes your rescuer - AgLayoutControl. In the 2009.2 release we've added many new features to LayoutControl in order to make the creation and modification of such UI much, much easier.
Now you can present any LayoutGroup as a group box by setting just one property: LayoutGroup.View = LayoutGroupView.GroupBox. You might also want to set its Header property to have some text/object showing in the title of its group box:
The style of the group box (including header data template) can be modified via the GroupBoxStyle property:
Note that in the case shown above no control retemplating was needed - everything was done simply by setting the properties in style:
Here is an example of heavy retemplating of the group box's header (using the HeaderTemplate property through the GroupBoxStyle):
Of course you can still use drag & drop when in customization mode to move group boxes inside your LayoutControl, move elements inside, outside and around group boxes and have the modified layout stored to / restored from XML.
Now, in order to better organize the information you want to present, you can use a new control - LayoutItem. It is a content control that can hold any UIElement as a child/content and has a label (any object), which can be positioned to the left or to the top from the child element:
A wide array of properties is available to customize the look of LayoutItem including:
- label position;
- label horizontal/vertical alignment;
- label data template and style: LayoutItem's label is a special control which can be styled in addition to be defined by a DataTemplate - whatever is more convenient for you in each situation: for example you can change the label's foreground using a style without retemplating it using a data template;
- spacing between label and content.
If you have a lot of LayoutItems in your LayoutControl and you want to customize their look you wouldn't want to restyle every single LayoutItem - you would prefer to do it once and for all items or group of items. Fortunately LayoutGroup has a new property - ItemStyle, which does exactly that. Once you set it, all layout items inside a layout group (including items inside its child layout groups) will use this style, if they do not have another style explicitly set for them of course.
On the screen shot below ItemStyle is set for LayoutControl itself and now all layout items use it (in this case, they have a customized gray color for the label's foreground):
You might also have noticed on the above screen shot that the LayoutItem labels are aligned inside each layout group and even between layout groups - look for example at the "Interior Features" and the "Exterior Features" groups. Layout items with the same absolute horizontal offset will have their labels aligned. Because of that simple rule layout items from the different layout groups can have their labels aligned to give a UI a much better look.
However you can see that labels from the "Additional Information" group are not aligned with the labels from other groups. This group has its IsItemLabelsAlignmentOwner property set to True, which means that it handles label alignment for itself and its child groups and does not affect the alignment of labels in other groups. This can be useful sometimes, like in this case where information in the bottom group is too far from information in the first group and so their content should not be aligned relative to each other.
As you can see the addition of the "Group Box" feature to layout groups and layout items with aligned labels can help you build great UI much faster and easier than before.
Other new features in AgLayoutControl 2009.2
You are probably already familiar with the splitters available in LayoutControl and DockLayoutControl (you can see one between "Details" and 2 other groups to the right from it on the screen shot above). Previously you could use it to change the size of the element it's attached to and double click it to set the element's size to its desired size (based on the element's content). Now you can also use a double click to hide an element (set its size to zero), when it already has a desired size. This can be useful when you want to have more space for important information by hiding the non-important UI elements and don't want to resize any unneeded elements manually. After an element is hidden you can double click a splitter again to restore the element to its desired size or just drag a splitter to set the size you want.
When you start using layout controls from the 2009.2 release you will notice that their look was updated to our default DevExpress theme, so when you mix them together with our other controls you will get a consistent UI look.
The AgLayoutControl demo was also updated to show new features coming in the 2009.2 release. The look of the demo has been changed to match our other Silverlight demos, but it's still built completely with AgLayoutControl. You can explore new LayoutControl features, including layout groups represented as group boxes and layout items, by playing with the updated "LayoutControl" demo from the "Controls" demo group. A new demo - the "Real Estate" item from the "Demos" group - demonstrates the real-world use of these new features of LayoutControl.
Now please take a look at the demos, play with the new features and let us know what you think and how useful AgLayoutControl is for you. Have fun!