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:

Getting Started
Tearable tabs – quickly!

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.

 

Advertisements

18 thoughts on “Getting Started With Dragablz TabablzControl

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

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

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

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

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

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

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

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

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

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

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

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

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