记录｜panel组件的渐变色效果+窗口变大后的效果问题

---

前言

用的是C# winform框架。
想要对panel组件，实现个水平的渐变色效果。

---

一、渐变色效果

1.1 代码

• 采用个渐变色方法。代码如下：

        private void panelTop_Paint(object sender, PaintEventArgs e)
        {
            Graphics g = e.Graphics;
            Color FColor = Color.Transparent;
            Color TColor = Color.FromArgb(0, 120, 215);
            Brush b = new LinearGradientBrush(this.panelTop.ClientRectangle, TColor, FColor, LinearGradientMode.Horizontal);
            g.FillRectangle(b, this.panelTop.ClientRectangle);
        }

1.2 代码解析

用于在名为panelTop的面板上绘制一个水平渐变的背景。具体解析如下：

• private void panelTop_Paint(object sender, PaintEventArgs e)：这是一个私有方法，用于处理panelTop面板的绘制事件。当面板需要重绘时，这个方法会被调用。

• Graphics g = e.Graphics;：从PaintEventArgs参数中获取Graphics对象，用于后续的绘图操作。

• Color FColor = Color.Transparent;：定义起始颜色为透明色。

• Color TColor = Color.FromArgb(0, 120, 215);：定义终止颜色为一个具有指定ARGB值的颜色（这里的颜色值为蓝色）。

• Brush b = new LinearGradientBrush(this.panelTop.ClientRectangle,TColor, FColor, LinearGradientMode.Horizontal);：创建一个线性渐变画刷，用于在面板的客户端矩形区域内绘制垂直渐变。渐变从起始颜色到终止颜色。

• g.FillRectangle(b, this.panelTop.ClientRectangle);：使用渐变画刷填充整个面板的客户端矩形区域，实现渐变背景的效果。

1.3 效果图

---

二、渐变问题

2.1 问题描述

这样做之后，在C# winform框架中一开始还可以，但是一旦放大winform的窗口后，就会出现下面的情况：

2.2 解决方案

• 经过实验，这个是由于页面大小变化时，panel并没有进行重新绘制的原因。
• 需要在窗口大小改变事件中重新绘制。

2.3 具体代码实施

下面的panelTop是个Panel类的对象。
首先，为窗口的Resize事件添加一个事件处理程序：

private void Form1_Resize(object sender, EventArgs e)
{
    panelTop.Invalidate(); // 使panelTop无效，以便在下次绘制时重绘
}

然后，确保Form1类继承了Form类，并在构造函数中订阅Resize事件：

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();
        this.Resize += new EventHandler(Form1_Resize);
    }
}

这样，每当窗口大小发生变化时，都会调用Form1_Resize方法，从而使panelTop无效并触发其Paint事件。这将确保在窗口大小变化后，panelTop仍然保持渐变效果。【如下图示】

---

三、控制渐变色的作用范围

3.1 问题描述

如果让FColor的作用区域只占整个Brush b的20%部分，该怎么做？

3.2 代码

private void panelTop_Paint(object sender, PaintEventArgs e)
{
    Graphics g = e.Graphics;
    Color FColor = Color.Transparent;
    Color TColor = Color.FromArgb(0, 120, 215);
    int gradientWidth = this.panelTop.ClientRectangle.Width;
    int gradientHeight = this.panelTop.ClientRectangle.Height;
    int gradientStartX = 0;
    int gradientEndX = (int)(gradientWidth * 0.8); // 调整为80%，即FColor占据20%的部分

    Rectangle gradientRect = new Rectangle(gradientStartX, 0, gradientEndX - gradientStartX, gradientHeight);
    Brush b = new LinearGradientBrush(gradientRect, TColor, FColor, LinearGradientMode.Horizontal);
    g.FillRectangle(b, gradientRect);
}

将渐变区域的宽度设置为原始宽度的80%，这样FColor就只占据了整个Brush b的20%部分。

更新时间

• 2024.08.15：创建。