WPF Dragablz Tutorial Part 2: Set Custom Tab Host Window

Introduction

Dragablz is a WPF Tab Control which can let us to drag and drop tabs, drag tabs out as floating window and docking support, etc. It’s a pretty good control, but its documentation is too few.

In Dragablz’s official tutorial, we use default InterTabController for TabablzControl, and InterTabClient property is not specified for InterTabController, so tearing a tab out directly will only create a window which is same as the container window of the TabItem.

In this tutorial I will show you how to create a custom Tab Host Window.

 

Step 1 – Implement IInterTabClient

To set a custom Tab Host window, we should implement the IInterTabClient interface, which contains two method signature

Only the first method GetNewHost will be used here, so we can ignore the TabEmptiedHandler method.

Create a new class named MainInterTabClient.cs and make it implement IInterTabClient interface, then modify the GetNewHost method like following

The return value is the new host for dragged out tab, next we will create a new window for it.

 

Step 2 – Create a new Tab Host Window

Add a new window named TabHostWindow

Visual Studio add new window

Visual Studio add new window

In XAML View, add following code

 

Step 3 – Add Window into InterTabClient

Go back to MainInterTabClient.cs, update the GetNewHost method

It will create an instance of our newly created TabHostWindow as the host of dragged out TabItem.

Step 4 – Create a ViewModel for MainWindow

Next we need create a ViewModel class to bind newly created InterTabClient, name this class MainWindowViewModel.

 

Step 5 – Bind ViewModel

Now we need bind the ViewModel we created just now, add following line into your MainWindow constructor:

Then modify XAML of your MainWindow

 

Finally, we finish it! Drag a tab out you will see the tab will be inside a new clean window.