LIDOR SYSTEMS

Advanced User Interface Controls and Components

How to Add a Close Button to Tabs in TabControl

July 30, 2012

By default close button is shown to the right side in tab strip of the TabControl and when clicked closes the currently selected tab page. However, if you want to show a close button in tab page header, you need to use a different way. IntegralUI TabControl comes with a built-in feature which allows you to easily add many different kinds of buttons to tab page headers.

tab with close button
Download free demo

Every tab page has a Buttons property which is a collection of command buttons with custom appearance and functionality. There is no limit on how many buttons you can add. If you want to have only a close button to the tab page, then add one button to this collection and choose an image for it. Images are mostly 16x16 pixels, but you can also set larger images. This can be done through Visual Studio Designer or through code.

At first you need to create an image list which will hold all images that can be used by command buttons. After that, apply this image list to ButtonImageList property of TabControl.

There are two ways to add a close buttons to the tab page:

  • By adding a close button to parent TabControl buttons collection
  • By adding a close button to the tab page buttons collection

In first way, all buttons will be applied to all tab pages. This allows you to create a single set of buttons used by all tab pages. To see how this works, let's create a button and add it to TabControl buttons collection. By default all tab pages have their UseParentButtons property set to true, so this button will show in all tabs.

// Create a command button

// Set the ImageIndex property to show the second image from the list

// Set the Key property to TAB_CLOSE, so we can identify what kind of a button was clicked

LidorSystems.IntegralUI.Controls.CommandButton closeButton = new LidorSystems.IntegralUI.Controls.CommandButton();

closeButton.ImageIndex = 1;

closeButton.Key = "TAB_CLOSE";

 

// In this demo we are using only one command button

// If the button collection is empty, add the close button to it

if (this.tabControl1.TabButtons.Count == 0)

this.tabControl1.TabButtons.Add(closeButton);

' Create a command button

' Set the ImageIndex property to show the second image from the list

' Set the Key property to TAB_CLOSE, so we can identify what kind of a button was clicked

Dim closeButton As New LidorSystems.IntegralUI.Controls.CommandButton()

closeButton.ImageIndex = 1

closeButton.Key = "TAB_CLOSE"

 

' In this demo we are using only one command button

' If the button collection is empty, add the close button to it

If Me.tabControl1.TabButtons.Count = 0 Then

Me.tabControl1.TabButtons.Add(closeButton)

End If

The second way allows you to have a unique set of buttons used only by that tab page. This allows you to have different kind of buttons in every tab. To see how this works, let's create a button and add it to selected tab page buttons collection. The button will appear only in this tab, other tabs will remain unchanged.

// Check whether there is some tab on top (selected)

if (this.tabControl1.SelectedPage != null)

{

// Create a command button

// Set the ImageIndex property to show the first image from the list

// Set the Key property to TAB_CLOSE, so we can identify what kind of a button was clicked

LidorSystems.IntegralUI.Controls.CommandButton closeButton = new LidorSystems.IntegralUI.Controls.CommandButton();

closeButton.ImageIndex = 0;

closeButton.Key = "TAB_CLOSE";

 

// In this demo we are using only one command button

// If the button collection is empty, add the close button to it

if (this.tabControl1.SelectedPage.Buttons.Count == 0)

this.tabControl1.SelectedPage.Buttons.Add(closeButton);

this.tabControl1.SelectedPage.UseParentButtons = false;

 

// Update the control layout to apply changes

this.tabControl1.UpdateLayout();

}

' Check whether there is some tab on top (selected)

If Me.tabControl1.SelectedPage IsNot Nothing Then

' Create a command button

' Set the ImageIndex property to show the first image from the list

' Set the Key property to TAB_CLOSE, so we can identify what kind of a button was clicked

Dim closeButton As New LidorSystems.IntegralUI.Controls.CommandButton()

closeButton.ImageIndex = 0

closeButton.Key = "TAB_CLOSE"

 

' In this demo we are using only one command button

' If the button collection is empty, add the close button to it

If Me.tabControl1.SelectedPage.Buttons.Count = 0 Then

Me.tabControl1.SelectedPage.Buttons.Add(closeButton)

End If

Me.tabControl1.SelectedPage.UseParentButtons = False

 

' Update the control layout to apply changes

Me.tabControl1.UpdateLayout()

End If

Now that we have a button added, we can handle what will be processed when it is clicked. There are two events which handle clicks on tab page buttons: TabButtonClicking and TabButtonClicked. These events carry the command button which fires the event, its unique key value and mouse position. By using TabButtonClicking event you can apply some condition which if it is not fulfilled it will cancel the click event. By handling TabButtonClicked event you can add your own code which is processed when button is clicked. In case of clicking the close button, you can hide or dispose the tab page.

private void tabControl1_TabButtonClicked(object sender, LidorSystems.IntegralUI.ObjectClickEventArgs e)

{

// Check whether the opbject carried with the event is a command button

if (e.Object is LidorSystems.IntegralUI.Controls.CommandButton)

{

LidorSystems.IntegralUI.Controls.CommandButton btn = (LidorSystems.IntegralUI.Controls.CommandButton)e.Object;

 

// Check whether the type of a button is a close button

if (btn.Key == "TAB_CLOSE")

{

// Locate the tab in which the command button was clicked

LidorSystems.IntegralUI.Containers.TabPage page = this.tabControl1.GetPageAt(e.Position);

 

if (page != null)

{

// Depending on the action, you can determine whether you want to hide or dispose the tab

switch (this.tabControl1.CloseAction)

{

case LidorSystems.IntegralUI.CloseAction.Hide:

page.Hide();

break;

 

default:

page.Remove();

break;

}

}

}

}

}

Private Sub tabControl1_TabButtonClicked(ByVal sender As Object, ByVal e As LidorSystems.IntegralUI.ObjectClickEventArgs) Handles tabControl1.TabButtonClicked

' Check whether the opbject carried with the event is a command button

If TypeOf e.Object Is LidorSystems.IntegralUI.Controls.CommandButton Then

Dim btn As LidorSystems.IntegralUI.Controls.CommandButton = DirectCast(e.Object, LidorSystems.IntegralUI.Controls.CommandButton)

 

' Check whether the type of a button is a close button

If btn.Key = "TAB_CLOSE" Then

' Locate the tab in which the command button was clicked

Dim page As LidorSystems.IntegralUI.Containers.TabPage = Me.tabControl1.GetPageAt(e.Position)

 

If page IsNot Nothing Then

' Depending on the action, you can determine whether you want to hide or dispose the tab

Select Case Me.tabControl1.CloseAction

Case LidorSystems.IntegralUI.CloseAction.Hide

page.Hide()

Exit Select

 

Case Else

page.Remove()

Exit Select

End Select

End If

End If

End If

End Sub

A complete sample project in C# .NET and VB .NET, showing how to add close button to tabs in a TabControl, is available for download from here: TabControl .NET - Tab Close Button

Did you Like this Article?


Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.