AvalonDock | development branch of the well known WPF document | Theme library

Beating my head against the wall for the entire week and I forgot to try the simplest binding method.

Thanks to @Lei Yang, for reminding me (at the comment section):

Since I can create the helper:LayoutInitializer over my ViewModel, then obviously I can bind my entire DockingManager.LayoutUpdateStrategy to that created helper:LayoutInitializer class.

Instead of writing the XAML code to create that helper:LayoutInitializer class:

The AvalonDock implementation is pretty weird. I remember having some troubles too when I had to use this control in a project. I think I know this control quite well. It is very badly implemented, in my opinion. Because they, for some reason, decided to implement this control itself using MVVM instead of making it simply MVVM ready. This makes it very inconvenient to use in advanced scenarios.
Semantics are also quite confusing. For example, containers are not the controls that render data. Containers are assigned to the Model property of the controls. Data is not assigned to the DataContext. But it looks good.

Also, the tab header placement behavior is broken (only allows tab headers at the bottom). My fix could be of interest for you, especially in context of dynamic tab header placement. See the Style below to get the expected tab header placement behavior. It simply wraps the content of the LayoutAnchorablePaneControl into a DockingPanel and rotates the header host, so that you get tab header alignment you have in Visual Studio (stacked by width). That's all. If you wish to stack the headers by their height (no rotation) simply replace the AnchorablePaneTabPanel with a e.g., StackPanel and remove the rotation triggers.
The provided example is based on that Style below. Otherwise you won't be able to propagate tab header position to the view.

Another big pain is the lack of events that are exposed by the DockingManager class and AvalonDock in general. This means there is no chance to observe the drag and drop actions. As a matter of fact, DockingManager only exposes three quite uninteresting events. Same to the content hosts like the LayoutAnchorablePaneControl.
Since AvalonDock does not use the WPF framework's Drag & Drop API, handling those events is not a solution.

To overcome the short comings, you must handle one of the few model events, the LayoutRoot.Updated event in this case.

The solution only targets the LayoutAnchorablePane and LayoutAnchorableGroupPane. To address advanced grouping or the LayoutDocumentPane you can simple extend the example by following the pattern.
Since you only require/requested a two column layout, the algorithm will do the job. Other more advanced layout arrangements are supported, but the behavior is not perfect as not all conditions are currently tracked. The focus is on a two column layout. It's a quick (but not so dirty) and very simple solution.
You should consider to disallow any layout arrangement other than the two column layout explicitly.

Additionally, AvalonDock does not provide an event to indicate when the visual layout process is completed. You only get a notification via the LayoutRoot.Updated event when the layout model is added/removed to/from the layout model tree. But you never know when exactly the visual tree is updated. We need to have access to the visual containers in order to set the LayoutPanelControl.TabStripPlacement property based on the new position of this control.
To overcome this, I used the Dispatcher to defer the access to the then initialized and rendered LayoutAnchorablePaneControl. Otherwise the tab header arrangement would be premature, because the control's layout index is yet to change. AvalonDock only allows to track very few layout model modifications but no observation of actual docking operations at all.

So the algorithm is basically

1. Handle the LayoutRoot.Updated event and start the actual positioning algorithm deferred using the Dispatcher
2. Iterate over all pane controls to update the tab header placement. In case nesting is allowed, you will have a layout tree that you have to traverse recursively, like it is done in this example for group panes.
3. Identify the position of the pane in the layout based on their index.
4. Set the LayoutPanelControl.TabStripPlacement property according to the index: an index of 0 means left and an index that equals the item count means right. Every other index is in between. The tab headers are placed based on the pane's position in the layout.
5. The DockingPanel will layout the tab items accordingly. Triggers are used to rotate the tab headers if they are positioned left or right.

There can be multiple LayoutPanelControl elements in the layout (except you disallow "illegal" layout arrangements to enforce the two column layout).

MainWindow.xaml.cs

You have to install VS2013 theme package (link) then use the light version like the following:

I found it, is because I must insert the ScrollViewer inside a Grid and I have it inside a StackPanel

https://stackoverflow.com/a/35417749/14891562

Alright, struggling to find shorter solution from the entire web. In the end, this is what I found, which help me to change the style of the DropDownButton. Thanks to the author!

To enlarge the button, I follow the instruction of the link above to create a resource dictionary for the entire DocumentPaneControlStyle. From there I change the "Width" and "Height" of the xcad:DropDownButton/

Conclusion, AvalonDock is tough! :'(

According to the source code of LayoutAnchorablePane:

I found the solution. As I am using Stylet I needed to make the following changes in my View.

First, add the reference for Stylet.

I've figured it out.

The following will list all LayoutDocument documents in dockManager

Although I don't know what was causing this behavior, or how to avoid it when using Xceed's AvalonDock, I have got around the problem by using Dirkster's AvalonDock fork. I am using version 4.50.2, and only minimal changes to code were required in order to switch between the two libraries. Dirkster's AvalonDock does not exhibit the problem behavior described in the question.