You are viewing help content for pre-release software. This document and the features it describes are subject to change. Switch to the current version.

DXTabControl Class

Represents the DXTabControl.

Namespace: DevExpress.Xpf.Core

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

Declaration

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

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.

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

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

    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. The control retrieves data items from the data source and adds them to the DXTabControl.Items collection. You should specify the DXTabControl.ItemTemplate and DXTabControl.ItemHeaderTemplate templates to define the tab header and page appearance.

    <dx:DXTabControl ItemsSource="{Binding Items}" ... />
    
    TIP

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

Integration into the 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.

Inheritance

Object
DispatcherObject
DependencyObject
Visual
UIElement
FrameworkElement
Control
ItemsControl
DevExpress.Xpf.Core.Native.SelectorBase<DXTabControl, DXTabItem>
DevExpress.Xpf.Core.Native.HeaderedSelectorBase<DXTabControl, DXTabItem>
DXTabControl
See Also