[C#] ProgressBarの色を変更する方法

Q: ProgressBarの色を変更する際の注意点は？

ProgressBarの色を変更する際には、以下の点に注意が必要です。 システムテーマとの整合性 ：カスタム色を使用する場合、アプリケーション全体のデザインと整合性を保つことが重要です。 システムテーマに合った色を選ぶことで、ユーザーにとって使いやすいインターフェースを提供できます。 視認性 ：色の選択は視認性に影響します。 特に背景色と進捗色のコントラストを考慮し、進捗状況が一目でわかるようにすることが大切です。 パフォーマンス ：カスタム描画を行う場合、描画処理が重くなることがあります。 特にアニメーションを追加する場合は、パフォーマンスに影響を与えないように注意が必要です。

2024-09-16

C#でProgressBarの色を変更するには、標準のProgressBarコントロールでは直接色を変更するプロパティが提供されていないため、カスタム描画を行う必要があります。

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

具体的には、Graphicsオブジェクトを使用して、FillRectangleメソッドで指定した色の矩形を描画します。

また、ProgressBarRendererを使用して、標準の外観を維持しつつ色を変更することも可能です。

これにより、進捗バーの色を自由にカスタマイズできます。

この記事でわかること

ProgressBarの色変更の制限について
カスタムProgressBarの作成手順
グラデーションや複数色の実装方法
アニメーション付きProgressBarの実装
カスタムProgressBarのパフォーマンス最適化方法

目次から探す

ProgressBarの色を変更する方法

標準のProgressBarの制限

C#の標準的なProgressBarコントロールは、色の変更に関していくつかの制限があります。

デフォルトでは、ProgressBarはシステムのテーマに従った色で表示され、ユーザーが直接色を変更することはできません。

以下は、標準のProgressBarに関する主な制限です。

スクロールできます

制限項目	説明
色の変更	デフォルトでは色を変更できない
スタイルの選択	スタイルはシステムテーマに依存する
カスタマイズ性	限られたカスタマイズオプションしかない

ProgressBarのカスタム描画

ProgressBarの色を変更するためには、カスタム描画を行う必要があります。

これには、OwnerDrawモードを使用する方法と、OnPaintイベントを利用する方法があります。

OwnerDrawモードの設定

OwnerDrawモードを使用すると、ProgressBarの描画を自分で制御できます。

以下の手順でOwnerDrawモードを設定します。

ProgressBarのDrawModeプロパティをOwnerDrawに設定します。
DrawItemイベントをオーバーライドして、描画処理を実装します。

サンプルコードは以下の通りです。

partial class MyForm : Form
{
    private ProgressBar progressBar;
    public MyForm()
    {
        InitializeComponent();
        progressBar = new ProgressBar();
        progressBar.DrawMode = OwnerDraw;
        progressBar.DrawItem += ProgressBar_DrawItem;
    }
    private void ProgressBar_DrawItem(object sender, DrawItemEventArgs e)
    {
        // ProgressBarの描画処理をここに記述
        // 例：e.Graphics.FillRectangle(Brushes.Red, e.Bounds);
    }
}

このコードでは、ProgressBar_DrawItemメソッド内でProgressBarの描画を行います。

OnPaintイベントの利用

OnPaintイベントを利用することで、ProgressBarの描画をカスタマイズすることも可能です。

以下の手順でOnPaintイベントを利用します。

ProgressBarを継承したカスタムクラスを作成します。
OnPaintメソッドをオーバーライドして、描画処理を実装します。

サンプルコードは以下の通りです。

public class CustomProgressBar : ProgressBar
{
    protected override void OnPaint(PaintEventArgs e)
    {
        // カスタム描画処理をここに記述
        // 例：e.Graphics.FillRectangle(Brushes.Blue, this.ClientRectangle);
    }
}

このコードでは、CustomProgressBarクラスを作成し、OnPaintメソッドをオーバーライドして描画処理を行います。

ProgressBarRendererクラスの活用

ProgressBarRendererクラスを使用することで、標準のProgressBarのスタイルを維持しつつ、色を変更することができます。

このクラスは、Windowsのテーマに基づいた描画を行うため、見た目が一貫性を保ちます。

以下は、ProgressBarRendererを使用したサンプルコードです。

private void DrawProgressBar(Graphics g, Rectangle bounds, int value)
{
    // ProgressBarの描画
    ProgressBarRenderer.DrawHorizontalBar(g, bounds);
    // 進捗部分の描画
    Rectangle progressRect = new Rectangle(bounds.X, bounds.Y, value, bounds.Height);
    ProgressBarRenderer.DrawHorizontalChunks(g, progressRect);
}

このコードでは、DrawProgressBarメソッドを使用して、指定した範囲にProgressBarを描画します。

ProgressBarRendererを利用することで、システムテーマに合ったスタイルを保ちながら、色を変更することが可能です。

カスタムProgressBarの作成

カスタムコントロールの作成手順

カスタムProgressBarを作成するためには、まず新しいクラスを作成し、ProgressBarクラスを継承します。

以下の手順でカスタムコントロールを作成します。

新しいクラスファイルを作成し、CustomProgressBarという名前を付けます。
ProgressBarクラスを継承します。
コンストラクタで初期設定を行います。

サンプルコードは以下の通りです。

public class CustomProgressBar : ProgressBar
{
    public CustomProgressBar()
    {
        // 初期設定をここに記述
        this.SetStyle(ControlStyles.UserPaint, true); // OwnerDrawを有効にする
    }
}

このコードでは、CustomProgressBarクラスを作成し、ControlStyles.UserPaintを有効にすることで、カスタム描画を行えるようにしています。

カスタムProgressBarのプロパティ設定

カスタムProgressBarには、色やスタイルを設定するためのプロパティを追加することができます。

以下のプロパティを追加して、色を変更できるようにします。

BarColor：進捗部分の色
BackgroundColor：背景部分の色

サンプルコードは以下の通りです。

public Color BarColor { get; set; } = Color.Blue; // デフォルトの進捗色
public Color BackgroundColor { get; set; } = Color.Gray; // デフォルトの背景色

これにより、BarColorとBackgroundColorプロパティを使用して、進捗部分と背景部分の色を設定できるようになります。

カスタムProgressBarのイベント処理

カスタムProgressBarでは、描画処理を行うためにOnPaintメソッドをオーバーライドします。

このメソッド内で、設定したプロパティを使用して描画を行います。

サンプルコードは以下の通りです。

protected override void OnPaint(PaintEventArgs e)
{
    // 背景の描画
    using (Brush backgroundBrush = new SolidBrush(BackgroundColor))
    {
        e.Graphics.FillRectangle(backgroundBrush, this.ClientRectangle);
    }
    // 進捗部分の描画
    float percentage = (float)this.Value / this.Maximum;
    int progressWidth = (int)(this.Width * percentage);
    using (Brush barBrush = new SolidBrush(BarColor))
    {
        e.Graphics.FillRectangle(barBrush, 0, 0, progressWidth, this.Height);
    }
}

このコードでは、OnPaintメソッドをオーバーライドし、背景と進捗部分をそれぞれ指定した色で描画しています。

これにより、カスタムProgressBarが色を変更できるようになります。

応用例

グラデーションカラーのProgressBar

グラデーションカラーのProgressBarを作成することで、視覚的に魅力的な進捗表示を実現できます。

グラデーションを描画するには、LinearGradientBrushを使用します。

以下の手順でグラデーションカラーのProgressBarを実装します。

サンプルコードは以下の通りです。

protected override void OnPaint(PaintEventArgs e)
{
    // 背景の描画
    using (Brush backgroundBrush = new SolidBrush(BackgroundColor))
    {
        e.Graphics.FillRectangle(backgroundBrush, this.ClientRectangle);
    }
    // グラデーションの描画
    float percentage = (float)this.Value / this.Maximum;
    int progressWidth = (int)(this.Width * percentage);
    using (LinearGradientBrush gradientBrush = new LinearGradientBrush(
        new Rectangle(0, 0, progressWidth, this.Height),
        Color.Red,
        Color.Blue,
        LinearGradientMode.Horizontal))
    {
        e.Graphics.FillRectangle(gradientBrush, 0, 0, progressWidth, this.Height);
    }
}

このコードでは、進捗部分に赤から青へのグラデーションを適用しています。

LinearGradientBrushを使用することで、滑らかな色の変化を表現できます。

複数色のProgressBar

複数色のProgressBarを作成することで、進捗の状態を視覚的に表現できます。

例えば、進捗が50%未満の場合は赤、50%以上80%未満の場合は黄色、80%以上の場合は緑色にすることができます。

サンプルコードは以下の通りです。

protected override void OnPaint(PaintEventArgs e)
{
    // 背景の描画
    using (Brush backgroundBrush = new SolidBrush(BackgroundColor))
    {
        e.Graphics.FillRectangle(backgroundBrush, this.ClientRectangle);
    }
    // 進捗部分の色を決定
    Color progressColor;
    float percentage = (float)this.Value / this.Maximum;
    if (percentage < 0.5f)
    {
        progressColor = Color.Red; // 50%未満
    }
    else if (percentage < 0.8f)
    {
        progressColor = Color.Yellow; // 50%以上80%未満
    }
    else
    {
        progressColor = Color.Green; // 80%以上
    }
    int progressWidth = (int)(this.Width * percentage);
    using (Brush barBrush = new SolidBrush(progressColor))
    {
        e.Graphics.FillRectangle(barBrush, 0, 0, progressWidth, this.Height);
    }
}

このコードでは、進捗の割合に応じて色を変更し、視覚的に進捗の状態を示しています。

アニメーション付きProgressBar

アニメーション付きのProgressBarを作成することで、進捗の変化をよりダイナミックに表現できます。

タイマーを使用して、定期的にProgressBarの値を更新する方法を紹介します。

サンプルコードは以下の通りです。

private Timer timer;
public CustomProgressBar()
{
    InitializeComponent();
    timer = new Timer();
    timer.Interval = 100; // 100ミリ秒ごとに更新
    timer.Tick += Timer_Tick;
    timer.Start();
}
private void Timer_Tick(object sender, EventArgs e)
{
    // ProgressBarの値を更新
    if (this.Value < this.Maximum)
    {
        this.Value += 1; // 1ずつ増加
    }
    else
    {
        this.Value = 0; // 最大値に達したらリセット
    }
    this.Invalidate(); // 再描画を要求
}

このコードでは、Timerを使用してProgressBarの値を定期的に更新し、Invalidateメソッドで再描画を要求しています。

これにより、アニメーション効果を持つProgressBarが実現できます。