Dock Layout Manager: Performance Enhancements

• Mar 01, 2024
• 4 minutes to read

This topic contains recommendations that help you to improve DockLayoutManager performance.

Iterate Over Multiple Panels

The DockLayoutManager updates its layout after you do 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 these operations in a multi-thread loop, wrap them with the DockLayoutManager.BeginUpdate() and DockLayoutManager.EndUpdate() methods to reduce operation processing time. In this instance, the DockLayoutManager updates its layout only after the last iteration.

Add Panels To DockItem

The code sample below creates LayoutPanels 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 LayoutGroups 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>