How to: Use Custom Tab Header Buttons to Switch Tabs

• Jun 17, 2019
• 2 minutes to read

This example illustrates methods and events used to manage the selected tabs.

The application uses the DashboardViewer control to load a sample dashboard and show custom buttons in the dashboard title.

Custom buttons are created within the DashboardViewer.CustomizeDashboardTitle event handler. Buttons are the DashboardToolbarItem objects inserted into e.Items collection. The button click event handler is specified in the DashboardToolbarItem constructor. The DashboardToolbarItem’s Tag property holds the navigation direction value.

When the end-user clicks a navigation button, the DashboardViewer.GetSelectedTabPageIndex method is used to find the selected page index. Subsequently the index is incremented or decremented depending on the navigation direction and the DashboardViewer.SetSelectedTabPage method selects the next or previous page.

The Slideshow button starts the timer. Each timer tick forces the transition manager to start the animated transition, calls the DashboardViewer.SetSelectedTabPage method to select the next page and finishes the transition.

The Show Tab Headers button toggles the TabContainerDashboardItem.ShowCaption value to hide or show tab captions.

The following code implements tab navigation in the TabContainerDashboardItem control.

C#

using DevExpress.DashboardCommon;
using System.Linq;
// ...

enum NextPrevValue {
    Next,
    Prev
}

void ShowNextPrevTab(NextPrevValue value) {
    Dashboard dashboard = dashboardViewer.Dashboard;
    TabContainerDashboardItem tabContainer = dashboard.Items.SingleOrDefault(i => i is TabContainerDashboardItem) as TabContainerDashboardItem;
        if(tabContainer != null) {
            int increment = value == NextPrevValue.Next ? 1 : -1;
            string tabContainerName = tabContainer.ComponentName;
            int selectedIndex = dashboardViewer.GetSelectedTabPageIndex(tabContainerName);
            int pageCount = tabContainer.TabPages.Count;
            dashboardViewer.SetSelectedTabPage(tabContainerName, (selectedIndex + pageCount + increment) % pageCount);
        }
} 

VB.NET

Imports DevExpress.DashboardCommon
Imports System.Linq
' ...

Friend Enum NextPrevValue
    [Next]
    Prev
End Enum

Private Sub ShowNextPrevTab(ByVal value As NextPrevValue)
    Dim tabContainer As TabContainerDashboardItem = TryCast(dashboard.Items.SingleOrDefault(Function(i) TypeOf i Is TabContainerDashboardItem), TabContainerDashboardItem)
    If tabContainer IsNot Nothing Then
        Dim increment As Integer = If(value = NextPrevValue.Next, 1, -1)
        Dim tabContainerName As String = tabContainer.ComponentName
        Dim selectedIndex As Integer = dashboardViewer.GetSelectedTabPageIndex(tabContainerName)
        Dim pageCount As Integer = tabContainer.TabPages.Count
        dashboardViewer.SetSelectedTabPage(tabContainerName, (selectedIndex + pageCount + increment) Mod pageCount)
    End If
End Sub 

Note

The complete sample project How to navigate tabs using custom tab header buttons or set up a slide show is available in the DevExpress Examples repository.