Use MVVM to Populate Dock Items

The DockManager control allows you to use the MVVM design pattern to populate the control with dock items (typically, with DocumentPane objects). With this technique, you assign a collection of dock items to the DockManager component, and specify a template used to render dock items.

Use the DockManager.ItemsSource property to bind a DockManager to a collection of objects that need to be rendered as dock items. The way these objects are converted to dock items is specified by the DockManager.ItemTemplate property.

To specify a template to render the content of dock items created from the DockManager.ItemsSource collection, use the DockManager.ItemContentTemplate property.

The following example from the IDE Layout demo uses the DockManager.ItemsSource property to bind the control to the Documents collection defined in the main View Model. Elements of this collection (IdeLayoutDocumentViewModel objects) are rendered as DocumentPane objects.

<mxd:DockManager Grid.Column="0" Grid.Row="1"
                 BorderThickness="0" 
                 ItemsSource="{Binding Documents}"
                 ItemContentTemplate="{views:IdeLayoutDocumentContentTemplate}">
    <mxd:DockManager.ItemTemplate>
        <DataTemplate DataType="vm:IdeLayoutDocumentViewModel">
            <mxd:DocumentPane Header="{Binding Header}"
                IsActive="{Binding IsActive}"
                CloseCommand="{Binding CloseCommand}"/>
        </DataTemplate>
    </mxd:DockManager.ItemTemplate>
    <mxd:DockGroup>
        <!-- ... -->
        <!-- Created DocumentPane objects are placed in the first DocumentGroup container. -->
        <mxd:DocumentGroup DockWidth="5*">
        </mxd:DocumentGroup>
    </mxd:DockGroup>
</mxd:DockManager>

public partial class IdeLayoutPageViewModel : PageViewModelBase
{
    public ObservableCollection<IdeLayoutDocumentViewModel> Documents { get; };
    //...
}

public partial class IdeLayoutDocumentViewModel : ObservableObject
{
    [ObservableProperty] private string header;
    [ObservableProperty] private string uri;
    [ObservableProperty] private bool isActive;
    [ObservableProperty] private ICommand closeCommand;
}

public class IdeLayoutDocumentContentTemplate : MarkupExtension, IDataTemplate
{
    //...
}

See the complete code of this example in the IDE Layout module of the Demo application.

Specifics of the MVVM Design Pattern Implementation

When DocumentPane objects are created from the DockManager.ItemsSource collection, they are automatically rendered as tabs in the first DocumentGroup container. Ensure that a DockManager has at least one DocumentGroup container.

Table of Contents

Use MVVM to Populate Dock Items

Specifics of the MVVM Design Pattern Implementation