Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vertical tab control with horizontal text at design time

A clear omission seems to be that after applying this approach:

  • Vertical Tab Control with horizontal text in Winforms

Which is also recommended by Microsoft:

  • How to: Display Side-Aligned Tabs with TabControl

There is no text on tabs at design time, so further development and support becomes a nightmare.

enter image description here

Is there a way to make tab text also display at design time?

like image 710
Neolisk Avatar asked Oct 16 '25 17:10

Neolisk


2 Answers

Just create your own control so the custom drawing also works at design time. Add a new class to your project and paste the code shown below. Compile. Drop the new control from the top of the toolbox onto your form. I tweaked it a bit to make it no so garish.

using System;
using System.Drawing;
using System.Windows.Forms;

class VerticalTabControl : TabControl {
    public VerticalTabControl() {
        this.Alignment = TabAlignment.Right;
        this.DrawMode = TabDrawMode.OwnerDrawFixed;
        this.SizeMode = TabSizeMode.Fixed;
        this.ItemSize = new Size(this.Font.Height * 3 / 2, 75);
    }
    public override Font Font {
        get { return base.Font;  }
        set {
            base.Font = value;
            this.ItemSize = new Size(value.Height * 3 / 2, base.ItemSize.Height);
        }
    }
    protected override void OnDrawItem(DrawItemEventArgs e) {
        using (var _textBrush = new SolidBrush(this.ForeColor)) {
            TabPage _tabPage = this.TabPages[e.Index];
            Rectangle _tabBounds = this.GetTabRect(e.Index);

            if (e.State != DrawItemState.Selected) e.DrawBackground();
            else {
                using (var brush = new System.Drawing.Drawing2D.LinearGradientBrush(e.Bounds, Color.White, Color.LightGray, 90f)) {
                    e.Graphics.FillRectangle(brush, e.Bounds);
                }
            }

            StringFormat _stringFlags = new StringFormat();
            _stringFlags.Alignment = StringAlignment.Center;
            _stringFlags.LineAlignment = StringAlignment.Center;
            e.Graphics.DrawString(_tabPage.Text, this.Font, _textBrush, _tabBounds, new StringFormat(_stringFlags));
        }
    }
}
like image 173
Hans Passant Avatar answered Oct 18 '25 08:10

Hans Passant


You need to subclass the TabControl and override OnDrawItem. Here's an example:

Public Class UITabControl
    Inherits TabControl

    Protected Overrides Sub OnDrawItem(e As DrawItemEventArgs)
        Using brush As New SolidBrush(Me.ForeColor)
            Using format As New StringFormat() With {.LineAlignment = StringAlignment.Center}
                Select Case Me.Alignment
                    Case TabAlignment.Left
                        format.Alignment = StringAlignment.Near
                    Case TabAlignment.Top
                        format.Alignment = StringAlignment.Far
                End Select
                format.FormatFlags = (format.FormatFlags Or StringFormatFlags.NoWrap)
                Dim rect As Rectangle = e.Bounds
                rect.X += 3
                rect.Width -= 6
                e.Graphics.DrawString(Me.TabPages(e.Index).Text, Me.Font, brush, rect, format)
            End Using
        End Using
        MyBase.OnDrawItem(e)
    End Sub

End Class
like image 36
Bjørn-Roger Kringsjå Avatar answered Oct 18 '25 08:10

Bjørn-Roger Kringsjå



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!