This documentation is archived and is not being maintained.

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.

    public Form1()
        // Remove this call if you do not program using Visual Studio.
        tabControl1.DrawItem += new DrawItemEventHandler(tabControl1_DrawItem);
    private void tabControl1_DrawItem(Object sender, System.Windows.Forms.DrawItemEventArgs e)
        Graphics g = e.Graphics;
        Brush _textBrush;
        // Get the item from the collection.
        TabPage _tabPage = tabControl1.TabPages[e.Index];
        // Get the real bounds for the tab rectangle.
        Rectangle _tabBounds = tabControl1.GetTabRect(e.Index);
        if (e.State == DrawItemState.Selected)
            // 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);
        // Use our own font.
        Font _tabFont = new Font("Arial", (float)10.0, FontStyle.Bold, GraphicsUnit.Pixel);
        // Draw string. Center the text.
        StringFormat _stringFlags = new StringFormat();
        _stringFlags.Alignment = StringAlignment.Center;
        _stringFlags.LineAlignment = StringAlignment.Center;
        g.DrawString(_tabPage.Text, _tabFont, _textBrush, _tabBounds, new StringFormat(_stringFlags));