简介这是一份面向C#初学者与桌面应用开发者的登录界面源码示例基于.NET平台实现帮助解决WinForms或WPF下界面美观度不足、交互逻辑不完整的问题。资源包共42个文件包含9个png界面素材、6个cs源码文件、2个resx与5个resources资源文件以及sln解决方案、csproj项目文件和exe、pdb、dll等编译产物压缩包约2.06MB结构完整可直接在Visual Studio中打开运行。源码围绕用户名与密码输入框、登录按钮、记住我选项、忘记密码与注册链接、错误提示等关键元素展开并通过Click事件处理程序完成输入校验与登录逻辑演示窗体类与业务逻辑分离清晰。已有1616人学习下载适合希望快速掌握C# GUI控件使用、事件响应与简单验证机制的开发者参考也能为有经验者优化登录界面设计提供思路。1. 登录界面不只是“画个框”这套 C# 源码把交互细节全摊开了很多做 WinForm 或 WPF 项目的开发者都有个共识业务逻辑写得再顺只要登录窗口一弹出来整个项目的“专业感”就露馅了。默认的 Form 边框、灰扑扑的按钮、没有任何反馈的输入框用户还没进主界面就已经在心里打了低分。这套 C# 登录界面源码解决的就是这个尴尬——它不依赖第三方 UI 库纯靠原生控件加自定义绘制把一套带渐变背景、圆角输入框、悬停高亮、加载动画的登录窗口完整实现出来。适合两类人一是正在做桌面端管理系统、需要快速替换默认登录页的开发者二是想学 GDI 自定义绘制和控件封装技巧的 WinForm 进阶者。源码结构清晰没有过度设计拿到手改改配色和 Logo 就能用在自己的项目里。2. 技术选型与项目结构为什么用 WinForm 而不是 WPF2.1 选型逻辑轻量、零依赖、好移植这套源码选的是 .NET Framework 4.7.2 WinForm而不是 WPF 或 WinUI。原因很直接WinForm 在中小型桌面管理系统中仍然是存量最大的技术栈很多公司的老项目还在维护直接给一个 WPF 方案反而不好往现有工程里塞。源码没有引入任何 NuGet 包所有视觉效果都靠System.Drawing里的Graphics类手绘完成这意味着你把几个.cs文件拖进自己的项目就能跑不用处理依赖冲突。常见做法是登录界面单独建一个LoginForm主窗体在验证通过后才实例化。这套源码也是这个思路但它把绘制逻辑抽到了独立的UIHelper静态类里方便复用。2.2 目录结构一览源码包解压后主要包含以下文件LoginUI/ ├── Forms/ │ ├── LoginForm.cs # 登录主窗体含全部交互逻辑 │ └── LoginForm.Designer.cs # 设计器代码控件声明 ├── Controls/ │ ├── RoundTextBox.cs # 自定义圆角输入框 │ └── GradientButton.cs # 渐变背景按钮 ├── Helpers/ │ ├── UIHelper.cs # 绘制工具类圆角路径、渐变画刷 │ └── ValidateHelper.cs # 输入校验空值、格式检查 ├── Properties/ │ └── Resources.resx # 图标、背景图等资源 └── Program.cs # 入口启动 LoginForm这个结构把“窗体”“控件”“工具”三层分开了。RoundTextBox和GradientButton继承自原生控件重写OnPaint方法实现自绘UIHelper提供静态方法给多个控件调用避免重复代码。如果你只想快速换皮改LoginForm.cs里的颜色常量和Resources.resx里的图片就行想深度定制控件行为就去改Controls目录下的两个类。2.3 关键依赖与运行环境开发环境Visual Studio 2019 及以上安装“.NET 桌面开发”工作负载目标框架.NET Framework 4.7.2源码里csproj写死的改高版本也能编译系统要求Windows 7 SP1 及以上无外部 DLL 依赖无 NuGet 包注意如果你用的是 .NET 6/8 的 WinForm 项目需要把csproj里的TargetFramework改成net6.0-windows或net8.0-windows同时把Program.cs里的Application.EnableVisualStyles()保留否则自绘控件的字体渲染会发虚。3. 核心模块拆解从绘制到验证的完整链路3.1 圆角输入框重写 OnPaint 实现无边框效果原生TextBox是直角矩形边框颜色由系统主题决定没法直接改。这套源码的做法是把BorderStyle设为None然后在OnPaint里自己画圆角背景和边框。// RoundTextBox.cs 核心绘制逻辑 protected override void OnPaint(PaintEventArgs e) { base.OnPaint(e); Graphics g e.Graphics; g.SmoothingMode SmoothingMode.AntiAlias; // 抗锯齿圆角才平滑 // 绘制圆角背景 using (GraphicsPath path UIHelper.CreateRoundRect(ClientRectangle, _cornerRadius)) using (SolidBrush brush new SolidBrush(_backColor)) { g.FillPath(brush, path); } // 绘制边框聚焦时换高亮色 Color borderColor Focused ? _focusBorderColor : _normalBorderColor; using (GraphicsPath path UIHelper.CreateRoundRect(ClientRectangle, _cornerRadius)) using (Pen pen new Pen(borderColor, _borderWidth)) { g.DrawPath(pen, path); } }逻辑说明CreateRoundRect是UIHelper里的静态方法用GraphicsPath.AddArc拼接四条弧线形成圆角矩形。_cornerRadius默认 8 像素_borderWidth默认 1.5 像素。聚焦时边框从灰色变成主题蓝这个状态切换靠重写OnGotFocus和OnLostFocus里调用Invalidate()触发重绘。参数怎么改圆角大小改_cornerRadius边框粗细改_borderWidth颜色在构造函数里通过属性赋值。如果你想让输入框带左侧图标可以在OnPaint里先DrawImage再画文字区域把Padding.Left调大给图标留位置。3.2 渐变按钮鼠标悬停与按下的状态机GradientButton继承自Button但把FlatStyle设为FlatFlatAppearance.BorderSize设为 0然后完全自绘。它维护了三个状态Normal、Hover、Pressed每个状态对应不同的渐变起止颜色。// GradientButton.cs 状态切换与绘制 private ButtonState _state ButtonState.Normal; protected override void OnMouseEnter(EventArgs e) { _state ButtonState.Hover; Invalidate(); // 触发重绘 base.OnMouseEnter(e); } protected override void OnMouseDown(MouseEventArgs mevent) { _state ButtonState.Pressed; Invalidate(); base.OnMouseDown(mevent); } protected override void OnPaint(PaintEventArgs pevent) { Graphics g pevent.Graphics; g.SmoothingMode SmoothingMode.AntiAlias; Color startColor, endColor; switch (_state) { case ButtonState.Hover: startColor _hoverStart; endColor _hoverEnd; break; case ButtonState.Pressed: startColor _pressedStart; endColor _pressedEnd; break; default: startColor _normalStart; endColor _normalEnd; break; } using (LinearGradientBrush brush new LinearGradientBrush( ClientRectangle, startColor, endColor, LinearGradientMode.Vertical)) using (GraphicsPath path UIHelper.CreateRoundRect(ClientRectangle, _cornerRadius)) { g.FillPath(brush, path); } // 绘制按钮文字 TextRenderer.DrawText(g, Text, Font, ClientRectangle, ForeColor, TextFormatFlags.HorizontalCenter | TextFormatFlags.VerticalCenter); }逻辑说明LinearGradientBrush的最后一个参数LinearGradientMode.Vertical表示从上到下渐变。悬停时颜色整体提亮 15%按下时压暗 10%这个幅度是视觉上比较舒服的区间。TextRenderer.DrawText比Graphics.DrawString在 WinForm 里渲染更清晰尤其是小字号。参数怎么改渐变方向改成Horizontal就是左右渐变圆角半径和输入框共用UIHelper的默认值想单独调就传不同参数。按钮的Cursor属性在构造函数里设为Cursors.Hand鼠标移上去变手型这个细节很多自绘按钮会忘。3.3 登录验证流程从点击到跳转的完整链路点击登录按钮后代码走了一个清晰的校验链先检查空值再检查格式最后模拟异步验证并显示加载状态。// LoginForm.cs 登录按钮点击事件 private async void btnLogin_Click(object sender, EventArgs e) { // 1. 空值校验 if (string.IsNullOrWhiteSpace(txtUser.Text)) { ShowTip(请输入用户名); txtUser.Focus(); return; } if (string.IsNullOrWhiteSpace(txtPwd.Text)) { ShowTip(请输入密码); txtPwd.Focus(); return; } // 2. 进入加载状态禁用按钮防止重复点击 btnLogin.Enabled false; btnLogin.Text 登录中...; picLoading.Visible true; // 一个旋转的 GIF 或自绘动画 // 3. 模拟异步验证实际项目替换为 API 调用 bool isValid await Task.Run(() ValidateHelper.CheckLogin( txtUser.Text.Trim(), txtPwd.Text)); // 4. 根据结果跳转或提示 if (isValid) { this.DialogResult DialogResult.OK; this.Close(); // 主窗体在 Program.cs 里根据 DialogResult 决定是否启动 } else { ShowTip(用户名或密码错误); btnLogin.Enabled true; btnLogin.Text 登 录; picLoading.Visible false; } }逻辑说明async/await配合Task.Run把验证逻辑放到线程池避免 UI 卡死。DialogResult.OK是 WinForm 里窗体间通信的常用模式Program.cs里这样写// Program.cs 入口逻辑 Application.EnableVisualStyles(); Application.SetCompatibleTextRenderingDefault(false); using (LoginForm login new LoginForm()) { if (login.ShowDialog() DialogResult.OK) { Application.Run(new MainForm()); } }参数怎么改把ValidateHelper.CheckLogin换成你自己的数据库查询或 HTTP 请求即可。如果是调 API记得把Task.Run换成HttpClient的异步方法别用.Result阻塞 UI 线程。加载动画如果不想用 GIF可以在picLoading的位置放一个Label用Timer每隔 100ms 切换一次●○○、○●○、○○●的文本效果也不错。3.4 窗口拖拽与阴影无边框窗体的必备技巧这套源码的登录窗口去掉了系统标题栏FormBorderStyle None所以需要自己实现拖拽移动和关闭按钮。拖拽逻辑写在LoginForm的MouseDown和MouseMove里private Point _mouseOffset; private void LoginForm_MouseDown(object sender, MouseEventArgs e) { if (e.Button MouseButtons.Left) { _mouseOffset new Point(-e.X, -e.Y); // 记录鼠标相对窗体左上角的偏移 } } private void LoginForm_MouseMove(object sender, MouseEventArgs e) { if (e.Button MouseButtons.Left) { Point mousePos Control.MousePosition; mousePos.Offset(_mouseOffset.X, _mouseOffset.Y); this.Location mousePos; // 窗体跟随鼠标移动 } }逻辑说明_mouseOffset存的是鼠标按下时相对于窗体左上角的负偏移量移动时用当前鼠标屏幕坐标加上这个偏移窗体就跟手了。关闭按钮就是一个Label或PictureBox点击时this.Close()。阴影效果没有用系统 API而是在窗体下方垫了一个半透明的Panel或者直接在OnPaint里画一层带透明度的黑色圆角矩形。常见做法是用Region裁剪窗体圆角但那样边缘会有锯齿这套源码用的是UpdateLayeredWindow的简化版——直接设置TransparencyKey为某个不常用的颜色比如Color.FromArgb(255, 254, 253)然后把背景画成这个颜色系统会自动抠掉。注意TransparencyKey方案在 Windows 7 上表现正常但在某些高 DPI 设置下边缘会发虚。如果项目要求高 DPI 适配建议改用Region裁剪加抗锯齿绘制或者直接上 WPF。4. 避坑与常见问题那些编译通过但跑不对的坑4.1 自绘控件闪烁严重现象输入框和按钮在鼠标快速划过时闪白尤其是窗体背景有图片的时候。原因WinForm 默认的OnPaintBackground会先用背景色擦除一遍再调OnPaint两次绘制之间有空档。自绘控件如果没开双缓冲就会看到闪烁。解决在自定义控件的构造函数里加this.SetStyle(ControlStyles.AllPaintingInWmPaint | ControlStyles.OptimizedDoubleBuffer | ControlStyles.UserPaint, true);。三个标志位分别表示“不擦除背景直接画”“双缓冲”“自己处理绘制”。窗体本身也要设DoubleBuffered true。4.2 圆角边缘有黑边或锯齿现象圆角矩形画出来边缘发毛放大看有黑色像素点。原因Graphics默认的SmoothingMode是None画弧线时没有抗锯齿。另外GraphicsPath闭合时如果坐标算错会留下 1 像素的缝隙。解决绘制前设g.SmoothingMode SmoothingMode.AntiAlias;和g.PixelOffsetMode PixelOffsetMode.HighQuality;。CreateRoundRect里AddArc的矩形参数要确保宽高等于2 * radius否则弧线接不上。4.3 异步验证后窗体已关闭导致异常现象用户点了登录后马上点关闭按钮等异步验证返回时this.Close()报“对象已释放”。原因await之后的代码在 UI 线程继续执行但此时窗体已经被Dispose了。解决在await之后加if (this.IsDisposed) return;判断。更稳妥的做法是用CancellationTokenSource窗体关闭时取消异步任务。4.4 高 DPI 下控件错位现象在 125% 或 150% 缩放的屏幕上输入框和按钮的位置偏了文字被截断。原因WinForm 默认的AutoScaleMode是Font但自绘控件的尺寸计算用的是固定像素值。解决把窗体的AutoScaleMode改成Dpi并在app.manifest里声明 DPI 感知。自绘控件里用Graphics.DpiX / 96f作为缩放系数所有尺寸乘以这个系数。4.5 资源图片路径错误导致设计器报错现象在 Visual Studio 里打开LoginForm.Designer.cs时提示“找不到 Resources 中的图片”但编译能过。原因Resources.resx里的图片是链接到外部文件的换电脑后路径变了。解决把图片直接嵌入.resx文件用“添加资源”而不是“添加现有文件”或者把图片放到项目根目录的Images文件夹里用相对路径引用。源码包里已经嵌入了如果你替换自己的 Logo记得重新生成Resources.Designer.cs。5. 二次开发换皮、接后端、加验证码的实操思路拿到这套源码后最常改的三个方向是换配色、接真实后端、加验证码。换配色最简单LoginForm.cs顶部有一组private Color _themeColor Color.FromArgb(64, 158, 255);这样的常量全局搜索替换即可。背景图在Resources.resx里叫login_bg换成自己的图片后重新生成资源文件。注意背景图尺寸建议 1920×1080 以内太大启动会慢。接后端的时候把ValidateHelper.CheckLogin里的模拟逻辑换成HttpClient调用。我一般会单独建一个ApiClient类把 base URL 和超时时间做成配置项别硬编码在窗体里。返回结果用JsonSerializer.DeserializeLoginResponse解析LoginResponse里至少包含Code、Message、Token三个字段。Token 存到Properties.Settings.Default里主窗体启动时读出来塞进后续请求的 Header。加验证码的话在登录按钮上方放一个PictureBox点击时调后端接口拿 Base64 图片或者本地用Graphics画一个四位随机字符。本地画的话注意字符要旋转和扭曲不然容易被 OCR 识别。代码大概长这样// 本地生成简单验证码 private string GenerateCaptcha(int length 4) { const string chars ABCDEFGHJKLMNPQRSTUVWXYZ23456789; // 去掉易混淆的 I/O/0/1 Random rand new Random(); string code new string(Enumerable.Repeat(chars, length) .Select(s s[rand.Next(s.Length)]).ToArray()); using (Bitmap bmp new Bitmap(100, 36)) using (Graphics g Graphics.FromImage(bmp)) { g.Clear(Color.White); g.SmoothingMode SmoothingMode.AntiAlias; for (int i 0; i code.Length; i) { // 每个字符随机旋转 -15 到 15 度 float angle rand.Next(-15, 15); g.TranslateTransform(20 i * 20, 18); g.RotateTransform(angle); g.DrawString(code[i].ToString(), new Font(Arial, 16, FontStyle.Bold), Brushes.Black, -8, -12); g.ResetTransform(); } // 加几条干扰线 for (int i 0; i 5; i) { g.DrawLine(new Pen(Color.LightGray), rand.Next(100), rand.Next(36), rand.Next(100), rand.Next(36)); } } picCaptcha.Image bmp; // 假设控件叫 picCaptcha return code; }这段代码每次调用都会刷新picCaptcha的图片并返回验证码字符串你把它存到窗体级变量里登录时和用户输入比对即可。注意Bitmap和Graphics都要用using包住不然频繁刷新会内存泄漏。还有一个容易忽略的点登录成功后主窗体的启动方式。源码里用的是DialogResult.OK模式这在单次登录场景下没问题但如果你要做“记住密码”或“自动登录”建议把登录逻辑抽到一个AuthService类里Program.cs里先调AuthService.TryAutoLogin()成功就直接Application.Run(new MainForm())失败再弹登录窗口。这样逻辑更清晰也方便写单元测试。从那以后我每次拿到一套 UI 源码都强制先跑一遍高 DPI 缩放测试和快速点击测试这两个场景能暴露八成以上的自绘控件问题。希望帮到你。本文还有配套的精品资源点击获取
Python元组)
