AvalonDock

Our own development branch of the well known WPF document docking library

1,490

327

1,490

149

View on GitHub

Top Related Projects

wpftoolkit

3,975

All the controls missing in WPF. Over 1 million downloads.

Dragablz

2,263

Dragable and tearable tab control for WPF

Avalonia

27,472

Develop Desktop, Embedded, Mobile and WebAssembly apps with C# and XAML. The most popular .NET UI client technology

MaterialDesignInXamlToolkit

15,483

Google's Material Design in XAML & WPF, for C# & VB.Net.

Quick Overview

AvalonDock is a WPF docking library that provides a flexible and customizable docking system for Windows Presentation Foundation (WPF) applications. It allows developers to create applications with dockable windows, similar to those found in integrated development environments (IDEs) and other professional software tools.

Pros

Highly customizable and flexible docking layout
Supports multiple themes and styles
Active development and maintenance
Comprehensive documentation and examples

Cons

Limited to WPF applications (not compatible with other UI frameworks)
Learning curve for complex layouts and customizations
Some users report occasional performance issues with large numbers of docked windows
Limited cross-platform support (Windows-only)

Code Examples

Basic docking layout setup:

<ad:DockingManager x:Name="dockManager">
    <ad:LayoutRoot>
        <ad:LayoutPanel Orientation="Horizontal">
            <ad:LayoutAnchorablePane DockWidth="200">
                <ad:LayoutAnchorable Title="Tool Window">
                    <TextBlock Text="This is a tool window"/>
                </ad:LayoutAnchorable>
            </ad:LayoutAnchorablePane>
            <ad:LayoutDocumentPane>
                <ad:LayoutDocument Title="Document">
                    <TextBlock Text="This is a document"/>
                </ad:LayoutDocument>
            </ad:LayoutDocumentPane>
        </ad:LayoutPanel>
    </ad:LayoutRoot>
</ad:DockingManager>

Adding a new document programmatically:

var newDocument = new LayoutDocument
{
    Title = "New Document",
    Content = new TextBlock { Text = "This is a new document" }
};
dockManager.Layout.RootPanel.Children[1].AddChild(newDocument);

Saving and loading layout:

// Saving layout
var layoutSerializer = new XmlLayoutSerializer(dockManager);
using (var stream = new StreamWriter("layout.xml"))
{
    layoutSerializer.Serialize(stream);
}

// Loading layout
using (var stream = new StreamReader("layout.xml"))
{
    layoutSerializer.Deserialize(stream);
}

Getting Started

Install the AvalonDock NuGet package:
```
Install-Package Dirkster.AvalonDock
```

Add the AvalonDock namespace to your XAML:

xmlns:ad="https://github.com/Dirkster99/AvalonDock"

Create a basic docking layout in your XAML:

<ad:DockingManager>
    <ad:LayoutRoot>
        <ad:LayoutPanel>
            <ad:LayoutDocumentPane>
                <ad:LayoutDocument Title="Welcome">
                    <TextBlock Text="Welcome to AvalonDock!"/>
                </ad:LayoutDocument>
            </ad:LayoutDocumentPane>
        </ad:LayoutPanel>
    </ad:LayoutRoot>
</ad:DockingManager>

Customize and expand the layout as needed for your application.

Competitor Comparisons

wpftoolkit

3,975

All the controls missing in WPF. Over 1 million downloads.

Pros of wpftoolkit

More comprehensive set of controls and features
Regularly updated with new controls and improvements
Extensive documentation and community support

Cons of wpftoolkit

Commercial license required for some features
Larger footprint and potential performance impact
Steeper learning curve due to extensive feature set

Code Comparison

AvalonDock:

<ad:DockingManager>
    <ad:LayoutRoot>
        <ad:LayoutPanel>
            <ad:LayoutDocumentPane/>
        </ad:LayoutPanel>
    </ad:LayoutRoot>
</ad:DockingManager>

wpftoolkit:

<xctk:DockingManager>
    <xctk:LayoutRoot>
        <xctk:LayoutPanel>
            <xctk:LayoutDocumentPane/>
        </xctk:LayoutPanel>
    </xctk:LayoutRoot>
</xctk:DockingManager>

Both libraries provide similar docking functionality, but wpftoolkit offers a wider range of controls beyond docking. AvalonDock focuses specifically on docking and layout management, making it potentially more lightweight for projects that only require these features. The code structure is similar, with minor differences in namespace prefixes and potentially available properties or methods.

Dragablz

2,263

Dragable and tearable tab control for WPF

Pros of Dragablz

Lightweight and focused on drag-and-drop functionality for tabs
Easier to integrate into existing projects due to its simplicity
More active development and recent updates

Cons of Dragablz

Less comprehensive docking functionality compared to AvalonDock
Limited built-in layout management features
Smaller community and fewer resources available

Code Comparison

AvalonDock:

<DockingManager x:Name="dockManager">
    <LayoutRoot>
        <LayoutPanel Orientation="Horizontal">
            <LayoutAnchorablePane DockWidth="200">
                <LayoutAnchorable Title="Tool Window">
                    <!-- Content -->
                </LayoutAnchorable>
            </LayoutAnchorablePane>
        </LayoutPanel>
    </LayoutRoot>
</DockingManager>

Dragablz:

<dragablz:TabablzControl>
    <dragablz:TabablzControl.InterTabController>
        <dragablz:InterTabController />
    </dragablz:TabablzControl.InterTabController>
    <TabItem Header="Tab 1">
        <!-- Content -->
    </TabItem>
</dragablz:TabablzControl>

AvalonDock provides a more complex docking system with built-in layout management, while Dragablz focuses on simple, draggable tabs. AvalonDock is better suited for applications requiring advanced docking capabilities, whereas Dragablz is ideal for projects needing lightweight, customizable tab controls with drag-and-drop functionality.

Avalonia

27,472

Develop Desktop, Embedded, Mobile and WebAssembly apps with C# and XAML. The most popular .NET UI client technology

Pros of Avalonia

Cross-platform UI framework supporting Windows, macOS, Linux, iOS, Android, and WebAssembly
Modern, flexible architecture with XAML-based UI design
Active development and growing community support

Cons of Avalonia

Steeper learning curve for developers new to XAML-based frameworks
Smaller ecosystem compared to more established frameworks like WPF

Code Comparison

Avalonia XAML:

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Avalonia Window">
    <Button Content="Click me!" />
</Window>

AvalonDock XAML:

<ad:DockingManager x:Name="dockManager">
    <ad:LayoutRoot>
        <ad:LayoutPanel>
            <ad:LayoutDocumentPane/>
        </ad:LayoutPanel>
    </ad:LayoutRoot>
</ad:DockingManager>

Avalonia is a comprehensive UI framework for building cross-platform applications, while AvalonDock focuses specifically on providing docking functionality for WPF applications. Avalonia offers broader capabilities and platform support, but AvalonDock may be more suitable for developers specifically seeking docking features in WPF projects.

MaterialDesignInXamlToolkit

15,483

Google's Material Design in XAML & WPF, for C# & VB.Net.

Pros of MaterialDesignInXamlToolkit

Offers a comprehensive Material Design implementation for WPF
Provides a wide range of UI controls and components
Actively maintained with frequent updates and community support

Cons of MaterialDesignInXamlToolkit

Larger library size, potentially impacting application performance
Steeper learning curve due to extensive features and customization options
May require more effort to integrate with existing non-Material Design UI

Code Comparison

AvalonDock:

<ad:DockingManager>
    <ad:LayoutRoot>
        <ad:LayoutPanel>
            <ad:LayoutDocumentPane/>
        </ad:LayoutPanel>
    </ad:LayoutRoot>
</ad:DockingManager>

MaterialDesignInXamlToolkit:

<materialDesign:Card>
    <StackPanel>
        <TextBlock Text="Hello World" Style="{StaticResource MaterialDesignHeadline6TextBlock}"/>
        <Button Content="CLICK ME" Style="{StaticResource MaterialDesignRaisedButton}"/>
    </StackPanel>
</materialDesign:Card>

AvalonDock focuses on docking functionality, while MaterialDesignInXamlToolkit provides a broader set of UI components with Material Design styling. AvalonDock is more specialized for creating dockable layouts, whereas MaterialDesignInXamlToolkit offers a complete design system for WPF applications.

mui

2,598

Modern UI for WPF

Pros of MUI

More comprehensive UI framework with a wider range of components
Better documentation and community support
Actively maintained with frequent updates

Cons of MUI

Steeper learning curve due to its extensive feature set
Potentially larger bundle size for smaller projects
May require more configuration for custom styling

Code Comparison

AvalonDock (XAML):

<ad:DockingManager>
    <ad:LayoutRoot>
        <ad:LayoutPanel>
            <ad:LayoutDocumentPane/>
        </ad:LayoutPanel>
    </ad:LayoutRoot>
</ad:DockingManager>

MUI (React):

<Box sx={{ display: 'flex' }}>
  <Drawer variant="permanent" open={open}>
    {/* Drawer content */}
  </Drawer>
  <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
    {/* Main content */}
  </Box>
</Box>

While AvalonDock focuses on docking functionality for WPF applications, MUI provides a more general-purpose UI framework for React applications. AvalonDock offers a simpler API for creating dockable layouts, while MUI requires more setup but provides greater flexibility for overall application design.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Downloads	NuGet Packages
	Dirkster.AvalonDock
	Dirkster.AvalonDock.Themes.Aero
	Dirkster.AvalonDock.Themes.Expression
	Dirkster.AvalonDock.Themes.Metro
	Dirkster.AvalonDock.Themes.VS2010
	Dirkster.AvalonDock.Themes.VS2013 (see Wiki )

Master Branch

Continuous Integration

AvalonDock

Support this project with a :star: -report an issue, or even better, place a pull request :mailbox: :blush:

My projects Edi, Aehnlich, and many others (open source or commercial) are powered by this project.

AvalonDock is a WPF Document and Tool Window layout container that is used to arrange documents and tool windows in similar ways than many well known IDEs, such as, Eclipse, Visual Studio, PhotoShop and so forth. Here are some CodeProject articles:

This repository contains additional bug fixes and a feature added fork for: xceedsoftware/wpftoolkit version 3.2-3.6. Version 4.0 and later are developed indepentently, which is why this library (version 4.0 and later) uses the namespaces and library names that were used in AvalonDock 2.0 and earlier versions. But most importantly, the usage of this AvalonDock project remains free for both, commercial and open source users.

There is also an open source repository https://github.com/dotnetprojects/WpfExtendedToolkit with a fixed and stable version of all other (other than AvalonDock) components from the WPFToolKit.

Be sure to checkout the Wiki for more details.

Building AvalonDock from Source

This project supports multitargeting frameworks (NetCore 3 and .Net 4). This means that it requires Visual Studio Community 2019 or better to build.

Feature Added - Dark and Light VS 2013 Theme

Please review the Project Wiki to see more demo screenshots. All screenshots below are from the MLib based VS 2013 Dark (Accent Color Gold)/Light (Accent Color Blue) theme on Windows 10. Similar theming results should be possible with other theming libraries since the implementation follow these guidelines.

The Docking Buttons are defined in XAML, which ensures a good looking image on all resolutions, even 4K or 8K, and enables us to color theme consistently with the Window 10 Accent Color.

Description	Dark	Light
Dock Document
Dock Document
Dock Tool Window
Document
Tool Window

Theming

Using the AvalonDock.Themes.VS2013 theme is very easy with Dark and Light themes. Just load Light or Dark brush resources in you resource dictionary to take advantage of existing definitions.

    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="/AvalonDock.Themes.VS2013;component/DarkBrushs.xaml" />
    </ResourceDictionary.MergedDictionaries>

    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="/AvalonDock.Themes.VS2013;component/LightBrushs.xaml" />
    </ResourceDictionary.MergedDictionaries>

These definitions do not theme all controls used within this library. You should use a standard theming library, such as:

to also theme standard elements, such as, button and textblock etc.