配置したpanel内の色をグラデーションしたいです。

Question

前提

panel内の色をグラデーションしたいです。

プログラミング初心者です。

visual stadio2022を使ってc#でプログラミングしています。

VisualStudioでwindows formでショッピングサイトのサイドメニューのようにpanelがあり
panel内の色が紺色から紫に上から下へグラデーションをしたいです。

c#でプログラミングするとき、
panelの色を紺色から赤紫にグラデーションするにはどのようにコードを使用すれば
教えてください。

また、以下のサイトの2つ
1．https://dobon.net/vb/dotnet/graphics/lineargradientbrush.html
2．https://docs.microsoft.com/ja-jp/dotnet/desktop/winforms/advanced/how-to-create-a-linear-gradient?view=netframeworkdesktop-4.8

を参考にLinearGradientBrushというものでブラシを作成し、
配置した範囲のパネル全体をグラデーションを行いましたがうまくいきません。
Form1

private void panel1_Paint(object sender, PaintEventArgs e)
        {

            //描画先とするImageオブジェクトを作成する
            Bitmap canvas = new Bitmap(panel1.Width, panel1.Height);
            //ImageオブジェクトのGraphicsオブジェクトを作成する
            Graphics g = Graphics.FromImage(canvas);
            //縦に白から黒へのグラデーションのブラシを作成
            //g.VisibleClipBoundsは表示クリッピング領域に外接する四角形
            LinearGradientBrush gb = new LinearGradientBrush(
                    g.VisibleClipBounds,
                    Color.White,
                    Color.Black,
                    LinearGradientMode.Vertical);
            //四角を描く
            g.FillRectangle(gb, g.VisibleClipBounds);
            //リソースを解放する
            gb.Dispose();
            g.Dispose();
            //PictureBox1に表示する
            panel1.BackgroundImage = canvas;
        }
    }

c#のソースコードを教えてください。
できれば、例を出してわかりやすく説明があればうれしいです

Comments

[YAmaGNZ]

「うまくいかない」とはどのようになってどううまくいかないのですか？

[退会済みユーザー]

グラデーションの仕方を理解して、
windowformに配置しているパネル内の色が上から下へグラデーションすることができなかったことをいいます。

[KOZ6.0]

Form_Load に書けば良いのでは？
あとはコメントをちゃんと読めばやりたいことが出来るはずですけどね。

[YAmaGNZ]

提示されているコードですとグラデーションが描画されるが、再描画され続けてちらつくといった現象になるのではないかと思います。
グラデーションができないわけではないはずです。
何も描画されていないのでしょうか?
それとも違う動きなのでしょうか?
動作した結果を正確に書くようにしましょう。

Answer 1

参考サイト１の方法はImageを作成しているので、初めに1回やれば十分です。
参考サイト２の方法は注意書きにある通り、Paintイベントで直接描画しています。

パネルのサイズが固定ならば１（panel1）で、サイズが変わるなら２（panel2）がいいんじゃないですかね。

.NET6です^^（なにか指定があれば合わせます）

using System.Drawing.Drawing2D;

namespace Q5mtt1e0e765dl0;

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();

        var tableLayoutPanel1 = new TableLayoutPanel
        {
            ColumnCount = 2,
            Dock = DockStyle.Fill,
            Parent = this,
        };
        tableLayoutPanel1.ColumnStyles.Add(new(SizeType.Percent, 50F));
        tableLayoutPanel1.ColumnStyles.Add(new(SizeType.Percent, 50F));


        var panel1 = new Panel
        {
            Dock = DockStyle.Fill,
            Parent = tableLayoutPanel1,
        };

        var canvas = new Bitmap(panel1.Width, panel1.Height);
        using var g = Graphics.FromImage(canvas);
        using var gb = new LinearGradientBrush(g.VisibleClipBounds,
            Color.DarkBlue, Color.MediumVioletRed, LinearGradientMode.Vertical);
        g.FillRectangle(gb, g.VisibleClipBounds);
        panel1.BackgroundImage = canvas;


        var panel2 = new Panel
        {
            Dock = DockStyle.Fill,
            Parent = tableLayoutPanel1,
        };
        panel2.Paint += Panel2_Paint;
        panel2.Resize += (_, _) => panel2.Invalidate(); // Paintを呼ぶ
    }

    private void Panel2_Paint(Object? sender, PaintEventArgs e)
    {
        if (sender is Panel panel2)
        {
            using var gb = new LinearGradientBrush(e.Graphics.VisibleClipBounds,
                Color.DarkBlue, Color.MediumVioletRed, LinearGradientMode.Vertical);
            e.Graphics.FillRectangle(gb, e.Graphics.VisibleClipBounds);
        }
    }
}

---

コード片だけではどこに書いたらいいのかわかりませんよね^^;
なので私は全文あげる派です^^

---

追記（より絞った例＆コメント追加）

1. Panelをフォームに追加する

2. Panelのプロパティを変更

Panelが可変サイズになればなんでもいいがAnchorにした。

3. Panelのイベントを追加する

Paint・Resizeイベントを追加

4. コード

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace Q5mtt1e0e765dl0
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        // パネルを描画するときに呼び出される
        private void panel1_Paint(object sender, PaintEventArgs e)
        {
            // ブロック（{}）を抜けたら自動的に Dispose するC#構文
            using (
                // グラデーションブラシ作成
                var gb = new LinearGradientBrush(
                // グラデーション範囲（表示クリッピング領域）
                e.Graphics.VisibleClipBounds,
                // グラデーション開始色（紺色）
                Color.DarkBlue,
                // グラデーション終了色（赤紫）
                Color.MediumVioletRed,
                // グラデーション方向（縦）
                LinearGradientMode.Vertical))
            {
                // 四角形の内部を塗りつぶす（表示クリッピング領域）
                e.Graphics.FillRectangle(gb, e.Graphics.VisibleClipBounds);
            }
            // using構文を使用したため Dispose を書く必要はない
            //リソースを解放する
            //gb.Dispose();
        }

        // パネルサイズが変わったときに呼び出される
        private void panel1_Resize(object sender, EventArgs e)
        {
            // パネルの表面全体を無効化してパネルを再描画する
            panel1.Invalidate();
        }
    }
}

参考

using ステートメント - C# リファレンス | Microsoft Learn

LinearGradientBrush クラス (System.Drawing.Drawing2D) | Microsoft Learn

Graphics.VisibleClipBounds プロパティ (System.Drawing) | Microsoft Learn

Graphics.FillRectangle メソッド (System.Drawing) | Microsoft Learn

Control.Invalidate メソッド (System.Windows.Forms) | Microsoft Learn

Comments

[退会済みユーザー]

解答していただきありがたいのですが、自分は初心者であるゆえになぜ
tableLayoutPanel1.ColumnStyles.Add(new(SizeType.Percent, 50F));
や
if (sender is Panel panel2)
{
using var gb = new LinearGradientBrush(e.Graphics.VisibleClipBounds,
Color.DarkBlue, Color.MediumVioletRed, LinearGradientMode.Vertical);
e.Graphics.FillRectangle(gb, e.Graphics.VisibleClipBounds);
}
であるなど
なぜそのようなコードが必要であるか説明やコメントがあるとありがたいです。

[TN8001]

了解しました。提示コード程度のコメントでよろしいでしょうか？

その前にできるだけmitsutanさんの前提状態に近づけたいので、下記２点お答えください。

* Visual Studio 2022で作成しているプログラムはどちらでしょうか？（最初に選んだテンプレート）
1. Windows フォーム アプリ
2. Windows フォーム アプリケーション（.NET Framework）

* グラデーションしたいパネルは
1. 固定サイズ（ウィンドウサイズが変わらないか・ウィンドウサイズが変わってもパネルサイズは変わらない）
2. 可変サイズ

[退会済みユーザー]

* Visual Studio 2022で作成しているプログラムはどちらでしょうか？（最初に選んだテンプレート）
おそらく
2. Windows フォーム アプリケーション（.NET Framework）
です。
* グラデーションしたいパネルは
2. 可変サイズ

[退会済みユーザー]

コメントについてお任せしますが、できればなぜ必要であるか初心者にわかるものでお願いしたいです。

[退会済みユーザー]

解答ありがとうございます。
もし、1. 固定サイズ（ウィンドウサイズが変わらないか・ウィンドウサイズが変わってもパネルサイズは変わらない）の場合は、Panelが可変サイズになればなんでもいいがAnchorプロパティを何もしないで大丈夫ですか

[TN8001]

AnchorやDockをいじらなければ、デザイナで指定したLocationとSizeで表示されますので固定サイズになります。

固定サイズでもこの方法（参考サイト２の方法）も、もちろん使用可能です。