C#/WinForm拖拽文件上传

 

一、首先创建一个上传文件的类，继承Control类，如下：

public class UploadControl : Control{private Image _image;public UploadControl(){this.SetStyle(ControlStyles.UserPaint |  //控件自行绘制，而不使用操作系统的绘制ControlStyles.AllPaintingInWmPaint | //忽略背景擦除的Windows消息，减少闪烁，只有UserPaint设为true时才能使用。ControlStyles.OptimizedDoubleBuffer |//在缓冲区上绘制，不直接绘制到屏幕上，减少闪烁。ControlStyles.ResizeRedraw | //控件大小发生变化时，重绘。ControlStyles.SupportsTransparentBackColor, //支持透明背景颜色true);_image =Properties.Resources.upload;this.Cursor = Cursors.Hand;this.AllowDrop = true;}}

 准备好上传的图片

二、我们需要绘制圆角矩形，所以先准备一个圆角路径，如下：

private GraphicsPath GetRoundedRectPath(Rectangle rect, uint radius){int r = (int)radius << 1;Rectangle arcRect = new Rectangle(rect.Location, new Size(r, r));GraphicsPath path = new GraphicsPath();path.AddArc(arcRect, 180, 90);// 右上圆弧arcRect.X = rect.Right - r;path.AddArc(arcRect, 270, 90);// 右下圆弧arcRect.Y = rect.Bottom - r;path.AddArc(arcRect, 0, 90);// 左下圆弧arcRect.X = rect.Left;path.AddArc(arcRect, 90, 90);path.CloseFigure();return path;}

 三、重写OnPaint事件，绘制填充圆角背景

Rectangle outRect = new Rectangle(0, 0, this.Width, this.Height);
using var outPath = GetRoundedRectPath(outRect, Radius);
this.Region = new Region(path);
using SolidBrush b = new SolidBrush(this.BackColor);
e.Graphics.FillPath(b, outPath);

 效果如下：

发现使用Region属性有锯齿，尽管开启高质量绘图也无用，我们去掉Region属性，但是新的问题出现，此控件的背景必须和父级窗体的背景一致，不然圆角效果就没有了。后续我们都是不设置Region属性，保持背景与父级控件背景一致就行。

四、在OnPaint事件，绘制圆角边框

var innerRect = Rectangle.Inflate(outRect, -(int)border, -(int)border);
using GraphicsPath innerPath = GetRoundedRectPath(innerRect, Radius - border);
using Pen pen = new Pen(ColorState switch
{ControlState.Hover => this.BorderHoverColor,ControlState.Pressed => this.BorderPressedColor,ControlState.DragEnter => this.BorderHoverColor,_ => this.BorderNormalColor,
}, border);
pen.DashStyle = BorderStyle;
e.Graphics.DrawPath(pen, innerPath);

效果如下：

四、在OnPaint事件，绘制上传图像以及文字

const int h = 5;
SizeF sizeF = SizeF.Empty;
if (!string.IsNullOrWhiteSpace(Text))sizeF = e.Graphics.MeasureString(Text, this.Font);
if (_image != null)
{int imageH = 0;if (sizeF != SizeF.Empty){imageH = (int)((this.Height - _image.Height - h - sizeF.Height) / 2);TextRenderer.DrawText(e.Graphics, Text, this.Font, new Point((int)((this.Width - sizeF.Width) / 2), imageH + _image.Height + h), this.ForeColor);}elseimageH = this.Height - _image.Height >> 1;e.Graphics.DrawImage(_image, this.Width - _image.Width >> 1, imageH);
}
else
{if (sizeF != SizeF.Empty){TextRenderer.DrawText(e.Graphics, Text, this.Font, new Point((int)((this.Width - sizeF.Width) / 2), (int)((this.Height - sizeF.Height) / 2)), this.ForeColor);}
}

效果如下：

五、我们定义一个枚举，用来实现鼠标移、出移入、点击、文件拖动让边框变色

public enum ControlState { Hover, Normal, Pressed, DragEnter }

 然后重写OnMouseEnter、OnMouseLeave、OnMouseDown、OnMouseUp事件，如下：

private ControlState ColorState { get; set; }= ControlState.Normal;
protected override void OnMouseEnter(EventArgs e)//鼠标进入时
{ColorState = ControlState.Hover;//Hoverthis.Invalidate();base.OnMouseEnter(e);
}
protected override void OnMouseLeave(EventArgs e)//鼠标离开
{ColorState = ControlState.Normal;//正常this.Invalidate();base.OnMouseLeave(e);
}
protected override void OnMouseDown(MouseEventArgs e)//鼠标按下
{if (e.Button == MouseButtons.Left && e.Clicks == 1)//鼠标左键且点击次数为1{ColorState = ControlState.Pressed;//按下的状态this.Invalidate();using OpenFileDialog openFileDialog = new OpenFileDialog();openFileDialog.Filter = "所有文件 (*.*)|*.*";if (openFileDialog.ShowDialog() == DialogResult.OK){FilesCallback?.Invoke(new string[] { openFileDialog.FileName });}}base.OnMouseDown(e);
}
protected override void OnMouseUp(MouseEventArgs e)//鼠标弹起
{if (e.Button == MouseButtons.Left && e.Clicks == 1){if (ClientRectangle.Contains(e.Location))//控件区域包含鼠标的位置{ColorState = ControlState.Hover;}else{ColorState = ControlState.Normal;}this.Invalidate();}base.OnMouseUp(e);
}

就是在OnPaint事件中笔的颜色代码：

ColorState switch
{ControlState.Hover => this.BorderHoverColor,ControlState.Pressed => this.BorderPressedColor,ControlState.DragEnter => this.BorderHoverColor,_ => this.BorderNormalColor,
}

当然我们在OnMouseDown事件中还实现了点击选择文件：

using OpenFileDialog openFileDialog = new OpenFileDialog();
openFileDialog.Filter = "所有文件 (*.*)|*.*";
if (openFileDialog.ShowDialog() == DialogResult.OK)
{FilesCallback?.Invoke(new string[] { openFileDialog.FileName });
}

其中FilesCallback是一个事件：

public event Action<string[]> FilesCallback;

六、实现文件拖动上传

protected override void OnDragEnter(DragEventArgs drgevent)
{base.OnDragEnter(drgevent);if (drgevent.Data.GetDataPresent(DataFormats.FileDrop))drgevent.Effect = DragDropEffects.Copy;elsedrgevent.Effect = DragDropEffects.None;ColorState = ControlState.DragEnter;this.Invalidate();
}
protected override void OnDragLeave(EventArgs e)
{base.OnDragLeave(e);ColorState = ControlState.Normal;this.Invalidate();
}
protected override void OnDragDrop(DragEventArgs drgevent)
{base.OnDragDrop(drgevent);ColorState = ControlState.Normal;this.Invalidate();object? obj = drgevent.Data?.GetData(DataFormats.FileDrop);if (obj == null) return;FilesCallback?.Invoke((string[])obj);
}

同时需要在构造函数中开启AllowDrop：

this.AllowDrop = true;

其它代码未在这里展示详情请见：

https://gitee.com/feng-cai/Seal-Bubbles