Context menu in WPF TabControl (TabControlExt)

This section explains how to show the tab list and tabitem context menu and add custom context menu in TabControl.

Built-in tabitem context menu

You can show the built-in tabitem context menu by setting the TabControlExt.ShowTabItemContextMenu property to true in TabControl.

The built-in tabitem context menu has the following menu items:

  • Close - Closes the current or selected tabitem.
  • Close All But This - Closes all the tabitem, except the current or selected tabitem.
  • Close All - Closes all the tabitem.

NOTE

The CloseMode in TabControl is an enum that includes option Hide and Delete. When you click any default options (Close, Close All and Close All But This) in tabitem context menu and when the CloseMode is set to Hide, the tabitem moves to the hidden state or when the CloseMode is set to Delete, the tabitem is removed from TabControl, and it automatically gets deleted from the tabitem collection.

<syncfusion:TabControlExt Name="tabControl" ShowTabItemContextMenu="True" CloseMode="Delete">
    <syncfusion:TabItemExt Header="tabItem1" />
    <syncfusion:TabItemExt Header="tabItem2" />        
</syncfusion:TabControlExt>
//Set the visibility of tabitem context menu
tabControlExt.ShowTabItemContextMenu = true;

//Set close mode to TabControl
tabControlExt.CloseMode = CloseMode.Delete;

Enable context menu of tabitem in WPF TabControl

In the below screenshot, the ShowTabItemContextMenu property is set to false in TabControl.

Disable context menu of tabitem in WPF TabControl

TabItem Context menu events

The TabControl notifies that the tabitem is closed through OnCloseOtherTabs, OnCloseAllTabs and OnCloseButtonClick events. You can use the TargetTabItem property to find out which tabitem is closing from TabControl in these events.

tabControlExt.OnCloseAllTabs += TabControlExt_OnCloseAllTabs;
tabControlExt.OnCloseButtonClick += TabControlExt_OnCloseButtonClick;
tabControlExt.OnCloseOtherTabs += TabControlExt_OnCloseOtherTabs;

 private void TabControlExt_OnCloseOtherTabs(object sender, CloseTabEventArgs e)
{            
    var targetTabItem = e.TargetTabItem;
}

private void TabControlExt_OnCloseButtonClick(object sender, CloseTabEventArgs e)
{
    var targetTabItem = e.TargetTabItem;
}

private void TabControlExt_OnCloseAllTabs(object sender, CloseTabEventArgs e)
{
    var targetTabItem = e.TargetTabItem;
}

Custom tabitem context menu

You can add the custom tabitem context menu using the TabItemExt.ContextMenuItems property in TabControl. This property is enabled by setting the TabControlExt.IsCustomTabItemContextMenuEnabled property to true. The default value is false.

<syncfusion:TabControlExt Name="tabControl" IsCustomTabItemContextMenuEnabled="True">
    <syncfusion:TabItemExt Header="tabItem1">
        <syncfusion:TabItemExt.ContextMenuItems>
            <syncfusion:CustomMenuItem Header="Edit" />
        </syncfusion:TabItemExt.ContextMenuItems>
    </syncfusion:TabItemExt>
    <syncfusion:TabItemExt Header="tabItem2">
        <syncfusion:TabItemExt.ContextMenuItems>
            <syncfusion:CustomMenuItem Header="Edit" />
        </syncfusion:TabItemExt.ContextMenuItems>
    </syncfusion:TabItemExt>
</syncfusion:TabControlExt>
// Enable custom tabitem context menu
tabControlExt.IsCustomTabItemContextMenuEnabled = true;

// Adding custom context menu for the first tabitem
CustomMenuItem customMenuItem = new CustomMenuItem();
customMenuItem.Header = "Edit";
tabItemExt1.ContextMenuItems.Add(customMenuItem);

// Adding custom context menu for the second tabitem
CustomMenuItem customMenuItem1 = new CustomMenuItem();
customMenuItem1.Header = "Edit";
tabItemExt2.ContextMenuItems.Add(customMenuItem1);

Added custom context menu for tabitem in WPF TabControl

If you want to show only custom context menu in TabControl, then you can collapse the default context menu item using TabControlExt.DefaultContextMenuItemVisibility property.

<syncfusion:TabControlExt Name="tabControl" IsCustomTabItemContextMenuEnabled="True"
                                            DefaultContextMenuItemVisibility="Collapsed">
    <syncfusion:TabItemExt Header="tabItem1">
        <syncfusion:TabItemExt.ContextMenuItems>
            <syncfusion:CustomMenuItem Header="Edit" />
            <syncfusion:CustomMenuItem Header="Copy" />
            <syncfusion:CustomMenuItem Header="Paste" />
        </syncfusion:TabItemExt.ContextMenuItems>
    </syncfusion:TabItemExt>
</syncfusion:TabControlExt>
//Collapse the default contextmenu visibility
tabControlExt.DefaultContextMenuItemVisibility = Visibility.Collapsed;

//Adding custom context menu for the first tabitem
CustomMenuItem customMenuItem1 = new CustomMenuItem();
CustomMenuItem customMenuItem2 = new CustomMenuItem();
CustomMenuItem customMenuItem3 = new CustomMenuItem();

customMenuItem1.Header = "Edit";
customMenuItem2.Header = "Copy";
customMenuItem3.Header = "Paste";

tabItemExt1.ContextMenuItems.Add(customMenuItem1);
tabItemExt1.ContextMenuItems.Add(customMenuItem2);
tabItemExt1.ContextMenuItems.Add(customMenuItem3);

Disable default context menu in WPF TabControl

Tab list menu for switching tabs

You can show the tab list menu by setting the TabControlExt.ShowTabListContextMenu property to true in TabControl. The header of all tabitem’s are shown as a menu item in the tab list menu. The default value is true. You can also switch the tabitem by selecting an item from the tab list menu.

<syncfusion:TabControlExt Name="tabControl" ShowTabListContextMenu="True">
    <syncfusion:TabItemExt Header="tabItem1" />
    <syncfusion:TabItemExt Header="tabItem2" />        
</syncfusion:TabControlExt>
//Set the visibility of tab list context menu
tabControlExt.ShowTabListContextMenu = true;

Enable tablist context menu in WPF TabControl

In the below screenshot, the ShowTabListContextMenu property is set to false in TabControl.

Disable tablist context menu in WPF TabControl

Appearance of tab list menu

You can customize the tab list menu appearance by using TabControlExt.TabListContextMenuItemTemplate in TabControl.

<syncfusion:TabControlExt x:Name="tabControl"
                          ShowTabListContextMenu="True"
                          >
    <syncfusion:TabControlExt.TabListContextMenuItemTemplate>
        <DataTemplate>
            <TextBlock VerticalAlignment="Center" FontFamily="Calibri" Foreground="Blue" FontStyle="Oblique" FontSize="15" Text="{Binding}" />
        </DataTemplate>
    </syncfusion:TabControlExt.TabListContextMenuItemTemplate>
    <syncfusion:TabItemExt Header="tabItem1" />
    <syncfusion:TabItemExt Header="tabItem2" />
</syncfusion:TabControlExt>

Customize the tab list context menu