AvalonDock 2.0 allows to create an interface for WPF very similar to Visual Studio GUI. It's important to understand that has been developed with this in mind so it's most suited for projects that have documents and tools.
In this tutorial I'll show you how to start using with AvalonDock. Below information are relative to version 2.0 and connot be valid for earlier versions.

AvalonDock is composed of a layout model, a series of controls representing the views and a DockingManager class which reppresents the docking area where user can drag and drop documents and tools.

To start create a new .NET 4/.NET 4.5 solution and add a reference to AvalonDock.dll (directly or using NuGet). Then add the AD namespace to the MainWindow.xaml.
Under the root grid place the DockingManager and a sample layout:

<Window x:Class="MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:avalonDock="http://avalondock.codeplex.com"
        Title="MainWindow" Height="434" Width="684">
    <Grid>
        <avalonDock:DockingManager x:Name="dockingManager">
            <avalonDock:LayoutRoot>
                <avalonDock:LayoutPanel Orientation="Horizontal">
                    <avalonDock:LayoutDocumentPane/>
                    <avalonDock:LayoutAnchorablePane DockWidth="150">
                        <avalonDock:LayoutAnchorable Title="Sample Tool Pane">
                             <TextBox/>
                        </avalonDock:LayoutAnchorable>
                    </avalonDock:LayoutAnchorablePane>
                </avalonDock:LayoutPanel>
            </avalonDock:LayoutRoot>
        </avalonDock:DockingManager>
    </Grid>
</Window>

The DockingManager class is the core of AvalonDock. It's responsible to create and manage the layout. The layout is defined as a tree of ILayoutElement objects. The root is represented by the LayoutRoot class which is composed by four foundamental children:
1) The root panel accessible thru the Root property points to the main LayoutPanel.

Last edited Aug 3, 2012 at 9:42 PM by adospace, version 1

Comments

rajmittal27 Apr 1 at 8:45 AM 
its a great effort by the team. Appriciate the hard work.
Can you suggest when can we have the full documentation for 2.0?

smokeAndMirrors Jan 28 at 10:17 AM 
How can I create a LayoutAnchorable (it's an error window) that is not auto-hide, is visible, and is initially docked at the bottom of the LayoutRoot?

RickNZ Dec 9, 2012 at 11:18 AM 
Great project. Looking forward to Part 2 of the Getting Started Guide (and beyond!). Would be helpful if you could post the XAML for the SharpDevelop window at the top of the Getting Started Guide for AvalonDock 2.0.

Sciencefiction68 Oct 31, 2012 at 11:36 AM 
And is it possible to create different forms in same wpf project and integrate them to avalon dock so that they will dock automatically. I mean for instance i want to create a solution explorer. But i dont want its code to be written inside Avalon dock. I want to create an interdependent form and integrate it to Avalon dock. So that when user clicks view > Solution explorer the form i created outside the main window code is if it was anchor able pane ...

Sciencefiction68 Oct 17, 2012 at 10:29 PM 
How do i ad images to tap names? like in picture abov ??

Sciencefiction68 Oct 17, 2012 at 12:49 AM 
Hi. First of all thanx for such a nice work!:) im new in wpf and not so familar with xaml. lets say i added toolboxess and other stuff and have a menu view. I want to make some items in view menu which will display those toolboxess if items are selected. how do i accomplish that?
second question what should i do in order of all new document which are opened by my UI will appear inside document pane?

kcbtdev Sep 24, 2012 at 5:12 PM 
How is the restorelayout and savelayout functions performed now in 2.0? In the documentation it mentions in a second part will include this but cannot seem to find any links to part 2.

KeithV Sep 7, 2012 at 5:04 PM 
shaggyygi97, Try setting the CanHide property to false. CanClose is just for the context menu, CanHide is for the 'X'

macgeek911 Sep 7, 2012 at 4:53 PM 
This is a great project. Even better is that you sir are giving it justice by providing awesome documentation to help users get started. I am a WPF newbie and plan on using AvalonDock for a menu system builder tool that me and my college buddy are working on. The tool will allow users to visually create menu-systems for Windows Desktop and WinPhone game projects. Planning on making the project available to all via codeplex once completed.

shaggygi97 Sep 6, 2012 at 12:32 AM 
I set a few of the layouts CanClose properties to False, but was still able to close them when pressing 'X'. Is this a bug or should this be a specific type of layout?