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:TabablzControl.InterTabController>
<dragablz:InterTabController />
</dragablz:TabablzControl.InterTabController>
<TabItem Header="Tab No. 1" IsSelected="True">
<TextBlock>Hello World</TextBlock>
</TabItem>
<TabItem Header="Tab No. 2">
<TextBlock>We Have Tearable Tabs!</TextBlock>
</TabItem>
</dragablz:TabablzControl>



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.

125 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"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dragablz="clr-namespace:Dragablz;assembly=Dragablz"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/Dragablz;component/Themes/Generic.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>
    <dragablz:TabablzControl ShowDefaultCloseButton="True" ShowDefaultAddButton="True"
                             ItemContainerStyle="{StaticResource TrapezoidDragableTabItemStyle}"
                             AdjacentHeaderItemOffset="-10">
        <TabItem Header="One">Content One</TabItem>
        <TabItem Header="Two">Content Two</TabItem>
        <TabItem Header="Three">Content Three</TabItem>
    </dragablz:TabablzControl>
</Window>

      For more complete samples see:

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

      Reply

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

    Reply

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

    Reply

  6. 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!

    Reply

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

    Reply

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

  9. 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?

    Reply

  10. 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?

    Reply

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

      Reply

  12. 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!

    Reply

    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…

      Reply

  14. Visual Studio 2015 needs to be installed for this project. i cannot compile or run the project with the VS2013 or earlier.

    Reply

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

    Reply

  17. I need to handle UnLoad event of the TabItem in dragablz:TabablzControl.
    When the user closes a TabItem , UnLoad event is not getting fired.
    Pls guide.

    Reply

      1. Great work!!!
        Congrats…

        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.

      Reply

  19. 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?

    Reply

    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.

      Reply

      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!

      2. May I know , what is meant by MouseInputGesture
        If I need to handle event MouseLeftButtonUp on Close Button then how to proceed.

  20. 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!

    Reply

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

      Reply

  21. 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.
    Thanks.

    Reply

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

    Reply

  23. 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?

    Reply

    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.

      Reply

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

    Reply

    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

      Reply

      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)

      Reply

  26. 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?

    Thanks!

    Reply

    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

      Reply

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

    Reply

  28. 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!

    Reply

  30. 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?

    Reply

      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?

  31. Hello, i’m trying to put the Tab Control in the Window’s Title Bar but i cant get it working. Can someone help me ?

    Reply

  32. 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?

    Thanks

    Reply

    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

      Reply

  33. 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?

    Reply

      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.

  35. 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?

    Reply

      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.

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

    Reply

      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?

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

      5. Hi James, I have a strange problem.. and I think I find the answear in bytecode77 question.

        In my mainWindow constructor I subscribes some events. After tearing of the tabs/moving them out of mainwindow.. all event handling methods are calling twice!

        Is there a solution for that.. and please don’t anwear “don’t use InterTabController” because love the InterTabController.

        Thank you so far.

  38. 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?
    Thanks
    Stephen

    Reply

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

    Reply

  40. Sorry, but somehow WordPress swallowed my xaml example. I just added a global Style for a ScrollViewer and set the Padding to 1.

    Reply

  41. Hi James,

    I love the docking layout. Is there a possible way to save the layout? Now after restart the application the docking layout is lost.

    Thank you so far..

    Br,

    Limucat

    Reply

      1. Yes! Thank you for the quick response! This is exactly what i was looking for!

  43. Hi James,

    I’ve another question, is it possible for tearable tabcontrol to not accept tabitems from other tearable tab controls?

    Thanks,
    xxchan

    Reply

      2. Why is InterTabController.Partition no longer bindable (the dependency property is commented out)? Declaring partition IDs in XAML isn’t very extensible.

      5. James, thanks for your response below. Before I thought to look at binding partition to TabControl backing viewmodels…..I’ve spent alot of time trying exposing InterTabClient’s as backing viewmodel propeties and thus binding the InterTabController.Client property……

        The problem comes in trying to hook into the “plumbling” for dis-allowing a drag-drop operation. I can implement IManualInterTabClient, but basically the only way to “dis-allow” the drop is to throw an exception out of Add(object item)…..then catch it somewhere else in my app, include the tab that has already been removed in the exception body and then “trying” to put it back in the tabset it was torn from (because Remove(object item) on the bound InterTabController for the tabset I am tearing the tab FROM is called before any checks to can be made if the drop location is valid).

        So it becomes a bunch of kludgy programming. I figured that you had already implemented the Partition property and all this plumbing for putting the torn tab BACK in its original tabset if the drop location is disallowed, so I wanted to hook into that.

  44. Hi James,
    First of all, thank you for your work, it is awesome!
    I would like to know if it is possible to integrate different process as tab? I’ve tried to integrate it with a SetParent on a WindowsForms control embeded in in a WindowsFormsHost but WindowsFormsHost does not appear… The goal is to launch the same app in different tab like google chrome.
    Thanks,
    Cyril

    Reply

      1. Ok, but I don’t understand why I can’t add WindowsFormsHost, with just a TextBox for example, as content of BoundExample model?
        Thank you

  45. Hi James,

    I’m trying to figure out how to dock the teared tab back to the same place where it was before it was teared? Could you please advice? I’m using dockablz:Layout.

    Thank you

    Reply

  46. Hi James,
    when I add a usercontrol with the viewmodel the content is showing in the Header and when I click the header the content is at the correct place?

    kind regards

    Reply

  47. Am looking for a designer would can design a stylish UI for a small app which is windows based. Using the material design wpf. I like the simplicity and the effect of the works found here.

    Thanks

    Reply

  48. Hi James, thanks for this awesome library. I wonder if there is a way to merge the tab(s) back to main window when child window closed? I need all my tabs available to user at all time without restarting the application.

    Reply

      1. Thanks for the quick reply. I add ConsolidateOrphanedItems =”True” to both main window and child window. But nothing happens when child window closed. My break point in “WindowOnClosing” was never triggered, so no consolidation. Both “Loaded” and “Unloaded” did get triggered.

      2. Sorry, can’t help much further right now, am on holiday. You can try pinging me again next week if you don’t make progress.

  49. Hi. What an amazing TabControl. I didn’t find it yet, but is it possible to reduce the tabbed document/window to just it’s tab while dragging it ? If not what would be the best way to achieve that ?

    Reply

  50. Hi James, I have an issue with HeaderSuffixContent disappearing when teared tab is docked back to the main window. I set this content dynamically on Load of my control and also in GetNewHost of InterTabClient by getting it from the source tab. It appears back when I tear off the tab again. Seems like I need to set that content in some sort of OnDockComplete event handler as well, but I was not able to find out if such an event/callback exist at all. Could you please point me to the right direction?

    Thanks in advance,
    xxchan

    Reply

Leave a reply to James Cancel reply