DOBON.NET プログラミング道: .NET Framework, VB.NET, C#, Visual Basic, Visual Studio, インストーラ, ...

DOBON.NET

TabControlのタブを自分で描画する

タブコントロールのタブをオーナードローする方法を紹介します。タブコントロールのDrawModeプロパティをTabDrawMode.OwnerDrawFixedとし、タブコントロールのDrawItemイベントハンドラにおいてタブを描画します。

次の例では、フォームにタブコントロールTabControl1があり、そのTabControl1をオーナードローすることにより、テキストを中央表示し、さらに、選択されているタブのテキストが赤、背景が青、選択されていないタブのテキストが灰色、背景が白となるようにしています。

[VB.NET]
'フォームのLoadイベントハンドラ
Private Sub Form1_Load(ByVal sender As Object, _
        ByVal e As EventArgs) Handles MyBase.Load
    'TabControlをオーナードローする
    TabControl1.DrawMode = TabDrawMode.OwnerDrawFixed
    'DrawItemイベントハンドラを追加
    AddHandler TabControl1.DrawItem, AddressOf TabControl1_DrawItem
End Sub

'TabControl1のDrawItemイベントハンドラ
Private Sub TabControl1_DrawItem( _
        ByVal sender As Object, ByVal e As DrawItemEventArgs)
    '対象のTabControlを取得
    Dim tab As TabControl = CType(sender, TabControl)
    'タブページのテキストを取得
    Dim txt As String = tab.TabPages(e.Index).Text

    'タブのテキストと背景を描画するためのブラシを決定する
    Dim foreBrush, backBrush As Brush
    If e.State = DrawItemState.Selected Then
        '選択されているタブのテキストを赤、背景を青とする
        foreBrush = Brushes.Red
        backBrush = Brushes.Blue
    Else
        '選択されていないタブのテキストは灰色、背景を白とする
        foreBrush = Brushes.Gray
        backBrush = Brushes.White
    End If

    'StringFormatを作成
    Dim sf As New StringFormat
    '中央に表示する
    sf.Alignment = StringAlignment.Center
    sf.LineAlignment = StringAlignment.Center

    '背景の描画
    e.Graphics.FillRectangle(backBrush, e.Bounds)
    'Textの描画
    Dim rectf As New RectangleF( _
        e.Bounds.X, e.Bounds.Y, e.Bounds.Width, e.Bounds.Height)
    e.Graphics.DrawString(txt, e.Font, foreBrush, rectf, sf)
End Sub
[C#]
//フォームのLoadイベントハンドラ
private void Form1_Load(object sender, System.EventArgs e)
{
    //TabControlをオーナードローする
    TabControl1.DrawMode = TabDrawMode.OwnerDrawFixed;
    //DrawItemイベントハンドラを追加
    TabControl1.DrawItem += new DrawItemEventHandler(TabControl1_DrawItem);
}

//TabControl1のDrawItemイベントハンドラ
private void TabControl1_DrawItem(object sender, DrawItemEventArgs e)
{
    //対象のTabControlを取得
    TabControl tab = (TabControl) sender;
    //タブページのテキストを取得
    string txt = tab.TabPages[e.Index].Text;

    //タブのテキストと背景を描画するためのブラシを決定する
    Brush foreBrush, backBrush;
    if (e.State == DrawItemState.Selected)
    {
        //選択されているタブのテキストを赤、背景を青とする
        foreBrush = Brushes.Red;
        backBrush = Brushes.Blue;
    }
    else
    {
        //選択されていないタブのテキストは灰色、背景を白とする
        foreBrush = Brushes.Gray;
        backBrush = Brushes.White;
    }

    //StringFormatを作成
    StringFormat sf = new StringFormat();
    //中央に表示する
    sf.Alignment = StringAlignment.Center;
    sf.LineAlignment = StringAlignment.Center;

    //背景の描画
    e.Graphics.FillRectangle(backBrush, e.Bounds);
    //Textの描画
    e.Graphics.DrawString(txt, e.Font, foreBrush, e.Bounds, sf);
}

なお、残念ながらTabControlの背景(上の図で言えば、「最後」のタブの右側の部分)は変更できません。

注意:この記事では、基本的な事柄の説明が省略されているかもしれません。初心者の方は、特に以下の点にご注意ください。

  • イベントハンドラの意味が分からない、C#のコードをそのまま書いても動かないという方は、こちらをご覧ください。