LIDOR SYSTEMS

Advanced User Interface Controls and Components

Show Ellipsis for Tabs with Longer Text in TabControl

Created: 16 August 2013

Tab headers of TabPages are usually shown with an image following by text. In cases where text is too long to be shown inside tab header, we need to limit the tab width and display a shorter title and show ellipsis at the text end.

Tab Header Text Trimming

In the IntegralUI TabControl this can be done by using the MaxTextSize property which limits the width and height of tab header to specific value. Depending on current tab content prientation, either the width or height value is used.

Show Ellipsis for Tabs with Longer Text
Download Sample - Different Display Modes for Tabs in TabControl .NET

The MaxTextSize.Width value is use when tabs are shown horizontally, and MaxTextSize.Height value is used when tabs are shown vertically. For example the code below will limit tab width to a maximum of 75 pixels when , and tab height to a maximum of 50 pixels.

this.tabControl1.MaxTextSize = new Size(75, 50);

Me.tabControl1.MaxTextSize = New Size(75, 50)

In some other cases we may need to display tab headers only with image or to auto size tab content. There are three different ways to display tabs:

  • AutoSized – tab header size is automatically resized to fully show its content which usually includes image and text
  • Compressed – tab header shows image and text only for selected tab, all other tabs are shown with only an image
  • Justified – tab header is resized to fully show its content and if there is some remaining space from tab strip, it is divided among visible tabs
Display Tabs in Compressed View

Compressed

Display Tabs in Justified View

Justified

A sample project which shows how to cut longer text inside tab header is available for download from here: Tab Display Mode and Text Trimming

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.