Tabablz Basics

This page provides a short introduction to get you started with Tabablz.

Creating a TabablzControl

<dragablz:TabablzControl>
    <TabItem Header="Tab 1" Content="Tab 1"/>
    <TabItem Header="Tab 2" Content="Tab 2"/>
</dragablz:TabablzControl>

This creates a basic TabablzControl which allows reordering of the tabs. The usage of TabItem is not a requirement, as can be seen from the following example:

<dragablz:TabablzControl HeaderMemberPath="Text">
    <TextBlock Text="Tab 1"/>
    <TextBlock Text="Tab 2"/>
</dragablz:TabablzControl>

This creates a TabablzControl using TextBlock as child element, pointing HeaderMemberPath to the Text property of the TextBlock.

Prevent the user from reordering tabs

Sometimes you do not want to let the user reorder the tabs. You can use the FixedHeaderCount attribute to achieve this:

<dragablz:TabablzControl HeaderMemberPath="Text" FixedHeaderCount="2">
    <TextBlock Text="Tab 1"/>
    <TextBlock Text="Tab 2"/>
</dragablz:TabablzControl>

This can be useful when you are building an application using the Material Design In XAML library and need tabs styled in Material Design (which is supported by Dragablz).

Content before and after tab headers

It is possible to add content before and after the tabs using the HeaderPrefixContent and HeaderSuffixContent properties. Use HeaderPrefixContentTemplate and HeaderSuffixContentTemplate respectively to provide a template to your content in case it is something else than XAML.

<dragablz:TabablzControl HeaderSuffixContent="After">
    <TextBlock Text="Tab 1"/>
    <TextBlock Text="Tab 2"/>

    <dragablz:TabablzControl.HeaderPrefixContent>
       <TextBlock>Before</TextBlock>
    </dragablz:TabablzControl.HeaderPrefixContent>        

    <dragablz:TabablzControl.HeaderSuffixContentTemplate>
      <DataTemplate>
         <TextBlock Text="{Binding}" ToolTip="You can easily insert content here using HeaderSuffixContent"/>
      </DataTemplate>
    </dragablz:TabablzControl.HeaderSuffixContentTemplate>       

</dragablz:TabablzControl>