ToolTip

[C#] Tooltipの色をカスタマイズする方法

C#でTooltipの色をカスタマイズするには、通常のToolTipクラスでは直接色を変更するプロパティが提供されていないため、カスタム描画を行う必要があります。

これには、ToolTipのOwnerDrawプロパティをtrueに設定し、Drawイベントをハンドルしてカスタム描画を実装します。

Drawイベント内で、Graphicsオブジェクトを使用して背景色やテキストの色を指定し、e.DrawBackground()やe.DrawText()メソッドを用いて描画を行います。

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

目次から探す

Tooltipの色をカスタマイズする
カスタムTooltipの実装例
応用例
- 複数色を使ったTooltip
- 条件に応じた色変更
まとめ

Tooltipの色をカスタマイズする

C#のWindowsフォームアプリケーションにおいて、Tooltipの色をカスタマイズすることで、ユーザーインターフェースをより魅力的にすることができます。

以下では、背景色、テキスト色、フォントのカスタマイズ方法について解説します。

背景色の変更方法

Tooltipの背景色を変更するには、ToolTipクラスを使用し、Drawイベントを利用します。

以下のサンプルコードでは、Tooltipの背景色を青色に設定しています。

using System;
using System.Drawing;
using System.Windows.Forms;
public partial class MyForm : Form
{
	private ToolTip toolTip;
	public MyForm()
	{
		InitializeComponent();
		toolTip = new ToolTip();
		toolTip.OwnerDraw = true; // 描画をカスタマイズするために設定
		toolTip.Draw += new DrawToolTipEventHandler(toolTip_Draw);
		toolTip.SetToolTip(this.button1, "このボタンのTooltipです"); // Tooltipの設定
	}
	private void toolTip_Draw(object sender, DrawToolTipEventArgs e)
	{
		e.DrawBackground(); // 背景を描画
		e.Graphics.FillRectangle(Brushes.LightBlue, e.Bounds); // 背景色をライトブルーに設定
		e.DrawText(); // テキストを描画
	}
}

このコードを実行すると、ボタンにマウスオーバーした際に表示されるTooltipの背景色が青色になります。

テキスト色の変更方法

Tooltipのテキスト色を変更するには、同様にDrawイベントを利用します。

以下のサンプルコードでは、Tooltipのテキスト色を白色に設定しています。

using System;
using System.Drawing;
using System.Windows.Forms;
public partial class MyForm : Form
{
    private ToolTip toolTip;
    public MyForm()
    {
        InitializeComponent();
        toolTip = new ToolTip();
        toolTip.OwnerDraw = true; // 描画をカスタマイズするために設定
        toolTip.Draw += new DrawToolTipEventHandler(toolTip_Draw);
        toolTip.SetToolTip(this.button1, "このボタンのTooltipです"); // Tooltipの設定
    }
    private void toolTip_Draw(object sender, DrawToolTipEventArgs e)
    {
        e.DrawBackground(); // 背景を描画
        e.Graphics.FillRectangle(Brushes.Blue, e.Bounds); // 背景色を青に設定
        e.Graphics.DrawString(e.ToolTipText, new Font("Arial", 10), Brushes.White, e.Bounds); // テキスト色を白に設定
    }
}

このコードを実行すると、Tooltipのテキストが白色で表示されます。

フォントのカスタマイズ

Tooltipのフォントをカスタマイズするには、Drawイベント内でGraphics.DrawStringメソッドを使用します。

以下のサンプルコードでは、Tooltipのフォントを太字のArialに設定しています。

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

public partial class MyForm : Form
{
	private ToolTip toolTip;

	public MyForm()
	{
		InitializeComponent();
		toolTip = new ToolTip();
		toolTip.OwnerDraw = true; // 描画をカスタマイズするために設定
		toolTip.Draw += new DrawToolTipEventHandler(toolTip_Draw);
		toolTip.Popup += new PopupEventHandler(toolTip_Popup); // Popupイベントを追加
		toolTip.SetToolTip(this.button1, "このボタンのTooltipです"); // Tooltipの設定
	}

	private void toolTip_Draw(object sender, DrawToolTipEventArgs e)
	{
		e.DrawBackground(); // 背景を描画
		e.Graphics.FillRectangle(Brushes.Blue, e.Bounds); // 背景色を青に設定
		e.Graphics.DrawString(e.ToolTipText, new Font("Arial", 12, FontStyle.Bold), Brushes.White, e.Bounds); // フォントを太字に設定
	}

	private void toolTip_Popup(object sender, PopupEventArgs e)
	{
		// フォントを指定してテキストのサイズを測定
		using (Font font = new Font("Arial", 12, FontStyle.Bold))
		{
			Size textSize = TextRenderer.MeasureText(toolTip.GetToolTip(e.AssociatedControl), font);
			// テキストサイズに基づいてToolTipのサイズを設定
			e.ToolTipSize = new Size(textSize.Width + 16, textSize.Height + 6); // 余白を少し追加
		}
	}
}

このコードを実行すると、Tooltipのテキストが太字のArialフォントで表示されます。

カスタムTooltipの実装例

カスタムTooltipを実装することで、ユーザーに対してより魅力的で視覚的にわかりやすい情報を提供できます。

ここでは、シンプルな色変更、グラデーション背景、アイコン付きTooltipの作成方法について解説します。

シンプルな色変更の例

シンプルな色変更のTooltipを作成するには、Drawイベントを利用して背景色とテキスト色を変更します。

以下のサンプルコードでは、Tooltipの背景色を緑色に、テキスト色を黒色に設定しています。

using System;
using System.Drawing;
using System.Windows.Forms;
public partial class MyForm : Form
{
    private ToolTip toolTip;
    public MyForm()
    {
        InitializeComponent();
        toolTip = new ToolTip();
        toolTip.OwnerDraw = true; // 描画をカスタマイズするために設定
        toolTip.Draw += new DrawToolTipEventHandler(toolTip_Draw);
        toolTip.SetToolTip(this.button1, "シンプルな色変更のTooltip"); // Tooltipの設定
    }
    private void toolTip_Draw(object sender, DrawToolTipEventArgs e)
    {
        e.DrawBackground(); // 背景を描画
        e.Graphics.FillRectangle(Brushes.Green, e.Bounds); // 背景色を緑に設定
        e.Graphics.DrawString(e.ToolTipText, new Font("Arial", 10), Brushes.Black, e.Bounds); // テキスト色を黒に設定
    }
}

このコードを実行すると、ボタンにマウスオーバーした際に表示されるTooltipの背景色が緑色、テキスト色が黒色になります。

グラデーション背景のTooltip

グラデーション背景のTooltipを作成するには、LinearGradientBrushを使用して背景を描画します。

以下のサンプルコードでは、青から緑へのグラデーションを設定しています。

using System;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Windows.Forms;
public partial class MyForm : Form
{
    private ToolTip toolTip;
    public MyForm()
    {
        InitializeComponent();
        toolTip = new ToolTip();
        toolTip.OwnerDraw = true; // 描画をカスタマイズするために設定
        toolTip.Draw += new DrawToolTipEventHandler(toolTip_Draw);
        toolTip.SetToolTip(this.button1, "グラデーション背景のTooltip"); // Tooltipの設定
    }
    private void toolTip_Draw(object sender, DrawToolTipEventArgs e)
    {
        e.DrawBackground(); // 背景を描画
        using (LinearGradientBrush brush = new LinearGradientBrush(e.Bounds, Color.Blue, Color.Green, 90f))
        {
            e.Graphics.FillRectangle(brush, e.Bounds); // グラデーション背景を設定
        }
        e.DrawText(); // テキストを描画
    }
}

このコードを実行すると、Tooltipの背景が青から緑へのグラデーションで表示されます。

アイコン付きTooltipの作成

アイコン付きのTooltipを作成するには、Drawイベント内でアイコンを描画します。

以下のサンプルコードでは、Tooltipにアイコンを追加しています。

using System;
using System.Drawing;
using System.Windows.Forms;
public partial class MyForm : Form
{
    private ToolTip toolTip;
    public MyForm()
    {
        InitializeComponent();
        toolTip = new ToolTip();
        toolTip.OwnerDraw = true; // 描画をカスタマイズするために設定
        toolTip.Draw += new DrawToolTipEventHandler(toolTip_Draw);
        toolTip.SetToolTip(this.button1, "アイコン付きのTooltip"); // Tooltipの設定
    }
    private void toolTip_Draw(object sender, DrawToolTipEventArgs e)
    {
        e.DrawBackground(); // 背景を描画
        e.Graphics.FillRectangle(Brushes.LightGray, e.Bounds); // 背景色を薄灰色に設定
        e.Graphics.DrawImage(SystemIcons.Information.ToBitmap(), new Rectangle(2, 2, 16, 16)); // アイコンを描画
        e.Graphics.DrawString(e.ToolTipText, new Font("Arial", 10), Brushes.Black, new Rectangle(20, 2, e.Bounds.Width - 20, e.Bounds.Height)); // テキストを描画
    }
}

このコードを実行すると、Tooltipにアイコンが表示され、テキストがその隣に描画されます。

アイコンを使うことで、Tooltipの視覚的なインパクトが増します。

応用例

Tooltipのカスタマイズは、さまざまな応用が可能です。

ここでは、複数色を使ったTooltip、条件に応じた色変更の作成方法について解説します。

複数色を使ったTooltip

複数色を使ったTooltipを作成するには、Drawイベント内で異なる色を使ってテキストを描画します。

以下のサンプルコードでは、Tooltipのテキストを部分的に異なる色で表示しています。

using System;
using System.Drawing;
using System.Windows.Forms;
public partial class MyForm : Form
{
    private ToolTip toolTip;
    public MyForm()
    {
        InitializeComponent();
        toolTip = new ToolTip();
        toolTip.OwnerDraw = true; // 描画をカスタマイズするために設定
        toolTip.Draw += new DrawToolTipEventHandler(toolTip_Draw);
        toolTip.SetToolTip(this.button1, "赤いテキストと青いテキスト"); // Tooltipの設定
    }
    private void toolTip_Draw(object sender, DrawToolTipEventArgs e)
    {
        e.DrawBackground(); // 背景を描画
        e.Graphics.FillRectangle(Brushes.LightYellow, e.Bounds); // 背景色を薄黄色に設定
        // 赤いテキスト
        e.Graphics.DrawString("赤いテキスト", new Font("Arial", 10), Brushes.Red, new PointF(2, 2));
        
        // 青いテキスト
        e.Graphics.DrawString("と青いテキスト", new Font("Arial", 10), Brushes.Blue, new PointF(100, 2));
    }
}

このコードを実行すると、Tooltipに赤いテキストと青いテキストが表示されます。

条件に応じた色変更

条件に応じてTooltipの色を変更するには、特定の条件をチェックし、その結果に基づいて色を設定します。

以下のサンプルコードでは、ボタンの状態に応じてTooltipの色を変更しています。

using System;
using System.Drawing;
using System.Windows.Forms;
public partial class MyForm : Form
{
    private ToolTip toolTip;
    public MyForm()
    {
        InitializeComponent();
        toolTip = new ToolTip();
        toolTip.OwnerDraw = true; // 描画をカスタマイズするために設定
        toolTip.Draw += new DrawToolTipEventHandler(toolTip_Draw);
        toolTip.SetToolTip(this.button1, "ボタンの状態に応じたTooltip"); // Tooltipの設定
    }
    private void toolTip_Draw(object sender, DrawToolTipEventArgs e)
    {
        e.DrawBackground(); // 背景を描画
        // ボタンが有効か無効かで色を変更
        if (this.button1.Enabled)
        {
            e.Graphics.FillRectangle(Brushes.Green, e.Bounds); // 有効な場合は緑
        }
        else
        {
            e.Graphics.FillRectangle(Brushes.Red, e.Bounds); // 無効な場合は赤
        }
        e.Graphics.DrawString(e.ToolTipText, new Font("Arial", 10), Brushes.White, e.Bounds); // テキストを描画
    }
}

このコードを実行すると、ボタンが有効な場合は緑色のTooltipが表示され、無効な場合は赤色のTooltipが表示されます。