Post
Ask Question

Chrome Style Tear Out TabControl in WPF

A long standing issue with WPF has been grappling with how to create a tab control which can tear off tabs as we first saw introduced in Google Chrome.

This is not a trivial task in WPF, and after implementing two versions of this in applications I have worked on, I have taken the lessons I have learned and built a new open source library which provides Chrome style tear-able tabs. The effect can be achieved with minimal XAML, zero code, and supports MVVM. It also makes adding and removing tabs easy. Having said that, there are various hooks available on the API so you can jump in and tailor the experience to your own requirements and code base.

Installing the library from the Nuget console is simple: Install-Package Dragablz.

And the XAML to get you up and running is easy to:

  1. <dragablz:TabablzControl Margin="8">  
  2.    <dragablz:TabablzControl.InterTabController>  
  3.       <dragablz:InterTabController />  
  4.    </dragablz:TabablzControl.InterTabController>  
  5.    <TabItem Header="Tab No. 1" IsSelected="True">  
  6.       <TextBlock>Hello World</TextBlock>  
  7.    </TabItem>  
  8.    <TabItem Header="Tab No. 2">  
  9.       <TextBlock>We Have Tearable Tabs!</TextBlock>  
  10.    </TabItem>  
  11. </dragablz:TabablzControl>  
The full source is available on GitHub here.

And more information is available on the dragablz blog here.