Dock Layout Manager: Performance Enhancements

• Apr 23, 2025
• 4 minutes to read

This topic contains recommendations that help improve DockLayoutManager performance.

Iterate Over Multiple Panels

The DockLayoutManager updates its layout after you perform the following operations:

• Add or remove a Panel or a Group.
• Close or hide a Panel or a Group.
• Make a Panel or a Group floating.

When you perform multiple operations at once, wrap them with DockLayoutManager.BeginUpdate() and DockLayoutManager.EndUpdate() methods to reduce processing time. The DockLayoutManager updates its layout only after the last iteration.

ViewModel.cs

public class ViewModel : ViewModelBase {
    public ICustomService DockLayoutManagerService { get { return this.GetService<ICustomService>(); } }

    // ...

    void AddNew() {
        DockLayoutManagerService.BeginUpdate();

        // perform multiple operations here

        DockLayoutManagerService.EndUpdate();
    }
}

Add Panels to DockItem

The code sample below creates Layout Panels and adds them to the LayoutGroup.

ViewModel.cs

using DevExpress.Mvvm;
using System.Collections.ObjectModel;

// ...
public class ViewModel : ViewModelBase {
    public ICustomService DockLayoutManagerService { get { return this.GetService<ICustomService>(); } }

    public ObservableCollection<DataItem> Source {
        get { return GetValue<ObservableCollection<DataItem>>(); }
        set { SetValue(value); }
    }

    // ...

    void AddNew() {
        DockLayoutManagerService.BeginUpdate();
        for (int i = 0; i < 30; i++) {
            Source.Add(new DataItem() { Name = "Name" + i.ToString(), Value = i, TargetName = "host" });
        }
        DockLayoutManagerService.EndUpdate();
    }
}

DataItem.cs

DataItem.cs

using DevExpress.Mvvm;
using DevExpress.Xpf.Docking;

namespace DockingThreads {
    public class DataItem : BindableBase, IMVVMDockingProperties {
        public string Name {
            get { return GetValue<string>(); }
            set { SetValue(value); }
        }
        public int Value {
            get { return GetValue<int>(); }
            set { SetValue(value); }
        }
        public bool IsHidden {
            get { return GetValue<bool>(); }
            set { SetValue(value); }
        }

        public string TargetName { get; set; }

        public override string ToString() {
            return Name;
        }
    }
}

CustomService.cs

CustomService.cs

using DevExpress.Mvvm.UI;
using DevExpress.Xpf.Docking;

namespace DockingThreads
{

    public interface ICustomService {
        void BeginUpdate();
        void EndUpdate();
    }

    public class CustomService : ServiceBaseGeneric<DockLayoutManager>, ICustomService {
        public void BeginUpdate() {
            this.AssociatedObject.BeginUpdate();
        }
        public void EndUpdate() {
            this.AssociatedObject.EndUpdate();
        }
    }
}

Change the Panel Type to Autohidden

The code sample below creates Layout Groups and hides them on the left side of the application.

ViewModel.cs

using DevExpress.Mvvm;

// ...

void HideAll() {
    DockLayoutManagerService.BeginUpdate();
    Source.ToList().ForEach(x => x.IsHidden = true);
    DockLayoutManagerService.EndUpdate();
}

DataItem.cs

DataItem.cs

using DevExpress.Mvvm;
using DevExpress.Xpf.Docking;

namespace DockingThreads {
    public class DataItem : BindableBase, IMVVMDockingProperties {
        public string Name {
            get { return GetValue<string>(); }
            set { SetValue(value); }
        }
        public int Value {
            get { return GetValue<int>(); }
            set { SetValue(value); }
        }
        public bool IsHidden {
            get { return GetValue<bool>(); }
            set { SetValue(value); }
        }

        public string TargetName { get; set; }

        public override string ToString() {
            return Name;
        }
    }
}

CustomService.cs

CustomService.cs

using DevExpress.Mvvm.UI;
using DevExpress.Xpf.Docking;

namespace DockingThreads
{

    public interface ICustomService {
        void BeginUpdate();
        void EndUpdate();
    }

    public class CustomService : ServiceBaseGeneric<DockLayoutManager>, ICustomService {
        public void BeginUpdate() {
            this.AssociatedObject.BeginUpdate();
        }
        public void EndUpdate() {
            this.AssociatedObject.EndUpdate();
        }
    }
}

Dock / Undock Operations

This section describes how to speed up dock, undock, and drag-and-drop operations.

Logical Layout Structure

When you dock/undock a panel, the visual tree of its child elements is rebuilt. To preserve the structure of the logical tree and increase the speed of dock/undock operations, set the DockLayoutManager.LogicalTreeStructure property to Optimized.

XAML

<dx:ThemedWindow ...
    xmlns:dxdo="http://schemas.devexpress.com/winfx/2008/xaml/docking" 
    xmlns:dxcore="http://schemas.devexpress.com/winfx/2008/xaml/core">
    <Grid>
        <dxdo:DockLayoutManager LogicalTreeStructure="Optimized">
            <!-- ... -->
        </dxdo:DockLayoutManager>
    </Grid>
</dx:ThemedWindow>

Drag and Drop

Application performance decreases when you drag and drop a panel with complex content. To improve performance, disable the ShowContentWhenDragging option so that only the panel border is displayed during the drag-and-drop operation.

XAML

<dx:ThemedWindow ...
    xmlns:dxdo="http://schemas.devexpress.com/winfx/2008/xaml/docking" 
    xmlns:dxcore="http://schemas.devexpress.com/winfx/2008/xaml/core">
    <Grid>
        <dxdo:DockLayoutManager ShowContentWhenDragging="False">
            <!-- ... -->
        </dxdo:DockLayoutManager>
    </Grid>
</dx:ThemedWindow>

Cache Tabs

Application performance decreases when you switch between DocumentGroup tabs with complex child items. Use the TabContentCacheMode property to cache opened tabs and improve DockLayoutManager performance.

XAML

<dx:ThemedWindow
    xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core" 
    xmlns:dxdo="http://schemas.devexpress.com/winfx/2008/xaml/docking">
    <dxdo:DockLayoutManager>
        <dxdo:LayoutGroup>
            <dxdo:DocumentGroup TabContentCacheMode="CacheTabsOnSelecting">
                <dxdo:DocumentPanel Caption="Panel1">
                    <dxsample:UserControl1 />
                </dxdo:DocumentPanel>
                <dxdo:DocumentPanel Caption="Panel2">
                    <dxsample:UserControl1 />
                </dxdo:DocumentPanel>
            </dxdo:DocumentGroup>
        </dxdo:LayoutGroup>
    </dxdo:DockLayoutManager>
</dx:ThemedWindow>