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
|
1 2 3 |
INewTabHost<System.Windows.Window> GetNewHost(IInterTabClient interTabClient, object partition, TabablzControl source) TabEmptiedResponse TabEmptiedHandler(TabablzControl tabControl, System.Windows.Window window) |
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
|
1 2 3 4 |
public INewTabHost<System.Windows.Window> GetNewHost(IInterTabClient interTabClient, object partition, TabablzControl source) { return null; } |
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
In XAML View, add following code
|
1 2 3 4 5 |
<dragablz:TabablzControl Name="TabsContainer"> <dragablz:TabablzControl.InterTabController> <dragablz:InterTabController></dragablz:InterTabController> </dragablz:TabablzControl.InterTabController> </dragablz:TabablzControl> |
Step 3 - Add Window into InterTabClient
Go back to MainInterTabClient.cs, update the GetNewHost method
|
1 2 3 4 5 |
public INewTabHost<System.Windows.Window> GetNewHost(IInterTabClient interTabClient, object partition, TabablzControl source) { var view = new TabHostWindow(); return new NewTabHost<TabHostWindow>(view, view.TabsContainer); } |
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.
|
1 2 3 4 5 6 7 8 |
class MainWindowViewModel { public IInterTabClient InterTabClient { get; set; } public MainWindowViewModel() { InterTabClient = new MainInterTabClient(); } } |
Step 5 - Bind ViewModel
Now we need bind the ViewModel we created just now, add following line into your MainWindow constructor:
|
1 |
this.DataContext = new MainWindowViewModel(); |
Then modify XAML of your MainWindow
|
1 2 3 4 5 |
<dragablz:TabablzControl> <dragablz:TabablzControl.InterTabController> <dragablz:InterTabController InterTabClient="{Binding InterTabClient}"></dragablz:InterTabController> </dragablz:TabablzControl.InterTabController> </dragablz:TabablzControl> |
Finally, we finish it! Drag a tab out you will see the tab will be inside a new clean window.