Question

I have a TabControl that allows users to manage documents such as the following:

At some point, I want to add a feature that allows users to float TabItems and dock them back into the TabControl much along the lines of what you can do in Visual Studio. This feature will allow users to more easily compare documents and copy/paste between them, etc.

I have some general ideas on how to go about doing this. The TabControl has its ItemsSource bound to a list of document view models.

To float the tab:

1. Add a Thumb control to the tab strip area of the TabItem.
2. When the user drags the Thumb, the associated document view model is removed from the TabControl list.
3. A separate document Window is brought up, bound with the document view model, to display/edit that document.

To dock the tab:

1. Add a DragOver event handler in the TabControl to recognise a document Window dragging over the tab strip area.
2. The associated document view model is added to the TabControl list.
3. The document Window is closed.

Are there any examples out there on how to do this, or do you have an approach to do this?

Thanks.

Answer 1

If you can’t find or don’t want to use a pre-existing control, I would highly recommend Bea Stollnitz’s article about dragging and dropping between databound controls. You will probably have to alter it a bit to work with a DockPanel to identify what DockPanel.Dock the databound object should use, however I’ve found the code easy to alter in the past.

You would then setup two databound controls, such as a TabControl and a DockPanel, and when dragging/dropping between the two you are actually dragging/dropping the databound items between the ItemsSources.