Quick Start

This short guide shows how to set up Dock in a new Avalonia application. You will install the NuGet packages, create a minimal layout and run it.

Step-by-step tutorial

Create a new Avalonia project

dotnet new avalonia.app -o DockQuickStart
cd DockQuickStart

Install the Dock packages

dotnet add package Dock.Avalonia
dotnet add package Dock.Avalonia.Themes.Fluent
# or use Dock.Avalonia.Themes.Simple

Install the model layer that matches the approach you use below:

# Option A (code-first factory)
dotnet add package Dock.Model.Mvvm

# Option B (XAML layout, ItemsSource, DocumentTemplate)
dotnet add package Dock.Model.Avalonia

Optional packages for specific scenarios:

# For serialization (choose one):
dotnet add package Dock.Serializer.Newtonsoft        # JSON (Newtonsoft.Json)
dotnet add package Dock.Serializer.SystemTextJson    # JSON (System.Text.Json) 
dotnet add package Dock.Serializer.Protobuf          # Binary (protobuf-net)
dotnet add package Dock.Serializer.Xml               # XML
dotnet add package Dock.Serializer.Yaml              # YAML

# For dependency injection:
dotnet add package Microsoft.Extensions.DependencyInjection

# For diagnostics and debugging:
dotnet add package Dock.Avalonia.Diagnostics

See dependency injection for manual Dock registrations.

Set up View Templates (Optional)

If you rely on view models via Context, register a view locator or data templates for your document and tool views. If you define Document.Content or use DocumentTemplate in XAML, you can skip this step.

Option A: Static View Locator with Source Generators (Recommended)

Add the StaticViewLocator package:

dotnet add package StaticViewLocator

Create a ViewLocator.cs file:

using System;
using Avalonia.Controls;
using Avalonia.Controls.Templates;
using Dock.Model.Core;
using StaticViewLocator;

namespace DockQuickStart;

[StaticViewLocator]
public partial class ViewLocator : IDataTemplate
{
    public Control? Build(object? data)
    {
        if (data is null)
            return null;

        var type = data.GetType();
        if (s_views.TryGetValue(type, out var func))
            return func.Invoke();

        throw new Exception($"Unable to create view for type: {type}");
    }

    public bool Match(object? data)
    {
        if (data is null)
        {
            return false;
        }

        var type = data.GetType();
        return data is IDockable || s_views.ContainsKey(type);
    }
}

Option B: Convention-Based View Locator (Avalonia Template Style)

using System;
using Avalonia.Controls;
using Avalonia.Controls.Templates;
using Dock.Model.Core;

namespace DockQuickStart;

public class ViewLocator : IDataTemplate
{
    public Control? Build(object? data)
    {
        if (data is null)
            return null;

        var name = data.GetType().FullName!.Replace("ViewModel", "View");
        var type = Type.GetType(name);

        if (type != null)
            return (Control)Activator.CreateInstance(type)!;

        return new TextBlock { Text = "Not Found: " + name };
    }

    public bool Match(object? data)
    {
        if (data is null)
        {
            return false;
        }

        if (data is IDockable)
        {
            return true;
        }

        var name = data.GetType().FullName?.Replace("ViewModel", "View");
        return Type.GetType(name) is not null;
    }
}

Add Dock styles (and View Locator if used)

Reference the theme and register the view locator in App.axaml if you use one:

<Application xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="using:DockQuickStart"
             x:Class="DockQuickStart.App">

  <Application.DataTemplates>
    <local:ViewLocator />
  </Application.DataTemplates>

  <Application.Styles>
    <FluentTheme Mode="Dark" />
    <DockFluentTheme />
  </Application.Styles>
</Application>

Add a simple layout

Option A: Traditional MVVM Approach

Create a DockFactory that derives from Dock.Model.Mvvm.Factory and returns a basic layout:

using Dock.Model.Core;
using Dock.Model.Mvvm;
using Dock.Model.Mvvm.Controls;

public class DockFactory : Factory
{
    public override IRootDock CreateLayout()
    {
        var document = new Document { Id = "Doc1", Title = "Document" };

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

Option B: Modern ItemsSource Approach (Recommended)

For more dynamic document management, use the ItemsSource approach. First, create a simple document model:

using System.ComponentModel;
using System.Runtime.CompilerServices;

public class FileDocument : INotifyPropertyChanged
{
    private string _title = "Untitled";
    private string _content = "";

    public string Title
    {
        get => _title;
        set => SetProperty(ref _title, value);
    }

    public string Content
    {
        get => _content;
        set => SetProperty(ref _content, value);
    }

    public bool CanClose { get; set; } = true;

    public event PropertyChangedEventHandler? PropertyChanged;

    protected virtual void OnPropertyChanged([CallerMemberName] string? propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    protected bool SetProperty<T>(ref T field, T value, [CallerMemberName] string? propertyName = null)
    {
        if (EqualityComparer<T>.Default.Equals(field, value)) return false;
        field = value;
        OnPropertyChanged(propertyName);
        return true;
    }
}

Then create a MainWindow view model:

using System.Collections.ObjectModel;

public class MainWindowViewModel
{
    public ObservableCollection<FileDocument> Documents { get; } = new()
    {
        new FileDocument { Title = "Document 1", Content = "Content of document 1" },
        new FileDocument { Title = "Document 2", Content = "Content of document 2" }
    };
}

For the ItemsSource approach, set up the layout in XAML (MainWindow.axaml):

<Window x:Class="DockQuickStart.MainWindow"
        xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dock="https://github.com/avaloniaui">
<DockControl InitializeLayout="True" InitializeFactory="True">
    <DockControl.Factory>
        <Factory />
    </DockControl.Factory>
    <RootDock>
        <DocumentDock ItemsSource="{Binding Documents}">
            <DocumentDock.DocumentTemplate>
                <DocumentTemplate>
                    <TextBox Text="{Binding Context.Content}" AcceptsReturn="True" />
                </DocumentTemplate>
            </DocumentDock.DocumentTemplate>
        </DocumentDock>
    </RootDock>
</DockControl>
</Window>

Initialize the view model in MainWindow.axaml.cs:

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        DataContext = new MainWindowViewModel();
    }
}

For Traditional MVVM (Option A), initialize the layout in MainWindow.axaml.cs:

public partial class MainWindow : Window
{
    private readonly DockFactory _factory = new();

    public MainWindow()
    {
        InitializeComponent();
        var layout = _factory.CreateLayout();
        _factory.InitLayout(layout);
        Dock.Layout = layout;
    }
}

And add a DockControl placeholder to MainWindow.axaml:

<DockControl x:Name="Dock" />

💡 Tip: The ItemsSource approach (Option B) is recommended for most scenarios as it provides automatic document management, data binding, and easier maintenance. See the DocumentDock ItemsSource guide for more details.

For instructions on mapping documents and tools to views see the Views guide.

Run the application
```
dotnet run
```

The window should show document tabs that can be opened, closed, and managed automatically. The ItemsSource approach automatically creates document instances from your data models and keeps them synchronized with the collection.

For more advanced scenarios including tools, complex layouts, and custom content, see:

DocumentDock ItemsSource guide - Complete ItemsSource documentation
Document and Tool Content Guide - Comprehensive content setup
MVVM guide - Traditional MVVM approach
Complex layout tutorials - Multi-pane layouts

Table of Contents

Quick Start

Step-by-step tutorial