windowsforms-114576-controls-and-libraries-form-layout-managers-tab-control.md
An XtraTabControl container allows you to organize other controls into pages.
Use XtraTabControl containers to create a tabbed UI in limited, local areas of a form. Users cannot undock or rearrange XtraTabControl pages.
If you need to implement an MDI (multi-document interface) rather than organize controls into pages, use the following components instead:
Tabbed FormThe replacement for standard Visual Studio Forms that embeds page headers into its title bar. This component allows you to create browser-like Forms.Application UI Manager (with Tabbed View)The most powerful DevExpress WinForms component for building MDI apps. This component allows you to load page content on-demand, supports interaction with Dock Panels, supports floating pages, and more.Tabbed MDI ManagerThe simplified version of the Application UI Manager, designed for light setups when you do not need the full range of Application UI Manager’s functionality.
At design time, invoke the control’s smart tag menu and click the “Tab Pages” link. This link opens the Collection Editor dialog that allows you to add, rearrange, and remove pages, and set their settings.
To add or remove pages in code, modify the XtraTabControl.TabPages collection.
// Add a new page
XtraTabPage newPage = new XtraTabPage();
newPage.Text = "New Page";
xtraTabControl1.TabPages.Add(newPage);
// Remove the 2nd tab
xtraTabControl1.TabPages.RemoveAt(1);
' Add a new page
Dim newPage As New XtraTabPage()
newPage.Text = "New Page"
xtraTabControl1.TabPages.Add(newPage)
' Remove the 2nd tab
xtraTabControl1.TabPages.RemoveAt(1)
At design time, you can drag controls directly onto XtraTabControl pages. You can use the TablePanel or other layout managers to create a virtual grid, and place controls into cells of this grid.
In code, add controls to the page’s Controls collection.
newPage.Controls.Add(new SimpleButton() {
Text = "Button #1",
Size = new Size(200, 50),
Location = new Point(10, 10)
});
newPage.Controls.Add(new SimpleButton() {
Text = "Button #2",
Size = new Size(200, 50),
Location = new Point(10, 50)
});
newPage.Controls.Add(New SimpleButton() With {.Text = "Button #1", .Size = New Size(200, 50), .Location = New Point(10, 10)})
newPage.Controls.Add(New SimpleButton() With {.Text = "Button #2", .Size = New Size(200, 50), .Location = New Point(10, 50)})
XtraTabPage.ImageOptions — Allows you to set raster or vector icons for page headers. Note that if you use vector images from the DevExpress Image Gallery, they are added with the default 32x32 size. Set up the ImageOptions.SvgImageSize setting to scale down vector icons.
HeaderOrientation and HeaderLocation — Use these settings to specify the orientation and position of tab headers, respectively.
Header Buttons allow your users to navigate between pages when there’s not enough space to display all headers at once, and the MultiLine setting is off.
To enable these buttons, use the XtraTabControl.HeaderButtons property. This property accepts flag enumeration values.
xtraTabControl1.HeaderButtons = TabButtons.Prev | TabButtons.Next;
xtraTabControl1.HeaderButtons = TabButtons.Prev Or TabButtons.Next
To control header button visibility, change the HeaderButtonsShowMode property.
xtraTabControl1.HeaderButtonsShowMode = TabButtonShowMode.Always;
xtraTabControl1.HeaderButtonsShowMode = TabButtonShowMode.Always
The star button next to the standard Previous-Next-Close set in the image above is a custom button. You can modify the XtraTabControl.CustomHeaderButtons collection to add your own buttons.
using DevExpress.XtraTab;
using DevExpress.XtraTab.Buttons;
using DevExpress.XtraTab.ViewInfo;
CustomHeaderButton btnFavorites = new CustomHeaderButton();
btnFavorites.Caption = "Go to Favorite";
btnFavorites.ImageOptions.SvgImage = svgImageCollection[5];
btnFavorites.ImageOptions.SvgImageSize = new Size(16, 16);
btnFavorites.Kind = DevExpress.XtraEditors.Controls.ButtonPredefines.Glyph;
btnFavorites.Tag = "btnFavorite"; // Unique button ID
xtraTabControl1.CustomHeaderButtons.Add(btnFavorites);
xtraTabControl1.CustomHeaderButtonClick += OnCustomHeaderButtonClick;
void OnCustomHeaderButtonClick(object sender, CustomHeaderButtonEventArgs e) {
if (e.Button.Tag == "btnFavorite") {
// Process user clicks
}
}
Imports DevExpress.XtraTab
Imports DevExpress.XtraTab.Buttons
Imports DevExpress.XtraTab.ViewInfo
Dim btnFavorites As New CustomHeaderButton()
btnFavorites.Caption = "Go to Favorite"
btnFavorites.ImageOptions.SvgImage = svgImageCollection(5)
btnFavorites.ImageOptions.SvgImageSize = New Size(16, 16)
btnFavorites.Kind = DevExpress.XtraEditors.Controls.ButtonPredefines.Glyph
btnFavorites.Tag = "btnFavorite" ' Unique button ID
xtraTabControl1.CustomHeaderButtons.Add(btnFavorites)
xtraTabControl1.CustomHeaderButtonClick += OnCustomHeaderButtonClick
Private Sub OnCustomHeaderButtonClick(ByVal sender As Object, ByVal e As CustomHeaderButtonEventArgs)
If e.Button.Tag = "btnFavorite" Then
' Process user clicks
End If
End Sub
The following example hides tab headers and implements navigation between tab pages using buttons:
using System;
using DevExpress.Utils;
using DevExpress.XtraTab;
namespace DXApplication42 {
public partial class Form1 : DevExpress.XtraEditors.XtraForm {
public Form1() {
InitializeComponent();
xtraTabControl1.ShowTabHeader = DefaultBoolean.False;
}
private void simpleButton1_Click(object sender, EventArgs e) {
if(xtraTabControl1.SelectedTabPageIndex != 0)
xtraTabControl1.SelectedTabPageIndex--;
}
private void simpleButton2_Click(object sender, EventArgs e) {
if (xtraTabControl1.SelectedTabPageIndex != xtraTabControl1.TabPages.Count - 1)
xtraTabControl1.SelectedTabPageIndex++;
}
private void xtraTabControl1_SelectedPageChanged(object sender, TabPageChangedEventArgs e) {
buttonPrev.Enabled = xtraTabControl1.SelectedTabPageIndex != 0;
buttonNext.Enabled = xtraTabControl1.SelectedTabPageIndex != xtraTabControl1.TabPages.Count - 1;
}
}
}
Imports System
Imports DevExpress.Utils
Imports DevExpress.XtraTab
Namespace DXApplication42
Partial Public Class Form1
Inherits DevExpress.XtraEditors.XtraForm
Public Sub New()
InitializeComponent()
xtraTabControl1.ShowTabHeader = DefaultBoolean.False
End Sub
Private Sub simpleButton1_Click(ByVal sender As Object, ByVal e As EventArgs)
If xtraTabControl1.SelectedTabPageIndex <> 0 Then
xtraTabControl1.SelectedTabPageIndex -= 1
End If
End Sub
Private Sub simpleButton2_Click(ByVal sender As Object, ByVal e As EventArgs)
If xtraTabControl1.SelectedTabPageIndex <> xtraTabControl1.TabPages.Count - 1 Then
xtraTabControl1.SelectedTabPageIndex += 1
End If
End Sub
Private Sub xtraTabControl1_SelectedPageChanged(ByVal sender As Object, ByVal e As TabPageChangedEventArgs)
buttonPrev.Enabled = xtraTabControl1.SelectedTabPageIndex <> 0
buttonNext.Enabled = xtraTabControl1.SelectedTabPageIndex <> xtraTabControl1.TabPages.Count - 1
End Sub
End Class
End Namespace