SilverVlad

Coming in DXperience v2010 vol 1 are two big new features of AgLayoutControl: tabbed groups and collapsible groups.

Tabbed Groups

Before you could make LayoutGroup look like an invisible (lookless) container or like a group box:

Now, just by changing one property, you can turn it into a tabbed group:

Notice that every child of the tabbed LayoutGroup is now represented by a separate tab. The SelectedTabIndex property can be used to determine and set the active tab index.

There are two ways to define a tab's header:

1. Header and HeaderTemplate properties - can be used for LayoutGroup that is a child of a tabbed group.
2. TabHeader and TabHeaderTemplate attached properties - can be used for any type of control (including LayoutGroup) that is a child of a tabbed group.

I used the Header property for the first child (LayoutGroup) of my tabbed group and the TabHeader property for the second one (LayoutItem):

        <lc:LayoutControl Name="layoutControl1">
            <lc:LayoutGroup Header="Information" Name="layoutGroup1" View="Tabs" VerticalAlignment="Top">
                <lc:LayoutGroup Orientation="Vertical" Header="Personal Information">
                    <lc:LayoutItem Label="First Name:" Name="layoutItem1">
                        <dxe:TextEdit Name="textEdit1" />
                    </lc:LayoutItem>
                    <lc:LayoutItem Label="Last Name:" Name="layoutItem2">
                        <dxe:TextEdit Name="textEdit2" />
                    </lc:LayoutItem>
                    <lc:LayoutItem Label="Age:" Name="layoutItem4">
                        <dxe:TextEdit Name="textEdit4" />
                    </lc:LayoutItem>
                </lc:LayoutGroup>
                <lc:LayoutItem Label="Address:" Name="layoutItem3" LabelPosition="Top"
                               VerticalAlignment="Stretch" lc:LayoutControl.TabHeader="Contact Information">
                    <dxe:TextEdit Name="textEdit3" />
                </lc:LayoutItem>
            </lc:LayoutGroup>
        </lc:LayoutControl>

Our DXTabControl is used internally to visually represent a tabbed group. You can use the TabsStyle and TabStyle properties of LayoutGroup to customize the look of this tab control and its tabs. Changing the same properties of LayoutControl will affect all tabbed groups inside this LayoutControl.

            <lc:LayoutGroup Header="Information" Name="layoutGroup1" View="Tabs" VerticalAlignment="Top">
                <lc:LayoutGroup.TabsStyle>
                    <Style TargetType="dx:DXTabControl">
                        <Setter Property="View">
                            <Setter.Value>
                                <dx:TabControlMultiLineView HeaderLocation="Right"/>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </lc:LayoutGroup.TabsStyle>

And of course you can drag&drop controls inside a tab, from the tab and to the tab from any other LayoutGroup. This functionality is available at both design-time and runtime (via the customization mode).

Collapsible Groups

Now you can add the collapsing capability to any LayoutGroup represented as a group box (View = GroupBox). One property makes this happen: IsCollapsible = True. Another property - IsCollapsed - allows you to collapse/expand a group:

I hope these new features of LayoutControl will allow you to build complex UI even easier than before.