DXTabControl Overview

• May 22, 2020
• 3 minutes to read

DXTabControl is designed to bring the tab-based navigation functionality to your web applications, powered by Silverlight.

Tab Items (Pages)

Tab items (pages) are represented by DXTabItem objects. You can create them in one of the following ways.

• Manually create DXTabItem objects and add them to the DXTabControl.Items collection. This can be done in XAML as shown below.

  XAML

  
  <dx:DXTabControl>
      <dx:DXTabItem Header="Page 1">
          <TextBlock Text="Hello, world!"/>
      </dx:DXTabItem>
      <dx:DXTabItem Header="Page 2">
          <TextBlock Text="DXTabControl"/>
      </dx:DXTabItem>
  </dx:DXTabControl>
  

• Manually add arbitrary objects (data items) to the DXTabControl.Items collection and specify the DXTabControl.ItemTemplate and DXTabControl.ItemHeaderTemplate templates that define how to present tab headers and pages, respectively. In this instance, DXTabItem objects will be generated from data items automatically.

  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>
  

  C#

  
  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 instance, the control will retrieve data items from the data source and add them to the DXTabControl.Items collection automatically. Similar to the previous case, you should specify the DXTabControl.ItemTemplate and DXTabControl.ItemHeaderTemplate templates to define the tab headers and pages visual presentation.

  To learn more on binding a tab control to data, see Binding to Data.

NOTE

When generating a DXTabItem object from a data item, the tab control assigns the data item to the DXTabItem.Content property.

To obtain a tab item either by its index or by a corresponding data item, use the DXTabControl.GetTabItem method. After the DXTabControl.Items collection has been changed, the DXTabControl.ItemsChanged event is raised.

Tab Item Settings

A tab item consists of a header and content, specified by the DXTabItem.Header and DXTabItem.Content properties respectively. The templates, defining the visual representation of the tab item's header and content, are specified via the DXTabItem.HeaderTemplate and DXTabItem.ContentTemplate properties respectively. You can specify an icon to be displayed within the tab item's header. To do this, use the DXTabItem.Icon property. The width and height of the icon are specified by the DXTabItem.IconWidth and DXTabItem.IconHeight properties respectively.

Tab items are visually identified by their headers that are displayed within the Header Panel.

The Header Panel can be located at the top (by default), at the bottom, on the left side or the right side of a tab item. The location is specified by the TabControlViewBase.HeaderLocation property.

Selecting Tab Items

DXTabControl provides a popup menu (header menu), allowing the selection of tab items. To invoke this menu, click the arrow displayed in the corner of the tab control. Items in this menu correspond to tab items. Clicking a menu item automatically selects the corresponding tab item.

To learn more, see Navigating Between Tab Items.

Tab Control Layout

Tab control layout, style and behavior settings are defined by view objects. Views are represented by the TabControlViewBase descendant classes. To apply a view to the tab control, create a view object and assign it to the DXTabControl.View property. To learn more about views, see Views.

The tab control visual appearance is defined by four templates: DXTabControl.LayoutBottomTemplate, DXTabControl.LayoutLeftTemplate, DXTabControl.LayoutRightTemplate and DXTabControl.LayoutTopTemplate. Each template corresponds to a particular location of the Header Panel. For instance, if the Panel is located on the right side of a control, the template specified by the DXTabControl.LayoutRightTemplate property is applied.