How to: Display Side-Aligned Tabs with TabControl

The Alignment property of TabControl supports displaying tabs vertically (along the left or right edge of the control), as opposed to horizontally (across the top or bottom of the control). By default, this vertical display results in a poor user experience, because the Text property of the TabPage object does not display in the tab when visual styles are enabled. There is also no direct way to control the direction of the text within the tab. You can use owner draw on TabControl to improve this experience.

The following procedure shows how to render right-aligned tabs, with the tab text running from left to right, by using the "owner draw" feature.

To display right-aligned tabs

  1. Add a TabControl to your form.

  2. Set the Alignment property to Right.

  3. Set the SizeMode property to Fixed, so that all tabs are the same width.

  4. Set the ItemSize property to the preferred fixed size for the tabs. Keep in mind that the ItemSize property behaves as though the tabs were on top, although they are right-aligned. As a result, in order to make the tabs wider, you must change the Height property, and in order to make them taller, you must change the Width property.

    In the code example below, Width is set to 25 and Height is set to 150.

  5. Set the DrawMode property to OwnerDrawFixed.

  6. Define a handler for the DrawItem event of TabControl that renders the text from left to right.

    Private Sub TabControl1_DrawItem(ByVal sender As Object, ByVal e As System.Windows.Forms.DrawItemEventArgs) Handles TabControl1.DrawItem
        Dim g As Graphics = e.Graphics
        Dim _TextBrush As Brush
        ' Get the item from the collection.
        Dim _TabPage As TabPage = TabControl1.TabPages(e.Index)
        ' Get the real bounds for the tab rectangle.
        Dim _TabBounds As Rectangle = TabControl1.GetTabRect(e.Index)
        If (e.State = DrawItemState.Selected) Then
            ' Draw a different background color, and don't paint a focus rectangle.
            _TextBrush = New SolidBrush(Color.Red)
            g.FillRectangle(Brushes.Gray, e.Bounds)
            _TextBrush = New System.Drawing.SolidBrush(e.ForeColor)
        End If
        ' Use our own font.
        Dim _TabFont As New Font("Arial", 10.0, FontStyle.Bold, GraphicsUnit.Pixel)
        ' Draw string. Center the text.
        Dim _StringFlags As New StringFormat()
        _StringFlags.Alignment = StringAlignment.Center
        _StringFlags.LineAlignment = StringAlignment.Center
        g.DrawString(_TabPage.Text, _TabFont, _TextBrush, _TabBounds, New StringFormat(_StringFlags))
    End Sub

See Also

Community Additions