DXTabItem Class

Represents a single tab item.

Namespace: DevExpress.Xpf.Core

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

NuGet Package: DevExpress.Wpf.Core

Declaration

C#

public class DXTabItem :
    HeaderedSelectorItemBase<DXTabControl, DXTabItem>

VB.NET

Public Class DXTabItem
    Inherits HeaderedSelectorItemBase(Of DXTabControl, DXTabItem)

Related API Members

The following members return DXTabItem objects:

• DXTabControl.GetTabItem(Int32)
• DXTabControl.GetTabItem(Object)

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.

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.

  MainWindow.xaml

  <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.

  MainWindow.xaml

  <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>
  

  MainWindow.xaml.cs

  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.

  MainWindow.xaml

  <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>
  

  MainWindow.xaml.cs

  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.

Related GitHub Examples

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.

XAML

wpf-docklayoutmanager-use-services-that-implement-the-idocumentmanagerservice/CS/DXDocumentUIServiceSample/MainWindow.xaml#L13

<dx:DXTabControl>
    <dx:DXTabItem Header="WindowedDocumentUIService">
        <v:MainView>

wpf-tabcontrol-customize-background-based-on-tab-state/CS/DXTabControlExample/MainWindow.xaml#L36

<dx:DXTabControl.ItemContainerStyle>
    <Style TargetType="dx:DXTabItem">
        <Setter Property="HoverBackgroundTemplate" Value="{StaticResource TabItemHoverBackground}"/>

wpf-richedit-document-api/CS/DXRichEditControlAPISample/MainWindow.xaml#L29

<dx:DXTabControl x:Name="tabControl" Grid.Row="1" Grid.Column="0" SelectionChanged="tabControl_SelectionChanged">
    <dx:DXTabItem Header="CS" Width="250">
        <dxre:RichEditControl x:Name="richEditControlCS" ActiveViewType="Simple" />

mvvm-application-with-wpf-bars/CS/Step 4 - building views/MainPage.xaml#L22

</dx:DXTabControl.View>
<dx:DXTabItem Content="{Binding}" Header="Persons">
    <dx:DXTabItem.ContentTemplate>

XPO_how-to-bind-data-to-wpf-controls-using-xpservermodeview-or-xpinstantfeedbackview/CS/WpfApplication/MainWindow.xaml#L11

<dx:DXTabControl Margin="4">
    <dx:DXTabItem Header="XPServerModeView">
        <dxg:GridControl Grid.Row="1" x:Name="gridServerModeView">

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