Table of Contents
Table of Contents
Saving and Loading Layout

The easiest way to create a docking UI is through XAML. However it is often desired to save the layout after user has resized or rearranged the layout. This can be easily achieved by calling DockContainer's SaveLayoutXml method.

Copy 
//Save Dock Container Layout
string layoutXml = DockContainer1.SaveLayoutXml();

SaveLayoutXml returns a string that contains the layout information in XML. To restore the layout, simply call DockContainer's LoadLayoutXml method:

Copy 
//Load a previously saved layout
DockContainer1.LoadLayoutXml(layoutXml);

Alternatively, you can also use LoadLayout and SaveLayout to load and save layout. These two functions load and save layout XML directly from/to a file.

It is typical that your DockItem will have some additional state information that needs to be saved and loaded along with SaveLayoutXml/LoadLayoutXml. For example, if you have a Visual Studio like UI that currently have multiple documents opened with each opened document represented by a DockItem, then usually you will want to save the file name of each opened document so that when LoadLayoutXml is called, you can reload each file.

To facilitate this DockItem provides two routing events: LoadState and SaveState and one dependency property: StateData. You can handle LoadState event to save additional state information in StateData property. The value of this property will be saved by SaveLayoutXml. Later when LoadLayoutXml is called, it restores all the DockItem objects first, then it loads each DockItem's StateData. After that it fires LoadState event for each DockItem. Inside your LoadState event handler you can restore your state based on state data you previously saved. Because both LoadState and SaveState are routed event, you can handle it on a parent element. For example, handling it on the containing DockContainer element.

Copy 
<eo:DockContainer 
    eo:DockItem.SaveState="DockContainer_SaveState" 
    eo:DockItem.LoadState="DockContainer_LoadState">
    .....
</eo:DockContainer>

Here you must implement function SaveItemState and LoadItemState to convert your state information into a single string, and to restore state information from a single string respectively. EO.Wpf.DockItem provides two helper functions EncodeStateData and EncodeStateData for this purpose. To use these two functions, first declare a type for the state data. For example, a multiple document text editor using the docking UI may wish to remember the name of the file being edited, and the current cursor position when the layout is saved. To achieve this you can create a type that holds this information:

Copy 
//Data type for the state information
[Serializable()]
private class StateData
{
    public string FileName;
    public int CursorOffset;
}

Note the type must be marked with Serializable attribute as EncodeStateData and DecodeStateData uses BinaryFormatter to serialize and deserialize data.

Once you have the above type declared, you can then implement SaveItemState and LoadItemState as such:

Copy 
//Save state data as string
private string SaveItemState(DockItem item)
{
    //Collect state data from your UI
    StateData data = new StateData();    
    data.FileName = ....
    data.CursorOffset = ....
    
    //Encode state data
    return DockItem.EncodeStateData(data);
}

private void LoadItemState(DockItem item, string stateData)
{
    //Decode the previously saved state data
    StateData data = (StateData)DockItem.DecodeStateData(stateData);
    
    //Initialize your UI based on the state data
    ....
}