- Posted: Jan 23, 2013 at 6:00 AM
- 14,518 Views
Today's project by Adolfo Marinucci is one that you might of seen and not even known it. It's used in a number of places/app's and lets you create professional looking and interacting applications without you having to break open your piggy bank...
Like Visual Studio's docking behavior? It's Window Management? It's auto-hiding areas? Want a free [New BSD License (BSD)] WPF control that lets you build the same kind of thing?
AvalonDock is a WPF controls library which can be used to create a docking layout system like that is present in VisualStudio.
- Supports MVVM design
- Almost everything can be restyled
- Support for Windows Forms controls
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 represents the docking area where user can drag and drop documents and tools.
Looking at the below screenshot we can identify the AvalonDock components.
- DockingManager This is the core control in AvalonDock. It arranges contained panes, handles fly out panes and floating windows. In the above image the DockingManager object contains everything (in WPF terms) from the toolbar on top and the status bar on bottom. DockingManager class also handles saving and restoring layout.
- LayoutPanel This panel arranges children panes along a direction (selected with property Orientation) adding a resizer between them. Above a LayoutPanel with horizontal orientation arranges three panes: a LayoutAnchorablePane on left, a LayoutDocumentPane in the central area, and a LayoutDockablePane on right.
- LayoutAnchorablePane This layout element contains a collection of LayoutAnchorable obiects. Usually it arranges contents like a tabcontrol. In the above screenshot LayoutDockablePanes are the container of contents 'Strumenti' and 'Progetti' (Tools and Projects in English) on the left and the container of 'Classi' and 'Proprieta'' (Classes and Properties in English) on the right. A LayoutDockablePane can be auto-hidden (like that containing contents 'Errori'(errors), 'Lista Azioni'(action list) and 'Uscita'(output)) and can be dragged over the DockingManager as floating window or anchored to a border of the parent DockingManager.
- LayoutDocumentPane A pane of this type contains usually documents (object of type DocumentContent) but optionally can also contain DockableContents object like the above 'Tools' or 'Classes' contents. Above a document content is placed inside a ResizingPanel (horizontally orienteted) in the central area between the too DockablePane object just mentioned. A document pane can't be moved.
- LayoutAnchorable A anchorable content is the container of application controls. It's always contained in a pane (LayoutAnchorablePane or LayoutDocumentPane). In the above screen shot, LayoutAnchorable objects are the 'classi'(classes) object (which contains a SharpDevelop object), the 'strumenti'(tools) object but also the 'Errori' (errors) (which is in the AutoHidden state and is contained in a autohidden pane). A LayoutAnchorable as name suggests can be dragged away from its container pane and be repositioned into another esisting pane, or to a border of the parent DockingManager or left in a floating window (LayoutAnchorableFloatingWindow).
- LayoutDocument is a content that can be hosted only in a LayoutDocumentPane. It's a particular content because can't be anchored to a border but can be positioned only into a LayoutDocumentPane or floated in a LayoutDocumentFloatingWindow. Above LayoutDocument objects are the 'program.cs' or 'MainForm.cs' files.
- LayoutFloatingWindow It's a window that contains contents when are dragged or moved over a DockingManager. A LayoutFloatingWindow (and its specializations LayoutAnchorableFloatingWindow and LayoutDocumentFloatingWindow) derives from Window, and always contains a pane (LayoutAnchorablePane or LayoutDocumentPane) which in turn contains one or more contents (LayoutAnchorable or LayoutDocument). The LayoutFloatingWindow object is created directly from the DockingManager when user start a dragging operation for a content or a DockablePane or manually by code calling the LayoutContent.Float() method.
- LayoutPane It's a base class for LayoutDockablePane and LayoutDocumentPane. It provides common properties and methods for both.
- LayoutContent It's a base class for LayoutAnchorable and LayoutDocument. It provides common properties and methods for both.
Here's some snaps from the Dec 4,2012 samples release;
In firing up the MVVM code sample, there's a couple references you might have to fix up.
Just Nuget for AvalonDock, install and you're good to go. Matter of fact, if you install it via nuget you get a couple additional themes too.
The MVVM sample is simple, but that's just fine. Here's a snap of it
And here's a couple snaps of it using the different themes.
How hard is it to change a theme? Less than one line of code.
Okay, you're a diehard WinForm dev? Feel left out? Don't! There's WinForm support for you too!
So get Docking!