Skip to main content
A newer version of this page is available. .

Adding and Removing Tab Items

  • 5 minutes to read

The DXTabControl has the Hide and New buttons that allows end-users to hide/add tab items.

TabControl_HideAndNewButtons_Office2013

Add Tab Items

The New button’s location depends on the TabControlViewBase.NewButtonShowMode property. Below is a list of all possible locations.

  • NoWhere - the New Button is not shown.

    TabControl_NewButtonShowMode_NoWhere

  • InHeaderArea - the New Button is located inside the Header Area.

    TabControl_NewButtonShowMode_InHeaderArea

  • InTabPanel - the New Button is located inside the Tab Panel, next to tab item headers.

    TabControl_NewButtonShowMode_InTabPanel

  • InHeaderAreaAndTabPanel - the New Button is shown in the Tab Panel and Header Area simultaneously.

    TabControl_NewButtonShowMode_InHeaderAreaAndTabPanel

Tip

Demo: TabControl - Views

Requires installation of WPF Subscription. Download

Tab Control provides two ways to add new items by clicking the New button: using its own adding logic and manually. In the first way, when an end-user clicks the New button, the tab control creates a new tab item on its own. The mechanism of creation and the strategy for adding new items depends on how the tab control is populated.

  • When items are initially defined via the Items property, tab control creates a new instance of the DXTabItem type and adds it to the DXTabControl.Items collection.
  • When items are generated based on a collection assigned to the ItemsSource, tab control chooses the mechanism of adding new items based on the data source.

    • If the source collection implements the IBindingList interface, tab control uses its AddNew method to add an item.
    • If the source is an IList implementation, the tab control determines the type of collection objects and adds an instance of the corresponding type to the source.

      Note

      The underlying source should provide notifications when new items are added, otherwise, corresponding tabs won’t be displayed within the tab control.

To control adding new items, you can handle the DXTabControl.TabAdding and DXTabControl.TabAdded events.

The DXTabControl.TabAdding event is raised by the tab control, before the new item is added. In this event, you can manually initialize the newly created item or cancel adding by setting the e.Cancel property to true.

The code snippet below illustrates how to initialize the newly created item.

//Items are defined via the Items collection
private void DXTabControl_TabAdding(object sender, DevExpress.Xpf.Core.TabControlTabAddingEventArgs e) {
    e.Item = new DXTabItem() { Header = "Custom Item", Content = "Custom Item" };
}
//Items are generated based on a collection of the ObservableCollection<TabItemViewModel> type
private void DXTabControl_TabAdding(object sender, DevExpress.Xpf.Core.TabControlTabAddingEventArgs e) {
    e.Item = new TabItemViewModel() { Header = "Custom Item", Content = "Custom Item" };
}

If you use your own data source that doesn’t implement the IList or IBindingList interface, you can handle the DXTabControl.TabAdding event to disable the default mechanism and write your custom logic.

After the new item is added, tab control raises the DXTabControl.TabAdded event. It allows you to customize the newly added item located in the e.Item property, perform selection, etc.

private void DXTabControl_TabAdded(object sender, DevExpress.Xpf.Core.TabControlTabAddedEventArgs e) {
    ((TabItemViewModel)e.Item).Header += "_TabAdded";
}

In the second way, you can add new items by using the TabControlViewBase.NewTabCommand property that works by bypassing the Tab Control’s adding mechanism. If a command is assigned to the NewTabCommand property, Tab Control invokes the specified command when the New button is clicked. In this command, you can implement any required adding logic specific to your underlying data source.

Note

Since the TabControlViewBase.NewTabCommand property works by bypassing the internal Tab Control’s adding logic, the DXTabControl.TabAdding/DXTabControl.TabAdded events won’t be raised.

Use the DXTabControl.AddNewTabItem method to create a new item in code.

Remove and Hide Tab Items

Use the TabControlViewBase.HideButtonShowMode property to specify the the Hide button location.

  • NoWhere - the Hide button is not shown.

    TabControl_HideButtonShowMode_NoWhere

  • InAllTabs - the Hide button is shown in all tab headers.

    TabControl_HideButtonShowMode_InAllTabs

  • InActiveTab - the Hide button is shown in the active tab header only.

    TabControl_HideButtonShowMode_InActiveTab

  • InHeaderArea - the Hide button is shown in the Header Area.

    TabControl_HideButtonShowMode_InHeaderArea

  • InAllTabsAndHeaderArea - the Hide button is shown in all tab headers and in the Header Area.

    TabControl_HideButtonShowMode_InAllTabsAndHeaderArea

  • InActiveTabAndHeaderArea - the Hide button is shown in the active tab header and in the Header Area.

    TabControl_NewButtonShowMode_InHeaderAreaAndTabPanel

Tip

Demo: TabControl - Views

Requires installation of WPF Subscription. Download

Tab item closing is performed in two phases: hiding and removing. The first one is responsible for the tab item hiding that is performed in the following manner. Before the tab item is hidden, tab control raises the cancellable DXTabControl.TabHiding event. If the hiding action has not been canceled, tab control hides the specified tab item and raises the DXTabControl.TabHidden event. After that, the hidden item invokes its DXTabItem.CloseCommand. There, you can implement your own closing\removing logic. The command’s CanExecute state corresponds to the Hide button accessibility.

If an item has been successfully hidden and tab control has the TabControlViewBase.RemoveTabItemsOnHiding property set to true, the tab control removes the item. The Tab control raises the cancellable DXTabControl.TabRemoving event before the item is removed and the DXTabControl.TabRemoved event after the item is removed successfully.

To programmatically remove an item, use the DXTabControl.RemoveTabItem method.