XtraLayout Control: New Features for Runtime Layout Customization

In version 2008 vol 1, the XtraLayout control gives you greater flexibility for runtime layout customization. The control introduces three new features that allow you to make the UI more user-oriented.

Implementing a Custom Customization Form

You can now create your own Customization Form on the fly at design time, implementing custom logic or arranging customization controls in a custom manner. In addition to custom controls, with a few mouse clicks, you can add any of the standard controls supported by the default Customization Form to your own form:

These standard controls will be automatically integrated into the XtraLayout control's infrastructure. Here is an example of the custom Customization Form displaying the Button Panel, Hidden Item List and a custom 'Restore All' button:

See How to: Create custom customization form, for an example.

Creating a Custom "Fixed" Layout Item

There are a few predefined service layout items which are "fixed" to the Customization Form - Empty Space Item, Label, Separator and Splitter. These items are always available in the Customization Form, and when an end-user drags and drops them onto the XtraLayout control, they are cloned.

In the current version, you can easily add custom "fixed" items to the Customization Form. For instance, you can create a "fixed" item that represents a LinkLabel control. So, when and end-user drags and drops this item onto the form, an instance of the layout item containing a LinkLabel is created and added to the layout.

To implement a custom "fixed" item, create a LayoutControlItem class descendant and implement the IFixedLayoutControlItem interface.

public class MyFixedLabelItem : LayoutControlItem, IFixedLayoutControlItem {
    public MyFixedLabelItem() {
        this.controlCore = new LinkLabel();
        this.linkCore = "www.devexpress.com";
    }
    #region IFixedLayoutControlItem Members
    string IFixedLayoutControlItem.CustomizationName {
        get { 
            return "DevExpress Link"; 
        }
    }    
    Control IFixedLayoutControlItem.OnCreate() {
        TextVisible = false;
        ((LinkLabel)controlCore).LinkClicked += label_LinkClicked;
        return controlCore;
    }
    //...
    #endregion
}

The only other thing to do is to register the new item in the XtraLayout control via the RegisterFixedItemType method. The image below demonstrates a custom DevExpress Link "fixed" item below the Splitter item:

For a complete example, see How to: Create custom 'fixed' item.

Filtering Properties in the Customization Form

In customization mode, an end-user can modify specific properties of layout items via the Property Grid control embedded into the Customization Form. You can simplify the UI by filtering the Property Grid, i.e. providing access only to specific, main properties and hiding other, unimportant properties. And, with the current version, you can do this in a straightforward way.

First, create a wrapper object inheriting the BasePropertyGridObjectWrapper class that publishes the properties to be listed in the Property Grid:

public class MyLayoutControlItemPropertyWrapper : BasePropertyGridObjectWrapper {
    protected LayoutControlItem Item { 
        get { return WrappedObject as LayoutControlItem; } 
    }
    public string Text { 
        get { return Item.Text; } 
        set { Item.Text = value; } 
    }
    //...
}

And then, associate the wrapper object with a particular type of layout item:

layoutControl1.RegisterCustomPropertyGridWrapper(typeof(LayoutControlItem), typeof(MyLayoutControlItemPropertyWrapper));

Now, when selecting any layout item of this type, the Property Grid will list only the selected properties:

Refer to How to: Specify which properties to display in the Property Grid when selecting layout items, for a complete example.

Free DevExpress Products - Get Your Copy Today