.Net, C#, UI, WPF

Getting Started With Dragablz TabablzControl

Assuming you have a reference to the Dragablz assembly, getting tear-able tabs from the TabablzControl is a doddle. The TabablzControl inherits from the standard TabControl so it should be pretty familiar. The first thing you have to look out for is the InterTabController property. You will need to provide an InterTabController instance to inform the tab that you are going to let the user tear out tabs:

<dragablz:TabablzControl Margin="8">
        <dragablz:InterTabController />
    <TabItem Header="Tab No. 1" IsSelected="True">
        <TextBlock>Hello World</TextBlock>
    <TabItem Header="Tab No. 2">
        <TextBlock>We Have Tearable Tabs!</TextBlock>

That’s all you have place in your XAML Window to achieve this:

Getting Started
Tearable tabs – quickly!

I am the master!

OK, so now I imagine you have some questions…such as, how does this work with bound data sources and MVVM?  Can I manage the window creation myself?

Well, jumping in and seizing some control for yourself is easy.

The key is setting the InterTabClient property on your InterTabController instance.

You’ll quickly see there are two interfaces involved:

  • IInterTabClient – let’s you intercept the requirement to create a new window (and tab control) when the user tears out a tab.
  • INewTabHost – the result of IInterTabClient.GetNewHost.  A simple implementation is provided: Dragablz.NewTabHost

The simplest implementation of IInterTabClient will look something like this:

public class MyInterTabClient : IInterTabClient
    public INewTabHost GetNewHost(IInterTabClient interTabClient, object partition, TabablzControl source)
        var view = new MyWindow();
        return new NewTabHost(view, view.TabablzControl); //TabablzControl is a names control in the XAML

    public TabEmptiedResponse TabEmptiedHandler(TabablzControl tabControl, Window window)
        return TabEmptiedResponse.CloseWindow;

If you expose an instance of your MyInterTabClient class from you view model, you can bind it into the TabablzControl, via the InterTabController:

<dragablz:InterTabController InterTabClient="{Binding MyInterTabClientInstance}" />

Now you should be on the road to integration with the rest of your application code or framework.  For more help take a look at the examples found in the GitHub project.



Dragablz TabablzControl is now on NuGet

After some fiddling with Git, TeamCity and NuGet, a package for Dragablz is now published.  Straight off the bat I must apologise for this only being a .Net 4.5 version; I know there is plenty of enterprise out there still on .Net 4.0.  A .Net 4.0 version will follow in due course…

For the console junkies:

PM> Install-Package Dragablz

The NuGet homepage is here.

Various improvements and documentation are on the way, so if you want Chrome style tearable tabs in your WPF app’ stay tuned!