XtraLayout Control: New Features for Runtime Layout Customization

28 April 2008

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:

Implementing a Custom Customization 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:

Implementing a Custom Customization Form

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;

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:

Creating a Custom Fixed Layout 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:

Filtering Properties in the Customization Form

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

6 comment(s)
Mesut KOSUCU_1

Thanks for the great feature...

BTW, I can not display community and blog entries on Firefox. does anyone have same problem?

28 April, 2008

Nice feature...


I'm using FireFox and not problems here!. See the following image:


28 April, 2008

Very helpful article, Alan. Thank you.

29 April, 2008
Conrad Akunga

Exactly what I needed. Off topic question ... can the XtraLayout make better use of the datasource fields when naming the controls? So instead of TextEdit1, TextEdit2 etc it named them CityTextEdit and NameEditBox?

1 May, 2008
Roman Kalachik (DevExpress)

Hi Conrad,

We have implemented your request in the DataLayoutControl v8.1.3. Thank you.

4 May, 2008
Conrad Akunga

Forgot to come back and acknowledge. Fantastic stuff. Exactly what the doctor ordered.

I think the same sort of logic would work wonders on the XtraBars. Since xtrabars forces you to give a button a caption first, for new buttons would it be possible to use the caption to name the control. So when I type File in the caption, the control is named FileMenuButton for instance? Naturally this should only work the first time

23 July, 2008

Please login or register to post comments.