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:
- Source code can be found on GitHub here: http://github.com/ButchersBoy/Dragablz
- NuGet package cound be found here: http://www.nuget.org/packages/Dragablz/
- To get started see here: Getting Started With Dragablz
- Demo project in the GitHub solution
- .net 4.0 & .net 4.5 builds included in the NuGet package
- Supports MVVM
- Fully themeable (supports Material Design in XAML Toolkit and MahApps)
- Ping the developer on twitter! @james_willock
<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:
Simple, User Friendly Layout System:
User friendly docking.
125 thoughts on “Dragablz – Tearable TabControl for WPF”
How do you set the layout to trapezoid? And how do you turn on tab close and new tab buttons?
Like this (but make sure you bind your ItemsSource instead of explicit TabItems):
For more complete samples see:
Main Source: https://github.com/ButchersBoy/Dragablz
Additional Demos: https://github.com/ButchersBoy/DragablzSamplez
im using this code bue get error
“TrapezoidDragableTabItemStyle” could not be resolved.
And you’ve merged the resource dictionary in? Style should be in there…
When a tab drags off of a sheet, and acts as a separate window, would be great to hide the header while dragging. Make it isier to place.
What type of Window are you using?
Is it possible to use dragablz to allow for tab reordering without allowing them to be separated from the tab control?
Yes, just remove the InterTabController.
Hi James, thanks for this awesome library. I wonder if there is a way to set the initial docking layout?
Hi…that’s the next big feature I have to work on…
I see. Thanks!
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.
Hey, thanks…I’ve logged an issue on GitHub so you can keep track:
This is an amazing library! We all owe you thanks!
But is there a way to change the icon of the tabcontrol?
Hey, thanks for the feedback, always appreciated.
I’m a bit confused though, which icon are you talking about?
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.
Hi, thanks…yes I am aware of this, it’s logged here: https://github.com/ButchersBoy/Dragablz/issues/31
Hi james. I already solved that problem.
I post my solution in the github issue. But I have another problem.
Hi, is it possible to totally disable Dragging of TabItems ?
Hi Jeff, yes, remove the InterTabController and set the FixedHeaderCount to the number of tabs.
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?
Can you provide a stack trace? There are examples in the demo project.
It would be easiest if you could add an issue on GitHub: https://github.com/ButchersBoy/Dragablz or join the Gitter chat room.
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?
Anyone facing the problem using Dragablz in XP…. ?
Did you found solution for windows XP ? I am always getting System.DllNotFoundException : Unable to load DLL ‘dwmapi.dll’ (Exception from HRESULT: 0x8007007E)
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!
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…
Does it support PRISM 6?
Well, it’s a control, it doesn’t favour one framework or another. It is an independent entity, which you should be able to get working with any framework.
But yes, people are using it with PRISM:
Excellent! I will look into the samples you provided.
Visual Studio 2015 needs to be installed for this project. i cannot compile or run the project with the VS2013 or earlier.
VS 2015 community edition should work.
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.
Don’t think I quite understand your question…can you email it, email address on my GitHub homepage.
How to get full MDI tabbed with “WPF forms” as childs ?
I need to handle UnLoad event of the TabItem in dragablz:TabablzControl.
When the user closes a TabItem , UnLoad event is not getting fired.
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.
Is is possible to add a Frame in DragablzItem?
In our project , we have added a Page in Frame.
Each TabItem of TabControl would contain a frame.
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.
It works fine as expected.
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?
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.
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!
May I know , what is meant by MouseInputGesture
If I need to handle event MouseLeftButtonUp on Close Button then how to proceed.
Sorry, slightly wrongly named: https://msdn.microsoft.com/en-us/library/system.windows.input.inputbinding.gesture(v=vs.110).aspx
Got it . But unable to identify close Button/image of TabHeader. Pls guide.
You’d be better off joining the Gitter chat forum (link on the GitHub page) for further support…
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!
Hi, you probably want to checkout HeaderItemTemplate and ContentTemplate. In the source/example check out BasicExampleMainWindow.xaml
Yup, that did it! Thank you!
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.
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.
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?
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.
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.
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
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.
Is there any way to capture the tab click event?
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)
How can I serialize/deserialize the positions and size of my “tabs”, This so I can let users save there layout of an app?
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
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?
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!
Have a look for usages of this: https://github.com/ButchersBoy/Dragablz/blob/master/Dragablz/TabEmptiedResponse.cs
How can use PopupBox ?,Please show me page that have all sample of matrial design
Hi, have you tried running the source code demo? Several examples in there.
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?
Yes, that’s you can create a different “child” window type by implementing a customg IInterTabClient. See https://github.com/ButchersBoy/Dragablz/blob/master/DragablzDemo/BasicExampleInterTabClient.cs
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?
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 ?
Which Window type are you using? For this you should use the DragablzWindow, or possible a customised MahApps MetroWindow.
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?
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
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?
Hi, take a look at the brush names, as you can use them manually. It might help: https://github.com/ButchersBoy/MaterialDesignInXamlToolkit/wiki/Brush-Names …also maybe drop by the Gitter chat room for more help: https://gitter.im/ButchersBoy/MaterialDesignInXamlToolkit
Is there a way to use this on-glass for either aero or Windows 8 and above?
Getting the full transparency around the torn tab is a real pain in WPF if that’s what you’re after…
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.
No reason why it shouldn’t work…
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?
Have you looked at MahApps MetroWindow? It might actually do more than you want, but you could adapt it.
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.
On a side-note: Is it possible to disallow tearing of the tabs, i.e. moving them out producing a new instance of MainWindow?
Yes, don’t use an InterTabController.
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?
Right now, no and no. However, someone has already raised an issue for 1 on the GitHub page.
I’m currently trying to overwrite the styles. Although to stay supported, I would rather inherit TrapezoidDragableTabItemStyle with BasedOn. Any hints on that?
Honestly depends on what you are trying to do…
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.
Hie, which licence are you using? GPL? LGPL? BSD etc?. Can i use this in proprietary applications with no limitations? Thank you
MIT: https://github.com/ButchersBoy/Dragablz/blob/master/LICENSE … So yeah, no limitations.
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?
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.
Sorry, but somehow WordPress swallowed my xaml example. I just added a global Style for a ScrollViewer and set the Padding to 1.
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..
Hi, it’s up to you to query and persist your layout. It can be pretty complicated, however, you can see a working example here: https://github.com/ButchersBoy/doobry
Is it possible to make first and only tab tearable as well?
Are you looking for MoveWindowWithSolitaryTabs on InterTabController? (This defaults to true.)
Yes! Thank you for the quick response! This is exactly what i was looking for!
I’ve another question, is it possible for tearable tabcontrol to not accept tabitems from other tearable tab controls?
thanks again!! u r rock star!!!
Why is InterTabController.Partition no longer bindable (the dependency property is commented out)? Declaring partition IDs in XAML isn’t very extensible.
Because it won’t work… So bind the InterTabController.
It caused other issues. Bind the InterTabController instead.
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.
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.
This isn’t supported out of the box, it’s not something I’ve tried.
Ok, but I don’t understand why I can’t add WindowsFormsHost, with just a TextBox for example, as content of BoundExample model?
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.
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?
huh? 🙂 so it switches?
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.
You can find my email address on my GitHub homepage: https://github.com/ButchersBoy
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.
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.
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.
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 ?
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,