How to Create a Dockable Tab like IE9 or chrome

Question

i want to implement a UI look like IE9 or chrome.

i like the dockable tab,it can be dragged out into a new window.

and the window can also be put into as a tab.

is anyone can give me an idea how to implement it, or a library,or an example?

thank you .

AvalonDock is very good, but not quite like I wanted.

Answer 1

Shell 
{
    List<Content> Contents
}

1. Drag: use PopUp/adorn/visualbrush to create a content thumbnail.
2. Drop: if out of the parent shell, creat a new shell, and add the drag-content to the Contents List.remove it from origin parent shell.

Answer 2

There is no dock control that comes out of the box in WPF (which is a damn shame). You can have a look at Sofa Docking, which is an open-source docking library based on AvalonDock.

I'm using DevExpress' docking control (not free). It's not perfect, but their customer support is one of the best out there, and that's a very big thing to me. I found it very hard to find any resources and answers regarding AvalonDock and SofaDock.

Answer 3

You could look at the Infragistics xamDockManager: http://www.infragistics.com/dotnet/netadvantage/wpf/xamdockmanager.aspx#Overview

If you do this, you would use a DocumentContentHost: http://help.infragistics.com/NetAdvantage/WPF/Current/CLR4.0/?page=xamDockManager_Add_Panes_to_the_DocumentContentHost_Object.html

Then you would want to disable docking of the ContentPanes on the right, left, top and bottom and there is a boolean property that can be set to control this like AllowDockingLeft: http://help.infragistics.com/NetAdvantage/WPF/Current/CLR4.0/?page=InfragisticsWPF4.DockManager.v11.2~Infragistics.Windows.DockManager.ContentPane~AllowDockingLeft.html