Layout Control Elements

Editor-Label Pairs

The LayoutItem control can be used to better organize and present information. It is a container control that can contain any UIElement as well as a label control (any object), which can be positioned to the left or to the top of the child element.

The looks of LayoutItems are customizable using the following properties:

• Label position.
• Label horizontal and vertical alignment.
• Label data template and style: LayoutItem's label is a unique control which can be styled or defined by a DataTemplate. For instance, you can change the label's foreground color using a style without retemplating it using a data template.
• Spacing between label and content.

When using a number of LayoutItems in a LayoutControl, you can quickly apply appearance customizations to all the items or a selected group of items. Our LayoutGroup class introduces a new property which once set, enables all layout items inside a layout group to use this style. This including items inside child layout groups and assumes that none of the LayoutItems have another style explicitly defined for them.

In the following screenshot, all layout items have the same gray foreground color.

You might also have noticed in the screenshot above that labels are aligned inside each layout group and even between layout groups - see the "Interior Features" and "Exterior Features" groups. Layout items with the same absolute horizontal offset will have their labels aligned, giving the UI a much better appearance.

You can override label alignment for individual groups...as demonstrated in the "Additional Information" group.

Group Boxes

Nearly all applications - be it a company web site, online store or line-of-business application - group information or data entry fields into group boxes of some kind. These group boxes typically contain a set of label-data editor pairs, where content can be a read-only piece of information or an entry field. To make the UI look elegant and easier to use, labels are usually aligned relative to one another...not only within the group box, but also across different group boxes.

When using WPF, you have to employ many simple elements to construct such a UI and properly align everything. If you then need to modify your UI, you will be forced to reassign quite a few properties, move elements around, create new objects and realign labels. As you can imagine, this is time-consuming work that does not add real business value to your application.

DXLayoutControl addresses these difficult issues by creating and maintaining your control layout...You can now present any LayoutGroup as a group box by setting a single property. The Header property helps you specify the content to be displayed within the group header. Any text or object can be embedded within the header.

The style of the group box (including header data template) can be easily modified by simply setting styling properties:

Here is another example that uses group header templates.

Of course you can still use drag and drop when in customization mode to move group boxes inside your LayoutControl, move elements within or between groups and have the modified layout stored to / restored from XML.

Collapsible Groups

Each layout group exposes a property that allows you to turn a group into a collapsible panel. In this instance, end-users can click the Collapse/Expand button within the group header to minimize the group and then restore its initial size. When doing so, the layout is automatically updated to properly accommodate neighboring elements.

Tabbed Groups

You can also convert a group into a tabbed container. By doing so, the group's children will be transformed into tabs.