DXTabControl Class

Represents the DXTabControl.

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

Declaration

C#
VB.NET

public class DXTabControl :
    HeaderedSelectorBase<DXTabControl, DXTabItem>,
    ICloneable,
    IThemedWindowSupport,
    IMultipleElementRegistratorSupport,
    IBarNameScopeSupport,
    IInputElement

Public Class DXTabControl
    Inherits HeaderedSelectorBase(Of DXTabControl, DXTabItem)
    Implements ICloneable,
               IThemedWindowSupport,
               IMultipleElementRegistratorSupport,
               IBarNameScopeSupport,
               IInputElement

The following members return DXTabControl objects:

Remarks

The DXTabControl provides you the tab-based navigation functionality for your applications.

TabControl

Create a DXTabControl

Drag the DXTabControl from the Visual Studio Toolbox and drop it onto the form.

XAML

<dx:DXTabControl>
    <dx:DXTabItem Header="Tab">
        <Grid Background="Transparent"/>
    </dx:DXTabItem>
</dx:DXTabControl>

Populate with Items

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" }
    };
    }
}

Tip

Refer to the Binding to Data Overview. topic for more information on how to bind a tab control to data.

Integrate to a ThemedWindow

Set the WindowKind to Tabbed to integrate the DXTabControl into the ThemedWindow.

WindowKind-Tabbed

Hide Tabs

The DXTabControl allows you to hide individual tab items. A hidden tab item is not disposed and can be shown later. To hide a tab, you should display the Tab’s Hide button with the DXTabItem.AllowHide property and use the HideTabItem method. Refer to the Showing and Hiding Tab Items topic for more information on how to hide and show tabs.

Control Appearance

The view objects define the DXTabControl‘s layout, style and behavior settings. Views are represented by the TabControlViewBase descendant classes. Create a view object and assign it to the DXTabControl.View property to apply a view to the DXTabControl.

Refer to the Appearance Customization topic for more information.

The following code snippets (auto-collected from DevExpress Examples) contain references to the DXTabControl 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#L12

<Grid>
    <dx:DXTabControl>
        <dx:DXTabItem Header="WindowedDocumentUIService">

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

<Grid>
    <dx:DXTabControl Name="tabControl" BackgroundTemplate="{StaticResource TabControlBackground}">
        <dx:DXTabControl.ItemContainerStyle>

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

</dxb:BarManager.Bars>
<dx:DXTabControl SelectedIndex="0">
    <dx:DXTabControl.View>

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

<Grid>
    <dx:DXTabControl Margin="4">
        <dx:DXTabItem Header="XPServerModeView">

wpf-spreadsheet-chart-api/CS/SpreadsheetWPFChartAPISamples/MainWindow.xaml#L29


<dx:DXTabControl x:Name="tabControl" Grid.Row="1" Grid.Column="0" SelectionChanged="tabControl_SelectionChanged">
    <dx:DXTabItem Header="CS" Width="250">