浅谈Winform控件开发(一):使用GDI+美化基础窗口

2023-06-08,,

写在前面:

本系列随笔将作为我对于winform控件开发的心得总结,方便对一些读者在GDI+、winform等技术方面进行一个入门级的讲解,抛砖引玉。
别问为什么不用WPF,为什么不用QT。问就是懒,不想学。
本项目所有代码均开源在https://github.com/muxiang/PowerControl
效果预览:(gif,3.4MB)

本系列第一篇内容将仅包含对于Winform基础窗口也就是System.Windows.Forms.Form的美化,后续将对一些常用控件如Button、ComboBox、CheckBox、TextBox等进行修改,并提供一些其他如Loading遮罩层等常见控件。
对于基础窗口的美化,首要的任务就是先把基础标题栏干掉。这个过程中会涉及一些Windows消息机制。
首先,我们新建一个类XForm,派生自System.Windows.Forms.Form。

1 /// <summary>
2 /// 表示组成应用程序的用户界面的窗口或对话框。
3 /// </summary>
4 [ToolboxItem(false)]
5 public class XForm : Form
6 ...

随后,我们定义一些常量

 1 /// <summary>
2 /// 标题栏高度
3 /// </summary>
4 public const int TitleBarHeight = 30;
5
6 // 边框宽度
7 private const int BorderWidth = 4;
8 // 标题栏图标大小
9 private const int IconSize = 16;
10 // 标题栏按钮大小
11 private const int ButtonWidth = 30;
12 private const int ButtonHeight = 30;

覆盖基类属性FormBorderStyle使base.FormBorderStyle保持None,覆盖基类属性Padding返回或设置正确的内边距

 1 /// <summary>
2 /// 获取或设置窗体的边框样式。
3 /// </summary>
4 [Browsable(true)]
5 [Category("Appearance")]
6 [Description("获取或设置窗体的边框样式。")]
7 [DefaultValue(FormBorderStyle.Sizable)]
8 public new FormBorderStyle FormBorderStyle
9 {
10 get => _formBorderStyle;
11 set
12 {
13 _formBorderStyle = value;
14 UpdateStyles();
15 DrawTitleBar();
16 }
17 }
18
19 /// <summary>
20 /// 获取或设置窗体的内边距。
21 /// </summary>
22 [Browsable(true)]
23 [Category("Appearance")]
24 [Description("获取或设置窗体的内边距。")]
25 public new Padding Padding
26 {
27 get => new Padding(base.Padding.Left, base.Padding.Top, base.Padding.Right, base.Padding.Bottom - TitleBarHeight);
28 set => base.Padding = new Padding(value.Left, value.Top, value.Right, value.Bottom + TitleBarHeight);
29 }

※最后一步也是最关键的一步:重新定义窗口客户区边界。重写WndProc并处理WM_NCCALCSIZE消息。

 1 protected override void WndProc(ref Message m)
2 {
3 switch (m.Msg)
4 {
5 case WM_NCCALCSIZE:
6 {
7 // 自定义客户区
8 if (m.WParam != IntPtr.Zero && _formBorderStyle != FormBorderStyle.None)
9 {
10 NCCALCSIZE_PARAMS @params = (NCCALCSIZE_PARAMS)
11 Marshal.PtrToStructure(m.LParam, typeof(NCCALCSIZE_PARAMS));
12 @params.rgrc[0].Top += TitleBarHeight;
13 @params.rgrc[0].Bottom += TitleBarHeight;
14 Marshal.StructureToPtr(@params, m.LParam, false);
15 m.Result = (IntPtr)(WVR_ALIGNTOP | WVR_ALIGNBOTTOM | WVR_REDRAW);
16 }
17
18 base.WndProc(ref m);
19 break;
20 }
21 ……

相关常量以及P/Invoke相关方法已在我的库中定义,详见MSDN,也可从http://pinvoke.net/查询。

同样在WndProc中处理WM_NCPAINT消息

1 case WM_NCPAINT:
2 {
3 DrawTitleBar();
4 m.Result = (IntPtr)1;
5 break;
6 }

DrawTitleBar()方法定义如下:

 1 /// <summary>
2 /// 绘制标题栏
3 /// </summary>
4 private void DrawTitleBar()
5 {
6 if (_formBorderStyle == FormBorderStyle.None)
7 return;
8
9 DrawTitleBackgroundTextIcon();
10 CreateButtonImages();
11 DrawTitleButtons();
12 }

首先使用线性渐变画刷绘制标题栏背景、图标、标题文字:

 1 /// <summary>
2 /// 绘制标题栏背景、文字、图标
3 /// </summary>
4 private void DrawTitleBackgroundTextIcon()
5 {
6 IntPtr hdc = GetWindowDC(Handle);
7 Graphics g = Graphics.FromHdc(hdc);
8
9 // 标题栏背景
10 using (Brush brsTitleBar = new LinearGradientBrush(TitleBarRectangle,
11 _titleBarStartColor, _titleBarEndColor, LinearGradientMode.Horizontal))
12 g.FillRectangle(brsTitleBar, TitleBarRectangle);
13
14 // 标题栏图标
15 if (ShowIcon)
16 g.DrawIcon(Icon, new Rectangle(
17 BorderWidth, TitleBarRectangle.Top + (TitleBarRectangle.Height - IconSize) / 2,
18 IconSize, IconSize));
19
20 // 标题文本
21 const int txtX = BorderWidth + IconSize;
22 SizeF szText = g.MeasureString(Text, SystemFonts.CaptionFont, Width, StringFormat.GenericDefault);
23 using Brush brsText = new SolidBrush(_titleBarForeColor);
24 g.DrawString(Text,
25 SystemFonts.CaptionFont,
26 brsText,
27 new RectangleF(txtX,
28 TitleBarRectangle.Top + (TitleBarRectangle.Bottom - szText.Height) / 2,
29 Width - BorderWidth * 2,
30 TitleBarHeight),
31 StringFormat.GenericDefault);
32
33 g.Dispose();
34 ReleaseDC(Handle, hdc);
35 }

随后绘制标题栏按钮,犹豫篇幅限制,在此不多赘述,详见源码中CreateButtonImages()与DrawTitleButtons()。

至此,表面工作基本做完了,但这个窗口还不像个窗口,因为最小化、最大化、关闭以及调整窗口大小都不好用。

为什么?因为还有很多工作要做,首先,同样在WndProc中处理WM_NCHITTEST消息,通过m.Result指定当前鼠标位置位于标题栏、最小化按钮、最大化按钮、关闭按钮或上下左右边框

 1 case WM_NCHITTEST:
2 {
3 base.WndProc(ref m);
4
5 Point pt = PointToClient(new Point((int)m.LParam & 0xFFFF, (int)m.LParam >> 16 & 0xFFFF));
6
7 _userSizedOrMoved = true;
8
9 switch (_formBorderStyle)
10 {
11 case FormBorderStyle.None:
12 break;
13 case FormBorderStyle.FixedSingle:
14 case FormBorderStyle.Fixed3D:
15 case FormBorderStyle.FixedDialog:
16 case FormBorderStyle.FixedToolWindow:
17 if (pt.Y < 0)
18 {
19 _userSizedOrMoved = false;
20 m.Result = (IntPtr)HTCAPTION;
21 }
22
23 if (CorrectToLogical(CloseButtonRectangle).Contains(pt))
24 m.Result = (IntPtr)HTCLOSE;
25 if (CorrectToLogical(MaximizeButtonRectangle).Contains(pt))
26 m.Result = (IntPtr)HTMAXBUTTON;
27 if (CorrectToLogical(MinimizeButtonRectangle).Contains(pt))
28 m.Result = (IntPtr)HTMINBUTTON;
29
30 break;
31 case FormBorderStyle.Sizable:
32 case FormBorderStyle.SizableToolWindow:
33 if (pt.Y < 0)
34 {
35 _userSizedOrMoved = false;
36 m.Result = (IntPtr)HTCAPTION;
37 }
38
39 if (CorrectToLogical(CloseButtonRectangle).Contains(pt))
40 m.Result = (IntPtr)HTCLOSE;
41 if (CorrectToLogical(MaximizeButtonRectangle).Contains(pt))
42 m.Result = (IntPtr)HTMAXBUTTON;
43 if (CorrectToLogical(MinimizeButtonRectangle).Contains(pt))
44 m.Result = (IntPtr)HTMINBUTTON;
45
46 if (WindowState == FormWindowState.Maximized)
47 break;
48
49 bool bTop = pt.Y <= -TitleBarHeight + BorderWidth;
50 bool bBottom = pt.Y >= Height - TitleBarHeight - BorderWidth;
51 bool bLeft = pt.X <= BorderWidth;
52 bool bRight = pt.X >= Width - BorderWidth;
53
54 if (bLeft)
55 {
56 _userSizedOrMoved = true;
57 if (bTop)
58 m.Result = (IntPtr)HTTOPLEFT;
59 else if (bBottom)
60 m.Result = (IntPtr)HTBOTTOMLEFT;
61 else
62 m.Result = (IntPtr)HTLEFT;
63 }
64 else if (bRight)
65 {
66 _userSizedOrMoved = true;
67 if (bTop)
68 m.Result = (IntPtr)HTTOPRIGHT;
69 else if (bBottom)
70 m.Result = (IntPtr)HTBOTTOMRIGHT;
71 else
72 m.Result = (IntPtr)HTRIGHT;
73 }
74 else if (bTop)
75 {
76 _userSizedOrMoved = true;
77 m.Result = (IntPtr)HTTOP;
78 }
79 else if (bBottom)
80 {
81 _userSizedOrMoved = true;
82 m.Result = (IntPtr)HTBOTTOM;
83 }
84 break;
85 default:
86 throw new ArgumentOutOfRangeException();
87 }
88 break;
89 }

随后以同样的方式处理WM_NCLBUTTONDBLCLK、WM_NCLBUTTONDOWN、WM_NCLBUTTONUP、WM_NCMOUSEMOVE等消息,进行标题栏按钮等元素重绘,不多赘述。

现在窗口进行正常的单击、双击、调整尺寸,我们在最后为窗口添加阴影

首先定义一个可以承载32位位图的分层窗口(Layered Window)来负责主窗口阴影的呈现,详见源码中XFormShadow类,此处仅列出用于创建分层窗口的核心代码:

 1 private void UpdateBmp(Bitmap bmp)
2 {
3 if (!IsHandleCreated) return;
4
5 if (!Image.IsCanonicalPixelFormat(bmp.PixelFormat) || !Image.IsAlphaPixelFormat(bmp.PixelFormat))
6 throw new ArgumentException(@"位图格式不正确", nameof(bmp));
7
8 IntPtr oldBits = IntPtr.Zero;
9 IntPtr screenDC = GetDC(IntPtr.Zero);
10 IntPtr hBmp = IntPtr.Zero;
11 IntPtr memDc = CreateCompatibleDC(screenDC);
12
13 try
14 {
15 POINT formLocation = new POINT(Left, Top);
16 SIZE bitmapSize = new SIZE(bmp.Width, bmp.Height);
17 BLENDFUNCTION blendFunc = new BLENDFUNCTION(
18 AC_SRC_OVER,
19 0,
20 255,
21 AC_SRC_ALPHA);
22
23 POINT srcLoc = new POINT(0, 0);
24
25 hBmp = bmp.GetHbitmap(Color.FromArgb(0));
26 oldBits = SelectObject(memDc, hBmp);
27
28 UpdateLayeredWindow(
29 Handle,
30 screenDC,
31 ref formLocation,
32 ref bitmapSize,
33 memDc,
34 ref srcLoc,
35 0,
36 ref blendFunc,
37 ULW_ALPHA);
38 }
39 finally
40 {
41 if (hBmp != IntPtr.Zero)
42 {
43 SelectObject(memDc, oldBits);
44 DeleteObject(hBmp);
45 }
46
47 ReleaseDC(IntPtr.Zero, screenDC);
48 DeleteDC(memDc);
49 }
50 }

最后通过路径渐变画刷创建阴影位图,通过位图构建分层窗口,并与主窗口建立父子关系:

 1 /// <summary>
2 /// 构建阴影
3 /// </summary>
4 private void BuildShadow()
5 {
6 lock (this)
7 {
8 _buildingShadow = true;
9
10 if (_shadow != null && !_shadow.IsDisposed && !_shadow.Disposing)
11 {
12 // 解除父子窗口关系
13 SetWindowLong(
14 Handle,
15 GWL_HWNDPARENT,
16 0);
17
18 _shadow.Dispose();
19 }
20
21 Bitmap bmpBackground = new Bitmap(Width + BorderWidth * 4, Height + BorderWidth * 4);
22
23 GraphicsPath gp = new GraphicsPath();
24 gp.AddRectangle(new Rectangle(0, 0, bmpBackground.Width, bmpBackground.Height));
25
26 using (Graphics g = Graphics.FromImage(bmpBackground))
27 using (PathGradientBrush brs = new PathGradientBrush(gp))
28 {
29 g.CompositingMode = CompositingMode.SourceCopy;
30 g.InterpolationMode = InterpolationMode.HighQualityBicubic;
31 g.PixelOffsetMode = PixelOffsetMode.HighQuality;
32 g.SmoothingMode = SmoothingMode.AntiAlias;
33
34 // 中心颜色
35 brs.CenterColor = Color.FromArgb(100, Color.Black);
36 // 指定从实际阴影边界到窗口边框边界的渐变
37 brs.FocusScales = new PointF(1 - BorderWidth * 4F / Width, 1 - BorderWidth * 4F / Height);
38 // 边框环绕颜色
39 brs.SurroundColors = new[] { Color.FromArgb(0, 0, 0, 0) };
40 // 掏空窗口实际区域
41 gp.AddRectangle(new Rectangle(BorderWidth * 2, BorderWidth * 2, Width, Height));
42 g.FillPath(brs, gp);
43 }
44
45 gp.Dispose();
46
47 _shadow = new XFormShadow(bmpBackground);
48
49 _buildingShadow = false;
50
51 AlignShadow();
52 _shadow.Show();
53
54 // 设置父子窗口关系
55 SetWindowLong(
56 Handle,
57 GWL_HWNDPARENT,
58 _shadow.Handle.ToInt32());
59
60 Activate();
61 }//end of lock(this)
62 }

感谢大家能读到这里,代码中如有错误,或存在其它建议,欢迎在评论区或Github指正。

如果觉得本文对你有帮助,还请点个推荐或Github上点个星星,谢谢大家。

转载请注明原作者,谢谢。

浅谈Winform控件开发(一):使用GDI+美化基础窗口的相关教程结束。

《浅谈Winform控件开发(一):使用GDI+美化基础窗口.doc》

下载本文的Word格式文档,以方便收藏与打印。