Pin and Unpin TabItems in WPF TabControl (TabControlExt)

7 May 20217 minutes to read

This section explains the pin and unpin tab items in TabControl.

Enabling pin and unpin behaviors

If you want to pin or unpin the tab items, use the TabItemExt.AllowPin property as true. When this property is set to false, the pin and unpin behaviors of tab item will be disabled. The default value of the TabItemExt.AllowPin property is false.

XAML

<syncfusion:TabControlExt  Name="tabControlExt">
    <syncfusion:TabItemExt AllowPin="True"
                           Header="tabItem1" Name="tabItemExt1"/>
    <syncfusion:TabItemExt AllowPin="True" 
                           Header="tabItem2" Name="tabItemExt2"/>
</syncfusion:TabControlExt>

C#

tabItemExt1.AllowPin = true;
tabItemExt2.AllowPin = true;

NOTE

View Sample in GitHub

Functionality of PinButton

When the corresponding tab item is pinned, it will be inserted at first position of the tab header panel(if its not have any pinned tab. Otherwise, the pinned tab item will be added next to last pinned item). When the tab item is unpinned, it will be placed after to the pinned tab items.

Pin and Unpin tab items using PinButton

If you want to pin or unpin the tab item using the pin button, use the TabItemExt.ShowPin property value as true and set the TabItemExt.AllowPin property value as true. The default value of TabItemExt.ShowPin property is false, so the PinButton is collapsed from header panel of the tab item.

XAML

<syncfusion:TabControlExt  Name="tabControlExt">
    <syncfusion:TabItemExt ShowPin="True" 
                           AllowPin="True"
                           Header="tabItem1" Name="tabItemExt1"/>
    <syncfusion:TabItemExt ShowPin="True" 
                           AllowPin="True" 
                           Header="tabItem2" Name="tabItemExt2"/>
</syncfusion:TabControlExt>

C#

//Showing the pin buttons
tabItemExt1.ShowPin = true;
tabItemExt2.ShowPin = true;

//Enabling the pin buttons
tabItemExt1.AllowPin = true;
tabItemExt2.AllowPin = true;

NOTE

If the ShowPin property is true, and the AllowPin property is false, the PinButton will be displayed as a disabled button.

NOTE

View Sample in GitHub

Pin and Unpin the tab items programmatically

You can pin or unpin the tab items programmatically by using the TabItemExt.IsPinned property. If the TabItemExt.IsPinned property is set to true, the corresponding item will be pinned. Also, if the TabItemExt.IsPinned property is set as false and the item is pinned, then it will be unpinned. The default value of TabItemExt.IsPinned property is false.

XAML

<syncfusion:TabControlExt Name="tabControlExt">
    <syncfusion:TabItemExt ShowPin="True" 
                           AllowPin="True"
                           IsPinned="False"
                           Header="tabItem1" Name="tabItemExt1"/>
    <syncfusion:TabItemExt ShowPin="True" 
                           AllowPin="True" 
                           IsPinned="True"
                           Header="tabItem2" Name="tabItemExt2"/>
</syncfusion:TabControlExt>

C#

//Pin or unpin the tab items programmatically
tabItemExt1.IsPinned = false;
tabItemExt2.IsPinned = true;

//Showing the pin buttons
tabItemExt1.ShowPin = true;
tabItemExt2.ShowPin = true;

//Enabling the pin buttons
tabItemExt1.AllowPin = true;
tabItemExt2.AllowPin = true;

NOTE

View Sample in GitHub

Pin and Unpin tab items using ContextMenu

You can pin or unpin the tab items using the context menu. You can enable it by setting the TabItemExt.AllowPin property value as true. If the TabItemExt.AllowPin property is true, and the tab item is not pinned, “Pin Tab” option will be visible. If the tab item is pinned already, “Unpin Tab” option will be visible in the context menu.

NOTE

If you want to show the pin and unpin buttons , use the TabItemExt.ShowPin value as true.

XAML

<syncfusion:TabControlExt Name="tabControlExt">
    <syncfusion:TabItemExt ShowPin="True" 
                           AllowPin="True"
                           IsPinned="False"
                           Header="tabItem1" Name="tabItemExt1"/>
    <syncfusion:TabItemExt ShowPin="True" 
                           AllowPin="True" 
                           IsPinned="True"
                           Header="tabItem2" Name="tabItemExt2"/>
</syncfusion:TabControlExt>

C#

//Pin or unpin the tab items programmatically
tabItemExt1.IsPinned = false;
tabItemExt2.IsPinned = true;

//Showing the pin buttons
tabItemExt1.ShowPin = true;
tabItemExt2.ShowPin = true;

//Enabling the pin buttons
tabItemExt1.AllowPin = true;
tabItemExt2.AllowPin = true;

Re-order pinned tabs

You can re-order the pinned item within the pinned items and re-order the un-pinned item within the unpinned, but re-ordering between pinned and unpinned or unpinned and pinned has been restricted. If the pinned tab item is dropped inside the unpinned tab items, the dragged item will be inserted at the last position of pinned tab item and if the unpinned tab item is dropped inside pinned tab items, the dragged item will be inserted after the last pinned item. You can disable this reordering by using th AllowDragDrop property as false.