Closable tabs in WPF TabControl (TabControlExt)

Visibility of close button in TabItem and TabPanel

The display mode of the Close button is specified by using the CloseButtonType property. This dependency property sets the display mode for the Close button.

The following Close button modes are supported by the TabControlExt.

  • Common – The close button is displayed commonly for all tab items in the TabControlExt.
  • Individual – The close button is displayed individually for each tab item in the TabControlExt.
  • Both – The close button is displayed commonly for all tab items and also individually for each tab item in TabControlExt.
  • Hide – The close button is hidden in the TabControlExt.
  • IndividualOnMouseOver - The close button is displayed when the mouse hovers over the tab item in the TabControlExt.

The following code snippet illustrates how to set the Both Close button mode in the TabControlExt.

<!-- Adding TabcontrolExt with CloseButtonType is Both -->

<syncfusion:TabControlExt Margin="20" Name="tabControlExt" CloseButtonType="Both">

    <!-- Adding TabItemExt -->

    <syncfusion:TabItemExt Name="tabItemExt1" Header="TabItemExt1"/>

    <!-- Adding TabItemExt -->

    <syncfusion:TabItemExt Name="tabItemExt2" Header="TabItemExt2"/>

</syncfusion:TabControlExt>
// Creating instance of the TabControlExt control

TabControlExt tabControlExt = new TabControlExt();

//Creating the instance of StackPanel

StackPanel stackPanel = new StackPanel();

//Creating instance of the TabItemExt 

TabItemExt tabItemExt1 = new TabItemExt();

// Setting header of the TabItemExt

tabItemExt1.Header = "TabItemExt1";

//Adding TabItemExt to TabControlExt

tabControlExt.Items.Add(tabItemExt1);

//Creating instance of the TabItemExt2 

TabItemExt tabItemExt2 = new TabItemExt();

// Setting header of the TabItemExt

tabItemExt2.Header = "TabItemExt2";

//Adding TabItemExt to TabControlExt

tabControlExt.Items.Add(tabItemExt2);           

//Setting CloseButtonType property as Both

tabControlExt.CloseButtonType = CloseButtonType.Both;

//Adding control to the StackPanel

stackPanel.Children.Add(tabControlExt);

Display close button in both TabItem and TabPanel

Show/Hide the close button for specific TabItem

The visibility of the TabItem’s CloseButton is handled using the CloseButtonState property. The CloseButtonState is effective only when the CloseButtonType property of TabControlExt is set to one among individual, extended, or both.

CloseButtonState

Description

Visible

The close button of TabItemExt is visible

Collapsed

The close button of TabItemExt is collapsed

Hidden

The close button of TabItemExt is hidden

<syncfusion:TabControlExt x:Name="Tab" CloseButtonType="Individual"
                                      >
                <syncfusion:TabItemExt Header="Beijing" CloseButtonState="Visible" />
            
            <syncfusion:TabItemExt Header="Madagascar" CloseButtonState="Collapsed"/>
            
            <syncfusion:TabItemExt Header="New York" CloseButtonState="Hidden"/>
            <syncfusion:TabItemExt Header="London"/>
            </syncfusion:TabControlExt>

Items of TabControl is rendered with different values of CloseButtonState

NOTE

Beijing TabItem has CloseButtonState as Visible, Madagascar TabItem has CloseButtonState as Collapsed and New York" TabItem has CloseButtonState as Hidden.

Restrict closing of TabItem

Through closing event

The closure of TabItem can now be restricted by setting e.Cancel to true in OnCloseButtonClick delegate. e represents the event argument CloseTabEventArgs for OnCloseButtonClick event. The default value of e.Cancel is false.

The following code illustrates the same.

<syncfusion:TabControlExt OnCloseButtonClick="TabControlExt_OnCloseButtonClick">

            <syncfusion:TabItemExt Header="Tab1"/>
            
            <syncfusion:TabItemExt Header="Tab2"/>
            
            <syncfusion:TabItemExt Header="Tab3"/>
            
</syncfusion:TabControlExt>
private void TabControlExt_OnCloseButtonClick(object sender, CloseTabEventArgs e)
 
 {

            if (e.TargetTabItem.Header.ToString() == "Tab1")
                e.Cancel = true;
 }

Using the CanClose property

Users can restrict the closing functionality of TabItem using the CanClose property of TabItemExt. When the CanClose property is set to false, the corresponding TabItem will be non-closable. The default value of this property is true.

The following code sample illustrates restricting the closing functionality of TabItem.

<syncfusion:TabControlExt x:Name="Tab" CloseButtonType="Individual"
                                      >
                <syncfusion:TabItemExt Header="Beijing" CanClose="false"/>
            
            <syncfusion:TabItemExt Header="Madagascar"/>
            
            <syncfusion:TabItemExt Header="New York"/>
            <syncfusion:TabItemExt Header="London"/>
            </syncfusion:TabControlExt>

Beijing tabitem is non-closable

Hide or Delete item when closing a TabItem

The CloseMode property of TabControlExt decides whether the tab item can be hidden or removed from the items collection. If the property CloseMode is Hide, the tab item will be hidden and the selection will be moved to previous selected index while hiding it. Also, if the property CloseMode is Delete, the tab item will be removed from the items collection and the selection will be retained in the same index while removing it. The default value of the CloseMode property is Hide.