TabControl

[C#] タブコントロールの色をカスタマイズする方法

2025-01-18更新日: 2025-01-18

C#でタブコントロールの色をカスタマイズするには、通常のプロパティ設定では限界があるため、カスタム描画を行う必要があります。

まず、タブコントロールのDrawModeプロパティをOwnerDrawFixedに設定します。

次に、DrawItemイベントをハンドルし、Graphicsオブジェクトを使用してタブの背景色やテキスト色を指定します。

例えば、e.Graphics.FillRectangleメソッドで背景色を塗り、e.Graphics.DrawStringメソッドでテキストを描画します。

これにより、タブの外観を自由にカスタマイズできます。

目次から探す

タブの背景色を変更する方法
タブのテキスト色を変更する方法
タブの選択状態のカスタマイズ
応用例
まとめ

タブの背景色を変更する方法

タブコントロールの背景色をカスタマイズすることで、アプリケーションのデザインをより魅力的にすることができます。

ここでは、C#のWindowsフォームアプリケーションでタブの背景色を変更する方法について解説します。

Graphicsオブジェクトの取得

タブの背景色を変更するためには、まずGraphicsオブジェクトを取得する必要があります。

Graphicsオブジェクトは、描画を行うための基本的なクラスで、タブのカスタム描画を行う際に使用します。

using System;
using System.Drawing;
using System.Windows.Forms;
public partial class MyForm : Form
{
    public MyForm()
    {
        InitializeComponent();
        tabControl1.DrawMode = TabDrawMode.OwnerDrawFixed; // カスタム描画モードに設定
        tabControl1.DrawItem += new DrawItemEventHandler(tabControl1_DrawItem);
    }
    private void tabControl1_DrawItem(object sender, DrawItemEventArgs e)
    {
        Graphics g = e.Graphics; // Graphicsオブジェクトを取得
        // ここで背景色の変更を行います
    }
}

FillRectangleメソッドの使用

Graphicsオブジェクトを取得したら、次にFillRectangleメソッドを使用してタブの背景色を塗りつぶします。

FillRectangleメソッドは、指定した色で矩形を塗りつぶすために使用されます。

private void tabControl1_DrawItem(object sender, DrawItemEventArgs e)
{
    Graphics g = e.Graphics;
    Rectangle tabRect = tabControl1.GetTabRect(e.Index); // タブの矩形を取得
    g.FillRectangle(Brushes.LightBlue, tabRect); // 背景色をライトブルーに設定
}

背景色の指定方法

背景色を指定するには、Brushesクラスを使用して色を選択します。

Brushesクラスには、さまざまな色が定義されており、簡単に色を指定することができます。

private void tabControl1_DrawItem(object sender, DrawItemEventArgs e)
{
    Graphics g = e.Graphics;
    Rectangle tabRect = tabControl1.GetTabRect(e.Index);
    g.FillRectangle(Brushes.LightBlue, tabRect); // ライトブルーで塗りつぶし
    // 他の色を使用する場合は、Brushes.RedやBrushes.Greenなどを使用
}

このようにして、タブの背景色をカスタマイズすることができます。

タブのデザインを変更することで、アプリケーションの見た目をより良くすることが可能です。

タブのテキスト色を変更する方法

タブコントロールのテキスト色を変更することで、ユーザーインターフェースの視認性を向上させることができます。

ここでは、C#のWindowsフォームアプリケーションでタブのテキスト色を変更する方法について解説します。

DrawStringメソッドの使用

タブのテキストを描画するためには、GraphicsオブジェクトのDrawStringメソッドを使用します。

このメソッドは、指定したフォントと色で文字列を描画するために使用されます。

using System;
using System.Drawing;
using System.Windows.Forms;
public partial class MyForm : Form
{
    public MyForm()
    {
        InitializeComponent();
        tabControl1.DrawMode = TabDrawMode.OwnerDrawFixed; // カスタム描画モードに設定
        tabControl1.DrawItem += new DrawItemEventHandler(tabControl1_DrawItem);
    }
    private void tabControl1_DrawItem(object sender, DrawItemEventArgs e)
    {
        Graphics g = e.Graphics;
        Rectangle tabRect = tabControl1.GetTabRect(e.Index);
        string tabText = tabControl1.TabPages[e.Index].Text; // タブのテキストを取得
        g.DrawString(tabText, this.Font, Brushes.Black, tabRect); // テキストを描画
    }
}

フォントと色の指定

DrawStringメソッドを使用する際には、フォントと色を指定する必要があります。

フォントは、描画する文字列のスタイルを決定し、色はBrushesクラスを使用して指定します。

private void tabControl1_DrawItem(object sender, DrawItemEventArgs e)
{
    Graphics g = e.Graphics;
    Rectangle tabRect = tabControl1.GetTabRect(e.Index);
    string tabText = tabControl1.TabPages[e.Index].Text;
    Font tabFont = new Font("Arial", 10, FontStyle.Bold); // フォントを指定
    Brush textBrush = Brushes.Red; // テキスト色を赤に設定
    g.DrawString(tabText, tabFont, textBrush, tabRect);
}

テキストの位置調整

テキストの位置を調整することで、タブ内でのテキストの見た目を改善することができます。

DrawStringメソッドの最後の引数で位置を指定します。

private void tabControl1_DrawItem(object sender, DrawItemEventArgs e)
{
    Graphics g = e.Graphics;
    Rectangle tabRect = tabControl1.GetTabRect(e.Index);
    string tabText = tabControl1.TabPages[e.Index].Text;
    Font tabFont = new Font("Arial", 10, FontStyle.Bold);
    Brush textBrush = Brushes.Red;
    PointF textPosition = new PointF(tabRect.X + 5, tabRect.Y + 5); // テキストの位置を調整
    g.DrawString(tabText, tabFont, textBrush, textPosition);
}

このようにして、タブのテキスト色やフォント、位置をカスタマイズすることができます。

これにより、アプリケーションのデザインをより魅力的にすることが可能です。

タブの選択状態のカスタマイズ

タブコントロールの選択状態をカスタマイズすることで、ユーザーがどのタブを選択しているかを視覚的に明確にすることができます。

ここでは、選択されたタブの色やスタイルを変更する方法について解説します。

選択タブの色を変える方法

選択されたタブの色を変えることで、ユーザーに選択状態を視覚的に示すことができます。

選択されたタブのインデックスを取得し、そのタブの背景色を変更します。

private void tabControl1_DrawItem(object sender, DrawItemEventArgs e)
{
    Graphics g = e.Graphics;
    Rectangle tabRect = tabControl1.GetTabRect(e.Index);
    Brush backgroundBrush;
    if (e.Index == tabControl1.SelectedIndex)
    {
        backgroundBrush = Brushes.LightGreen; // 選択されたタブの色をライトグリーンに設定
    }
    else
    {
        backgroundBrush = Brushes.LightGray; // 非選択タブの色をライトグレーに設定
    }
    g.FillRectangle(backgroundBrush, tabRect);
    string tabText = tabControl1.TabPages[e.Index].Text;
    g.DrawString(tabText, this.Font, Brushes.Black, tabRect);
}

選択タブのスタイル変更

選択されたタブのスタイルを変更することで、さらに選択状態を強調することができます。

例えば、選択されたタブのフォントを太字にすることができます。

private void tabControl1_DrawItem(object sender, DrawItemEventArgs e)
{
    Graphics g = e.Graphics;
    Rectangle tabRect = tabControl1.GetTabRect(e.Index);
    Brush backgroundBrush = (e.Index == tabControl1.SelectedIndex) ? Brushes.LightGreen : Brushes.LightGray;
    g.FillRectangle(backgroundBrush, tabRect);
    string tabText = tabControl1.TabPages[e.Index].Text;
    Font tabFont = (e.Index == tabControl1.SelectedIndex) ? new Font(this.Font, FontStyle.Bold) : this.Font; // 選択されたタブのフォントを太字に
    g.DrawString(tabText, tabFont, Brushes.Black, tabRect);
}

選択状態の検出方法

選択状態を検出するには、TabControlのSelectedIndexプロパティを使用します。

このプロパティは、現在選択されているタブのインデックスを返します。

private void tabControl1_DrawItem(object sender, DrawItemEventArgs e)
{
    Graphics g = e.Graphics;
    Rectangle tabRect = tabControl1.GetTabRect(e.Index);
    bool isSelected = (e.Index == tabControl1.SelectedIndex); // 選択状態を検出
    Brush backgroundBrush = isSelected ? Brushes.LightGreen : Brushes.LightGray;
    g.FillRectangle(backgroundBrush, tabRect);
    string tabText = tabControl1.TabPages[e.Index].Text;
    Font tabFont = isSelected ? new Font(this.Font, FontStyle.Bold) : this.Font;
    g.DrawString(tabText, tabFont, Brushes.Black, tabRect);
}

このようにして、タブの選択状態をカスタマイズすることができます。

選択されたタブを視覚的に強調することで、ユーザーの操作性を向上させることが可能です。

応用例

タブコントロールのカスタマイズは、単に色やテキストの変更にとどまらず、アイコンの追加や形状の変更、アニメーション効果の追加など、さまざまな応用が可能です。

ここでは、いくつかの応用例を紹介します。

タブのアイコンを追加する

タブにアイコンを追加することで、視覚的な情報を増やし、ユーザーがタブの内容を直感的に理解しやすくなります。

ImageListを使用してアイコンを設定します。

using System;
using System.Drawing;
using System.Windows.Forms;
public partial class MyForm : Form
{
    private ImageList imageList;
    public MyForm()
    {
        InitializeComponent();
        imageList = new ImageList();
        imageList.Images.Add("home", Image.FromFile("home.png")); // アイコンを追加
        imageList.Images.Add("settings", Image.FromFile("settings.png"));
        tabControl1.ImageList = imageList;
        tabControl1.TabPages[0].ImageKey = "home"; // タブにアイコンを設定
        tabControl1.TabPages[1].ImageKey = "settings";
    }
}

タブの形状をカスタマイズする

タブの形状をカスタマイズすることで、アプリケーションのデザインをよりユニークにすることができます。

GraphicsPathを使用してタブの形状を定義します。

private void tabControl1_DrawItem(object sender, DrawItemEventArgs e)
{
    Graphics g = e.Graphics;
    Rectangle tabRect = tabControl1.GetTabRect(e.Index);
    System.Drawing.Drawing2D.GraphicsPath path = new System.Drawing.Drawing2D.GraphicsPath();
    path.AddArc(tabRect.Left, tabRect.Top, 20, 20, 180, 90); // 左上の角を丸く
    path.AddArc(tabRect.Right - 20, tabRect.Top, 20, 20, 270, 90); // 右上の角を丸く
    path.AddLine(tabRect.Right, tabRect.Bottom, tabRect.Left, tabRect.Bottom);
    g.FillPath(Brushes.LightBlue, path); // カスタム形状で塗りつぶし
    string tabText = tabControl1.TabPages[e.Index].Text;
    g.DrawString(tabText, this.Font, Brushes.Black, tabRect);
}

タブのアニメーション効果を追加する

タブの選択時にアニメーション効果を追加することで、ユーザーに対してより動的なインターフェースを提供できます。

タイマーを使用してアニメーションを実装します。

private Timer animationTimer;
private int animationStep = 0;
public MyForm()
{
    InitializeComponent();
    animationTimer = new Timer();
    animationTimer.Interval = 50; // アニメーションの間隔を設定
    animationTimer.Tick += AnimationTimer_Tick;
}
private void AnimationTimer_Tick(object sender, EventArgs e)
{
    animationStep++;
    if (animationStep > 10)
    {
        animationTimer.Stop();
        animationStep = 0;
    }
    tabControl1.Invalidate(); // 再描画をトリガー
}
private void tabControl1_DrawItem(object sender, DrawItemEventArgs e)
{
    Graphics g = e.Graphics;
    Rectangle tabRect = tabControl1.GetTabRect(e.Index);
    Brush backgroundBrush = (e.Index == tabControl1.SelectedIndex) ? Brushes.LightGreen : Brushes.LightGray;
    g.FillRectangle(backgroundBrush, tabRect);
    if (e.Index == tabControl1.SelectedIndex)
    {
        g.FillRectangle(new SolidBrush(Color.FromArgb(25 * animationStep, Color.Blue)), tabRect); // アニメーション効果
    }
    string tabText = tabControl1.TabPages[e.Index].Text;
    g.DrawString(tabText, this.Font, Brushes.Black, tabRect);
}