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.
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
 Compressed |
 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