Dock

Dock MVVM Guide

This guide explains how to get started with the MVVM version of Dock and describes the available features. It assumes you already have a basic Avalonia application.

The MVVM helpers provided by Dock.Model.Mvvm add INotifyPropertyChanged support to the core interfaces and expose a Factory base class that wires up commands and events for you. The sample project DockMvvmSample in the repository shows a full implementation. For a breakdown of interfaces such as IDockable or IRootDock see the Dock API Reference.

Step-by-step tutorial

The following steps walk you through creating a very small application that uses Dock with the MVVM helpers.

Create a new Avalonia project

dotnet new avalonia.app -o MyDockApp
cd MyDockApp

Install the Dock packages

dotnet add package Dock.Avalonia
dotnet add package Dock.Model.Mvvm

Create a factory and view models

Derive from Dock.Model.Mvvm.Factory and build the layout by composing docks. Documents and tools should derive from the MVVM versions of Document and Tool.

public class DockFactory : Factory
{
    public override IRootDock CreateLayout()
    {
        var document = new DocumentViewModel { Id = "Doc1", Title = "Document" };
        var documents = CreateList<IDockable>(document);

        var root = CreateRootDock();
        root.VisibleDockables = CreateList<IDockable>(
            new DocumentDock
            {
                VisibleDockables = documents,
                ActiveDockable = document
            });
        root.DefaultDockable = root.VisibleDockables[0];
        return root;
    }
}

Initialize the layout in your main view model
```
_factory = new DockFactory();
Layout = _factory.CreateLayout();
_factory.InitLayout(Layout);
```
InitLayout configures services such as ContextLocator and DockableLocator which the view models use to resolve their corresponding views. Override this method in your factory if you need to register additional mappings or perform custom initialization logic.

Add DockControl to MainWindow.axaml

<DockControl x:Name="Dock" Layout="{Binding Layout}" />

Run the project
```
dotnet run
```

Installing

Add the packages for Dock and the MVVM model to your project:

Install-Package Dock.Avalonia
Install-Package Dock.Model.Mvvm

Creating a layout

You usually derive from Factory and build the layout by composing docks. The sample DockFactory shows how tools and documents are created and added to a root layout. More customization options such as overriding CreateWindowFrom are covered in the Advanced Guide:

public override IRootDock CreateLayout()
{
    var doc1 = new DocumentViewModel { Id = "Document1", Title = "Document1" };
    var tool1 = new Tool1ViewModel { Id = "Tool1", Title = "Tool1" };

    var root = CreateRootDock();
    root.VisibleDockables = CreateList<IDockable>(
        new DocumentDock
        {
            VisibleDockables = CreateList<IDockable>(doc1),
            ActiveDockable = doc1
        },
        new ToolDock
        {
            VisibleDockables = CreateList<IDockable>(tool1),
            ActiveDockable = tool1,
            Alignment = Alignment.Left
        }
    );
    return root;
}

Docking operations

FactoryBase exposes many methods to manipulate the layout at runtime. Some of the most useful ones are:

AddDockable, InsertDockable and RemoveDockable to manage content.
MoveDockable and SwapDockable for rearranging items.
PinDockable/UnpinDockable to keep tools in the pinned area.
FloatDockable to open a dockable in a separate window.
Commands such as CloseDockable, CloseOtherDockables or CloseAllDockables.

// Example: add a new document at runtime
var newDoc = new DocumentViewModel { Id = "Doc2", Title = "Another" };
_factory.AddDockable(documentDock, newDoc);
_factory.SetActiveDockable(newDoc);

Events

FactoryBase also publishes events for most actions. They allow you to observe changes in active dockable, pinned state or window management.

_factory.DockableAdded += (_, e) => Console.WriteLine($"Added {e.Dockable?.Id}");

Next steps

Use the MVVM sample as a starting point for your application. You can extend the factory to create custom docks, documents and tools. See the Advanced Guide for details on overriding factory methods and consult the Dock API Reference for a complete list of interfaces.

For an overview of all guides see the documentation index.

This site is open source. Improve this page.