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>

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.

63 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

  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?

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

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

  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?

    Thanks!

    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!

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