SilverVlad

XAML is an easy thing to edit manually and a lot of you (including me) have been doing this for some time. But now we have a released version of Blend 3 and beta 2 of Visual Studio 2010 is available. So it's a good time to try a "visual" way to edit XAML - the RAD way as we'd call it several years ago :-)

In the 2009.3 release we're introducing the design-time support for AgLayoutControl in Blend 3. Let me describe this support in detail.

First of all we've put the right controls in the right place in the Assets pane:

Then we organized the properties of these controls in the Properties pane (all properties are in the appropriate categories, some are specifically positioned relative to each other to be easier to use, unneeded properties are hidden):

When you drag & drop controls from the Assets pane to the design surface their properties are initialized in such a way that it's easier to start working with them. The following layout was created just by dropping 3 LayoutGroups and 6 LayoutItems on a LayoutControl:

We provide customized context menus in order to make it more convenient to change some properties of our controls and their children:

Now we came to the most important design-time feature - you can finally change the layout of the LayoutControl using drag & drop in the same way you could do it before at runtime (animated GIF):

You can select and drag & drop any control inside LayoutControl, even complex ones which have their own children. For example, you can select a FlowLayoutControl inside a LayoutControl using its entire area, including its children.

You can press the Esc key to select a parent control of the selected LayoutControl's child. The 0..9 keys can be used to change the ItemSpace property of the selected LayoutGroup and the arrow keys can be used to change its Padding property.

All this functionality is available because, by default, LayoutControl is in customization mode at design-time. If, for some reason, you want to turn this mode off, you can do it via the LayoutControl's context menu shown at the "Objects and Timeline" pane or on the design surface of Blend 3.

In the 2009.3 release we've made sure you can restyle any element of any control in AgLayoutControl suite. Please take a look at the styling properties available for each control in the Properties pane (Miscellaneous category) or Object submenu of the Blend's main menu (Edit Additional Styles/Edit Additional Templates submenus). Note that Blend 3 does not allow you to restyle Panel-based controls (which layout controls are) through the context menu. For example, take a look at the styling properties available for LayoutControl:

We are working on the same level of design-time support in Visual Studio 2010. It will become available in the release build of 2009.3 or in one of its minor updates.

Please try this new design-time support for AgLayoutControl in Blend 3 and tell us what you think.

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!

We all at Developer Express truly believe that Silverlight will be a great platform for business application development. It is still very young and lacks some essential pieces, but even what it has right now provides a lot of power and flexibility and the upcoming Silverlight 3 will move it farther forward. It will bring enhancements in styling, data binding, performance and tooling and will allow us to create exceptional controls that will help you to create exceptional application using this beautiful framework. 2009 is a very important year for Silverlight and for us. Our plans this year will depend a lot on when and what exactly will be done in this space by Microsoft. We hope nobody will be disappointed this year: neither us, nor our customers.

We already have given 2 great free products to Silverlight development community and we will be enhancing them in the future. Quite soon we are going to release an update to AgDataGrid and AgMenu, which includes performance optimizations of the data grid, bug fixes and small enhancements in both products. We are working on documentation for them and plan to release it this year.

In the v2009 vol1 update we are going to release a beta of the professional AgDataGrid - AgDataGrid Pro (the current free version will named AgDataGrid Std). It will be based on the free AgDataGrid and include some major enhancements:

• Filtering support: filter row and column header filter drop down list
• Group row summary
• Several selection modes (by row, by cell)
• Our own in-place editors using our new AgEditors library

In the beginning AgEditors will contain the same types of editors that the free AgDataGrid has right now. In the later updates we are going to add more editors. In general our goal for AgDataGrid Pro is to have a parity with our WPF DXGrid and far exceed standard Silverlight DataGrid. We also would like to hear from you what features you want to see in AgDataGrid.

Last year we released a first beta of our unique product - AgLayoutControl. This year we will continue the innovation it brings to application development. We plan to implement these great features:

• GroupBox integration with the LayoutControl, so you can create dashboard-like applications, spend less time building entry forms and have a lightweight docking solution
• Label for each element placed on the layout control
• Tabbed layout groups
• Automatic TabIndex calculation for the layout control children based on its layout
• Design-time support (after Visual Studio gets live designer for Silverlight - most likely in one of the first public betas of Visual Studio 2010)

We are still going to publish new features of the AgLayoutControl as soon as they are ready, so you don't have to wait for a major update to try them out and provide a feedback, which we are interested in so much.

The idea behind AgLayoutControl is to provide the absolute solution for any layout needs you might have - be it general application layout or entry forms.

Another unique proposition we have is AgRichEdit. It will get an update in v2009 vol1 and we plan to release it as part of v2009 vol2.

We will spend more resources on our ORM tool - AgXPO. There are some interesting ideas we have in mind for it, which will make the development of business applications using Silverlight much easier and faster.

As you can see we plan to deliver some exciting products for Silverlight this year, so stay tuned and we hope you will like what you'll get.

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