Dragablz – Tearable TabControl for WPF

Welcome to Dragablz. Dragablz is an open source Chrome style draggable & tearable tab for WPF.  Dragablz also makes user friendly docking and tool windows achievable very quickly.

Shown here using the Material Design in XAML Toolkit Theme:

Dragablz Material Design MahApps Mashup
Dragablz Material Design MahApps Mashup

Simple XAML:

<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>

Click here to lend your support to: Material Design In XAML Toolkit/Dragablz and make a donation at pledgie.com !

Classic Trapezoid Tabs:

Chrome style tabs, with IE style transparency. Plays well with Windows Snap.

 Simple, User Friendly Layout System:

Easy Docking With DockablzUser friendly docking.

95 thoughts on “Dragablz – Tearable TabControl for WPF

    1. Like this (but make sure you bind your ItemsSource instead of explicit TabItems):

      <Window x:Class="WpfApplication2.MainWindow"
              Title="MainWindow" Height="350" Width="525">
                      <ResourceDictionary Source="pack://application:,,,/Dragablz;component/Themes/Generic.xaml" />
          <dragablz:TabablzControl ShowDefaultCloseButton="True" ShowDefaultAddButton="True"
                                   ItemContainerStyle="{StaticResource TrapezoidDragableTabItemStyle}"
              <TabItem Header="One">Content One</TabItem>
              <TabItem Header="Two">Content Two</TabItem>
              <TabItem Header="Three">Content Three</TabItem>

      For more complete samples see:

      Main Source: https://github.com/ButchersBoy/Dragablz
      Additional Demos: https://github.com/ButchersBoy/DragablzSamplez

  1. Is it possible to use dragablz to allow for tab reordering without allowing them to be separated from the tab control?

  2. Hello James,
    a big thank you for the library.

    It seems I’ve found a bug.
    When I press Ctrl+Tab nothing happens. If I press it a second time I get a null reference exception.
    I can reproduce this error in all you demo apps.

  3. Hi James,

    This is an amazing library! We all owe you thanks!
    But is there a way to change the icon of the tabcontrol?

    Thanks again!

  4. Hi, James. Awesome library, congratulations!!
    Unfortunately I’m facing a problem when I maximize the window. It is showed like having a negative margin on left and top.
    I’m still searching if there’s a point where these margin are set, but i can’t find them. Do you have some suggestions?

    Thank you so much.
    Best regards Alberto.

      1. Hi james. I already solved that problem.
        I post my solution in the github issue. But I have another problem.

  5. hello

    when i press on + button it give me an exception
    “An unhandled exception of type ‘System.InvalidOperationException’ occurred in Dragablz.dll”
    can you give me a simple example to use add new tab button?

  6. Hi, Is Really What Im Want… But Im Getting Some Problem. You’ve Suggested To Use MaterialDesign, And When i Use It, i Lost Watermark In My TextBox. How Can i Solve It?

    1. Did you found solution for windows XP ? I am always getting System.DllNotFoundException : Unable to load DLL ‘dwmapi.dll’ (Exception from HRESULT: 0x8007007E)

  7. Is there a way to have the last (rightmost/suffix/add new) TabablzControl tab always repositioned to the far left (starting) position after removing the last content tab? Right now, that last tab does not appear to close the gap made after removing the last content tab. Setting FixedHeaderCount > 0 is not really an option for us as we don’t have an “always visible” tab to show. Thanks!

    1. So you’re removing all the tabs but keeping the window open, but you have something in the suffix? Currently it does that to allow a drop space for tabs to be dropped back in. Can you raise an issue on the GitHub page and we can talk about it some more…

  8. Is it possible to set the LogicalIndex of DragablzItem’s to be equal to the index of the list they are in. Instead of getting sorted after the sequence they are clicked on? I’m using a mdi layout and don’t want the window to get on top when I click on it, instead I want them to change the LogicalIndex if I rearrange the collection.

      1. Great work!!!

        I have added Normal System.Windows.Controls.TabItem in TabablzControl.
        TabItem does not have this event.

        Do you suggest some other TabItem? If so pls.

    1. At the end of the day, it’s WPF…You can add whatever you want…if you are talking about in the header check the custom header example in the source.

  9. I’d like to allow closing tabs with a middle mouse click. Could you point me in the right direction on how to implement that?

    1. You need to execute TabablzControl.CloseItemCommand. One possible way would be a custom template for your header (see demos), and then a MouseInputGesture to execute the said comand.

      1. I ended up adding the MouseBinding to the Trapezoid in the template. Not sure if I did it right, but it seems to be working. Thanks for your help!

  10. Hi! I appreciate the work that’s gone into dragablz! I have a question though: My TabablzControl is bound to an ItemsSource and before, using the default TabControl, I was able to set the DataTemplate in TabControl.Resources in order to properly display the content of the TabItem. Now, however, setting that is ALSO setting the tab header to use the same view, where before I was setting the header in the TabControl.ItemTemplate, binding its contents based on properties in the TabItem. How do I set the Tab Header when using an items source and specifying a DataTemplate to use in the TabControl.Resources for the view? Thank you for any help you can lend James!

    1. Hi, you probably want to checkout HeaderItemTemplate and ContentTemplate. In the source/example check out BasicExampleMainWindow.xaml

  11. Where can I find an example that uses the ‘Close’ on the tabitems? I have flipped through your demos but I must be overlooking it.

  12. Hello .. firstly congratulations on your work. I do not know where I can make a suggestion, so I write here.
    In the file: TabablzControl.cs, Function: OnKeyDown (KeyEventArgs e)
    It would be nice to add Ctrl + T for New Tab and Ctrl + W to remove the tab. I think it would be complete.

  13. I’m using dragablz:TabablzControl in a project of mine and I have the need of hide/show some tabs dinamically. The fact is the control is not respecting the property Visibility of the TabItem. I’ve tried with and without binding, like this:

    But none is working.
    Change the “FixedHeaderCount” does not affect the result.
    The tab remains always visible.
    Is there any other way that I can achieve the result I need?

    1. Yeah, obviously there’s since changes to the standard tab control to support all of the extra features, and currently that’s not supported. You’d have to temporarily remove your hidden item from the source.

  14. Thanks for your library! I am using it in my project and it works smoothly. But I have a problem, when I dragged a tab out and put it on the right (screen gets divided in two parts) and I close that tab, the space remains. I am using Conductor.OneActive and Caliburn.
    is there any way that when I close the tab, the space disappears? The only way to fix it is closing the application and run it again.

    Thank you

    1. Hi, have you created a custom IInterTabClient? Typically the split should be closed. The default behaviour for the default implementation of IInterTabClient TabEmptiedHandler is TabEmptiedResponse.CloseWindowOrLayoutBranch

      1. Yes, I have a custom IInterTableClient. The problem is that I have two different windows in the application Main (Shell) and ChildWindow view models. If I leave the TabEmptiedResponse to CloseWindowOrLayoutBranch, in the last tab; it closes the application.

    1. This being WPF, yes, there is always a way. The method though will depend on how you are populating the tab control. Might be worth you finding your way to the Gitter chat room. (Via the GitHub homepage)

  15. Hi,

    How can I serialize/deserialize the positions and size of my “tabs”, This so I can let users save there layout of an app?


    1. Good question. By design it doesn’t support serialisation. It provides methods to query state, and and reconstruct tabs. However, I don’t have recommended practice for this… Just yet… But I’m currently working on an app which will have s sample how to do this. But it’s not quite there yet. Keep an eye on this: https://github.com/ButchersBoy/doobry

  16. Hello James,

    first of all I would like to thank you for sharing this library. It’s awesome !!

    Can you please provide an example how to set the docking layout?

    Thank you

  17. Hello,
    First of all thanks for your work!
    When I close the last Tab Item , the window_closing event of the main window fires.
    Is there a way to prevent it?

    Thanks for your replay!

  18. I see in your sample a window BasicExampleTemplateWindow. However, it doesn’t seem to be used. I’m guessing that the sample if fully implemented would have had BasicExampleWindow inherit from BasicExampleTemplateWindow and then tear offs would have used the temple window leaving behind the sibling controls of the tab control.

    If so, this is the behavior I’m trying to create. My main window has several controls above the tab control. When I tear off a tab, I want it to be in a minimal container (i.e. non-of the non-tab controls will be on the tear off).

    Am I guessing correctly? Were you able to accomplish this behavior?

      1. I put a break point in both methods (GetNewHost, TabEmptiedHandler), they never get hit. That’s one of the reasons I said earlier the BasicExampleTemplateWindow does not seem to be used. I downloaded your demo w/ source on 4/14/2016. After getting this message I downloaded again on 9/16/2016 and didn’t see a difference. Am I missing something?

  19. A new question, is it possible for a torn off child tab to drop onto another torn off child tab, both originating from the same parent? What are the settings to enable this behavior?


    1. Yes, absolutely…this should just work out of the box…as you’ll see in the demos. You can also specify a Partition on an InterTabController

  20. Question… I’m using your Material Design & Dragablz to have material looking tabs but I can’t figure out the “right” way to use pack icons inside the header of the a tab. If I just set the header of the tab to a StackPanel with a PackIcon and a TextBlock inside of it, the text no longer responds to the Primary color and I end up with black text on dark backgrounds. I tried the same thing using a ColorZone around the StackPanel and now the color of the icon and the text do respond and correctly change to white when they should, but now the Ripple effect of clicking on a tab is covered by the ColorZone. What is the correct way to do this?

      1. I’m actually not looking for tab tearing. What I need is tabs with close buttons, re-orderable and inside the top window border (DWM). From what I’ve learned by now all I have to do is extend the windows border and then I guess margin top of negative X pixels would do. But I’m still currently looking for a supported solution for DWM border extension.

  21. I agree. But, since you seem to be deep in this topic; Do you know of any NuGet, a library or some supported / “default” way of utilizing DWM for border extension?

      1. I actually did look closely at MahApps and I saw that you integrated well with it. But, I would like to keep the native Windows style, while MahApps aims for a complete style overwrite, which doesn’t fit with my project. Any custom drawn window implements “in-border support” by design, but DWM does it, too, yet I still need to figure out the best way to do this. Some solutions break with Windows 8, for example.

  22. On a side-note: Is it possible to disallow tearing of the tabs, i.e. moving them out producing a new instance of MainWindow?

      1. Wow, you really reply fast 🙂 If I may ask two questions as well: 1.) Is there an option to disable tabs geting opaque while another tab is being dragged? This otherwise causes a “flicker” for as long as the mouse is down, while just clicking on a tab. And 2.) The container which contains all the tabs doesn’t stretch, so dragging the last tab to the right will make it look cut-off. Is there a solution for this?

      2. I’m currently trying to overwrite the styles. Although to stay supported, I would rather inherit TrapezoidDragableTabItemStyle with BasedOn. Any hints on that?

  23. Hi
    First, thanks for making available this impressive control…it provides exactly the capability I wanted to include in an app I’m developing.
    I’ve got most things working nicely, except for transparency of torn-off tabs. Can you point me in the right direction?

  24. I tried to use your control in one of my application, but realized that the Headers of the TabItems inside the TabablzControl were not visible at all. After investigation further, I found out, that if you set a Style for a ScrollViewer and set the Padding, the Tab Headers disappear. You can easily reproduce it by adding

    in the resources of the QuickStartWindow.xaml of the .net4.0 project of the Dragablz Solution.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s