Skip to main content

DevExpress v24.1 Update — Your Feedback Matters

Our What's New in v24.1 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DXTabItem Class

Represents a single tab item.

Namespace: DevExpress.Xpf.Core

Assembly: DevExpress.Xpf.Core.v24.1.dll

NuGet Package: DevExpress.Wpf.Core

#Declaration

public class DXTabItem :
    HeaderedSelectorItemBase<DXTabControl, DXTabItem>

The following members return DXTabItem objects:

#Remarks

The DXTabControl contains a collection of tab pages, represented by the DXTabItem objects (tab items). This collection is zero-based indexed and can be accessed using the DXTabControl.Items property.

TabControl_TabItem

You can add DXTabItems in the DXTabControl in any of the following ways:

  • Click the Add Tab item in the DXTabControl’s Smart Tag.

  • Create DXTabItem objects and add them to the DXTabControl.Items collection.

    <dx:DXTabControl> 
        <dx:DXTabItem Header="Page 1"> 
            <Label Content="Hello, world!"/> 
        </dx:DXTabItem> 
        <dx:DXTabItem Header="Page 2"> 
            <Label Content="DXTabControl"/> 
        </dx:DXTabItem> 
    </dx:DXTabControl>
    
  • Add arbitrary objects (data items) to the DXTabControl.Items collection and specify the DXTabControl.ItemTemplate and DXTabControl.ItemHeaderTemplate templates. These templates define how to present tab headers and pages, respectively. In this instance, DXTabItem objects will be generated from data items automatically.

    <Grid> 
        <Grid.Resources> 
            <DataTemplate x:Key="ItemHeaderTemplate"> 
                <TextBlock Text="{Binding HeaderText}"/> 
            </DataTemplate> 
            <DataTemplate x:Key="ItemContentTemplate"> 
                <TextBlock Text="{Binding PageText}"/> 
            </DataTemplate> 
        </Grid.Resources> 
        <dx:DXTabControl ItemHeaderTemplate="{StaticResource ItemHeaderTemplate}" 
                         ItemTemplate="{StaticResource ItemContentTemplate}" 
                         Name="dXTabControl1"/> 
    </Grid>
    
    public class TabDataItem {
        public string PageText { get; set;}
        public string HeaderText { get; set;}
    }
    //... 
    dXTabControl1.Items.Add(new TabDataItem() {
        HeaderText = "Page 1", PageText = "Hello, world!" 
    });
    dXTabControl1.Items.Add(new TabDataItem() {
        HeaderText = "Page 2", PageText = "DXTabControl" 
    });
    
  • Bind the tab control to a data source. To do this, assign a data source to the DXTabControl.ItemsSource property. In this case, the control retrieves data items from the data source and add them to the DXTabControl.Items collection. Similar to the previous case, you should specify the DXTabControl.ItemTemplate and DXTabControl.ItemHeaderTemplate templates to define the tab headers and pages visual presentation.

    <Window ...
        xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"/>
        <Grid>
            <Grid.Resources>
                <DataTemplate x:Key="ItemHeaderTemplate">
                    <TextBlock Text="{Binding HeaderText}"/>
                </DataTemplate>
                <DataTemplate x:Key="ItemContentTemplate">
                    <TextBlock Text="{Binding PageText}"/>
                </DataTemplate>
            </Grid.Resources>
            <dx:DXTabControl ItemHeaderTemplate="{StaticResource ItemHeaderTemplate}" 
                             ItemTemplate="{StaticResource ItemContentTemplate}" 
                             Name="dXTabControl1" ItemsSource="{Binding}"/>
    
        </Grid>
    </Window>
    
    public partial class MainWindow : Window
    {
    public class TabDataItem
    {
        public string PageText { get; set; }
        public string HeaderText { get; set; }
    }
    
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = new ObservableCollection<TabDataItem>() {
            new TabDataItem() { HeaderText = "Page 1", PageText = "Hello, world!" },
            new TabDataItem() { HeaderText = "Page 2", PageText = "DXTabControl" }
        };
        }
    }
    

A tab item consists of a header and content. Tab items’ headers are displayed in the Header Panel. An end-user can select an item by clicking its header. A tab item’s header can optionally contain an icon and a close button, used to hide the item’s header from the Header Panel. An image to be used as an icon is specified by the DXTabItem.Icon property. The close button’s visibility is specified by the DXTabItem.AllowHide property.

The DXTabControl contains a popup menu (header menu), whose items correspond to tab items in the DXTabControl. Clicking a menu item automatically selects the corresponding tab item. Content of the menu item is specified by the corresponding tab item’s DXTabItem.HeaderMenuContent property. To specify whether a tab item is included into the header menu, use the DXTabItem.VisibleInHeaderMenu property.

To learn more about tab item features, see DXTabControl.

The following code snippets (auto-collected from DevExpress Examples) contain references to the DXTabItem class.

Note

The algorithm used to collect these code examples remains a work in progress. Accordingly, the links and snippets below may produce inaccurate results. If you encounter an issue with code examples below, please use the feedback form on this page to report the issue.

#Inheritance

Show 11 items
Object
DispatcherObject
DependencyObject
Visual
UIElement
FrameworkElement
Control
ContentControl
DevExpress.Xpf.Core.Native.SelectorItemBase<DXTabControl, DXTabItem>
DevExpress.Xpf.Core.Native.HeaderedSelectorItemBase<DXTabControl, DXTabItem>
DXTabItem
See Also