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: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>
That’s all you have place in your XAML Window to achieve this:
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.net 
Thank you for sharing this fantastic control! I’m just learning WPF (from WinForms), so it took me a while to get it going, but I have a really basic start now. It looks like I’ll have to figure out your binding example project better, and I think I’m going to have to learn more about styles… Anyway, I have a few questions if you don’t mind:
– Would you be able to provide a tutorial on binding the tabs to a collection?
– How do you apply a control to the prefix/suffix? In the demos, I see images, but could you turn them into buttons?
– I know there’s a “ShowDefaultCloseButton” option, but can this be enabled or disabled per tab? How can I support middle-click to close a tab?
– Can you explain how the BoundExampleWindow kept the close button from being hidden by the left/right buttons?
– Is it possible to prevent certain tabs from being moved or dragged out to a window – like a fixed tab?
Thanks again! This is pretty amazing!
Hey, plenty of questions :-). I intend to write a blog post soon about mvvm (& binding tabs) so look our for that. But yes, the bound example is a good place to start.
Pretty much everything you have asked is possible…when I get five minutes I will try and provide some examples.
re. – I know there’s a “ShowDefaultCloseButton” option, but can this be enabled or disabled per tab? How can I support middle-click to close a tab?”
Yes, you’d turn ShowDefaultCloseButton off, and either provide your own header content (or re-template DragablzItem) which contains a button which utilises the RoutedCommand dragablz:TabablzControl.CloseItemCommand.
I’ve updated the BoundExample demo to illustrate this, you’ll notice one of the tabs utilising MVVM for the tab header.
Feel free to drop in for a chat: https://gitter.im/ButchersBoy/Dragablz
Re. “– How do you apply a control to the prefix/suffix? In the demos, I see images, but could you turn them into buttons?”
You embed whatever you want in .HeaderPrefixContent and .HeaderSuffixContent.
Hi,
How can I save/load the layout, including the position and how the the tabs are docked, what do I serialize?
Thanks for a great product!
Hi, Dragablz does not suppose how you manage your state. It’s a conscientious decision not to provide some kind of serialized state or other. Rather, all the tools are there for you to query your layout, persist it in what ever format suits, and then re-piece it together after wards.
Ideally I’d get a blog post together on this, but I will briefly say that in my own apps I query the layout, and persist a set of instructions on Window locations, splits, tabs, which can then be used to reconstitute state at a later date.
Please see this issue for some more information: https://github.com/ButchersBoy/Dragablz/issues/41
Kuddos for an awesome library dude!
I’m trying to implement my own InterTabClient so I can have a different window host style for “torn off” tabs than for my main window.
I tried to step through the Samples as they have examples of the usage (BasicExampleInterTabClient.cs) but if I set a break point in BasicExampleInterTabClient.GetNewHost() it never actually gets hit/called. Instead the GetNewHost() in DefaultInterTabClient is called.
Am I misunderstanding something or is there a different/better way to do what I want to do?
Thanks!
Hi, are you providing your inter tab client via an inter tab controller?
Yes, I am – though I could be doing it wrong of course.
That aside, I’m seeing the same issue using the Demo (DragablzDemo.net45) as well. If I set a breakpoint in BasicExampleInterTabClient’s “GetNewHost()” it is never hit. Instead the default is called. If I could get the Demo to work in this respect, I think I could take it from there.
I’m using VS2015 if that makes a difference.
Thanks so much BTW. I realize you probably don’t have any more time than the rest of us and I *really* appreciate what you’ve done.
Take at look at this sample. A custom InterTabClient is set via a style, which means as more tab controls get created it keeps getting applied. Look in the App.xaml.cs you’ll see a single InterTabClient is setup at the start of the app. If you use this technique you should be fine.
“Take at look at this sample. A custom InterTabClient is set via a style, which means as more tab controls get created it keeps getting applied. Look in the App.xaml.cs you’ll see a single InterTabClient is setup at the start of the app. If you use this technique you should be fine.”
Which sample? Did you mean to include a link? Thx.
Whoops 🙂 https://github.com/ButchersBoy/doobry/blob/ef0f7234e9ad8c03b78cebee424a240a3ef4c2a7/Doobry/MainWindow.xaml https://github.com/ButchersBoy/doobry
Hi James,
Your Dragablz is great indeed! Just a little question (please help me!)
I’m trying to get started with my WPF application having tabitems docked in predetermined positions, for example tabitem “CARDS” starting docked on the left of the window, “BUTTONS” starting docked on the right side of the window.
Maybe I missed some kind of property or something …
I’m going slightly mad, I can’t get it.
I wish to thank you anyway, even just for reading this mail.
Have a nice weekend and greetings from Italy!
Hi, there are various API helper methods for building up layouts, such as .AddToSource(), .Branch(). I’m currently working on a project (doobry) which saves, and restores a user’s layout. This may help you. Unfortunately, there isn’t much documentation at present time.
https://github.com/ButchersBoy/doobry
Hi James, I see there are various API helper methods for building up layouts, such as .AddToSource(), .Branch() as you said in a previous message.
Is it possible to set via-xaml a tab located for instance on the left and one on the right?
Maybe in a dockablz tag or something…
Code of doobry is quite too complex for me 😦
Thanks in advance
Hey…SidePanels in here might help you:
https://github.com/ButchersBoy/DragablzSamplez
Is it possible for the tearaway tab start the same application over again? I have a Prism application and I when a tab is dragged from a tab control in the prism application and dropped I would like to have the same prism application start up with have the tab item displayed in the toolbar in new prism application.
As in a new process? If so, the behaviour is not supported out of the box.
Yes. The three main goals are
1) The tab item that is dragged is removed from the tab control it originated from.
2) On the drop where the new tab control with the dragged tabbed item and its content in your examples is display would be replace with a new Prism Process that displayed that displays the tab control populates with the dragged tab item and its content.
3) The drop can occur outside the window’s view area.
The code used now uses WinApi hook methods to monitor window messages when a drag operation is in process, a name data object which is placed on to the clipboard when a drag operation starts, and retrieved when the drag operation ends, and the implementation of the DragSourceQueryContinueDrag event to indicate when the mouse was released to officially end the drag drop operation.. Most of the code used was taken from Bahrudin Hrnjica April 28 demo example.
https://bhrnjica.net/2014/04/28/drag-and-drop-item-outside-wpf-application/
The TabablzControl custom control makes the code more useable, and has some of the built functionality already needed. One being the removal of the dragged tab item from tab control it originated from. Two the handling of the drop operation outside the processes viewing area. Three the ability not having to place data object information in the clipboard for storage and retrieval I think. The two methods I would have to override in the TabablzControl class would be the ItemDragCompleted, and the OnItemsChanged. By overriding these tab control your demo displays could be prevented, and replaced with the new Prism process’s display.
I have not fully comprehended yet all the code and operation of the TabablzControl, and class directly related. I am guessing what I need is a very watered down version of the TabablzControl. I like the idea though of using a custom control. This would make the control easy to upgrade and reusable.
So I guess my first question is do you think I could just create a tab item control to accomplish the goals mentioned above? The drag and drop functionality in the TabablzControl class would be used, along with the DragablzItemsControl class also.
Is your code open licensed where code used from the dragablz library is available for use as long as reference is made to dragablz library ?
Well I needed a starting point for a heavy dosage of WPF. You dragablz code is the best starting point.
Thanks
There are people using Dragablz with Prism. You might want to look at https://github.com/tstephansen/PrismExample
I think what I mostly need to do is make an drop and drag manager .
Please I would like to hire a UI designer who can help me designer wpf for a small project. Am impressed with your innovations.
Thanks
Hello James,
first thank you for the effort you put into the Dragablz project as it is amazing.
I have a simple question here, In my project I replaced the normal Tab control headers to contain a custom control that allowed editing the header text by just double clicking it. However, when I replaced the normal TabControl with TabablzControl and set the HeaderItemTemplate to contain the very same editable control, all mouse clicks are being swallowed and as such my editable control doesn’t enter edit mode (i use dbl click to go into edit mode), is this normal? can it be prevented? Probably there is something I am not understaning because I am a WPF rookie.
Thanks for your time.
Yes, this is “normal”. Dragablz has to manage all the mouse interaction to enable dragging.
However, there is support to work along side what dragablz needs to do. You can provide a custom thumb in your header template, and then you could put other controls along side. In my production apps I have a little menu that pops up that allows rename etc.
To get started, check this in the demo: https://github.com/ButchersBoy/Dragablz/blob/master/DragablzDemo/CustomHeader.xaml
Thank you for the reply. I was browsing around the demo app and noticed that one of the tabs had a clickable checkbox and a clickable button and figured by myself about the custom header. My bad for rushing the question out here.
Um, this is really stupid. I’m fairly new to WPF/C# (about 1 1/2 yr ago I started, I’m 13 yr old) I got it to display, now, how do I add content other than text?… Thanks, Micah
Only just saw this. Did you figure it out yet?
Hey! no questions here I just wanted to say this is the greatest tab control ever!! is this still under development? I see not github. I can help if you guys need me
Hi, Is it possible to disable docking? I want to be able to drag out a tab to a new window, but want to avoid a window is split horizontally or vertically.
Yes just don’t add the dockablz elements