CorePlex开发手记：一、Winform窗体皮肤及简单换肤机制

前言: CorePlex代码库作为一个Visual Studio插件, 允许用户通过VS直接访问在线代码库。开发过程中我翻阅了很多网上的资料，也总结了一些技术要点，现写成系列文章，以飨读者。同时，里面某些技术也是我第一次使用，如有不对的地方，还请行家狠拍，欢迎大家指正~

闲话休絮，进入正题。从本篇文章开始，介绍 CorePlex 的窗体皮肤机制,以及简单的换肤功能。我们先来看看效果：

换一个皮肤看看：

需要实现的是圆角窗体+四周的阴影，要实现这个，大致的思路是这样的：先使用 Graphics 绘制一个 Bitmap，将需要的皮肤绘制成一个内存图，然后使用 Win32的API：UpdateLayeredWindow 将这个构造好的 Bitmap 绘制/更新到窗体上。我们来看看具体的实现吧。

第一部分，构造皮肤背景。

为了实现圆角以及四周的阴影，我将窗体背景划分成了九宫格的形式：

主要思路是：除 5 之外的其他部分，都作为窗体的边框和圆角来处理。而5这个部分，则作为圆角窗体的主体背景部分。1、3、7、9四个部分，作为圆角，我使用 PathGradientBrush 来绘制扇形渐变，而2、4、6、8四个部分，作为边框，我使用 LinearGradientBrush 来绘制线性渐变。

不多说，见代码：

/// <summary>/// 绘制四角的阴影/// </summary>/// <param name="g"></param>/// <param name="corSize">圆角区域正方形的大小</param>/// <returns></returns>private void DrawCorners(Graphics g, Size corSize){/** 四个角，每个角都是一个扇面* 画图时扇面由外弧、内弧以及两段的连接线构成图形* 然后在内弧中间附近向外做渐变** 阴影分为9宫格，5为内部背景图部分*  1   2   3*  4   5   6*  7   8   9*/Action<int> DrawCorenerN = (n) =>{using (GraphicsPath gp = new GraphicsPath()){// 扇面外沿、内沿曲线的尺寸Size sizeOutSide = new Size(corSize.Width * 2, corSize.Height * 2);Size sizeInSide = new Size(this.SkinOptions.CornerRadius * 2, this.SkinOptions.CornerRadius * 2);// 扇面外沿、内沿曲线的位置Point locationOutSide, locationInSide;// 当圆角半径小于MinCornerRadius时，内沿不绘制曲线，而以线段绘制近似值。该线段绘制方向是从p1指向p2。Point p1, p2;// 渐变起点位置PointF brushCenter;// 扇面起始角度float startAngle;// 根据四个方位不同，确定扇面的位置、角度及渐变起点位置switch (n){case 1:locationOutSide = new Point(0, 0);startAngle = 180;brushCenter = new PointF((float)sizeOutSide.Width - sizeInSide.Width * 0.5f,(float)sizeOutSide.Height - sizeInSide.Height * 0.5f);p1 = new Point(corSize.Width, this.SkinOptions.ShadowWidth);p2 = new Point(this.SkinOptions.ShadowWidth, corSize.Height);break;case 3:locationOutSide = new Point(this.Width - sizeOutSide.Width, 0);startAngle = 270;brushCenter = new PointF((float)locationOutSide.X + sizeInSide.Width * 0.5f,(float)sizeOutSide.Height - sizeInSide.Height * 0.5f);p1 = new Point(this.Width - this.SkinOptions.ShadowWidth, corSize.Height);p2 = new Point(this.Width - corSize.Width, this.SkinOptions.ShadowWidth);break;case 7:locationOutSide = new Point(0, this.Height - sizeOutSide.Height);startAngle = 90;brushCenter = new PointF((float)sizeOutSide.Width - sizeInSide.Width * 0.5f,(float)locationOutSide.Y + sizeInSide.Height * 0.5f);p1 = new Point(this.SkinOptions.ShadowWidth, this.Height - corSize.Height);p2 = new Point(corSize.Width, this.Height - this.SkinOptions.ShadowWidth);break;default:locationOutSide = new Point(this.Width - sizeOutSide.Width, this.Height - sizeOutSide.Height);startAngle = 0;brushCenter = new PointF((float)locationOutSide.X + sizeInSide.Width * 0.5f,(float)locationOutSide.Y + sizeInSide.Height * 0.5f);p1 = new Point(this.Width - corSize.Width, this.Height - this.SkinOptions.ShadowWidth);p2 = new Point(this.Width - this.SkinOptions.ShadowWidth, this.Height - corSize.Height);break;}// 扇面外沿曲线Rectangle recOutSide = new Rectangle(locationOutSide, sizeOutSide);// 扇面内沿曲线的位置locationInSide = new Point(locationOutSide.X + (sizeOutSide.Width - sizeInSide.Width) / 2,locationOutSide.Y + (sizeOutSide.Height - sizeInSide.Height) / 2);// 扇面内沿曲线Rectangle recInSide = new Rectangle(locationInSide, sizeInSide);// 将扇面添加到形状，以备绘制gp.AddArc(recOutSide, startAngle, 91);if (this.SkinOptions.CornerRadius > MinCornerRadius)gp.AddArc(recInSide, startAngle + 90, -91);elsegp.AddLine(p1, p2);// 使用渐变笔刷using (PathGradientBrush shadowBrush = new PathGradientBrush(gp)){Color[] colors = new Color[2];float[] positions = new float[2];ColorBlend sBlend = new ColorBlend();// 扇面外沿色colors[0] = this.SkinOptions.CornerColor[1];// 扇面内沿色colors[1] = this.SkinOptions.CornerColor[0];positions[0] = 0.0f;positions[1] = 1.0f;sBlend.Colors = colors;sBlend.Positions = positions;shadowBrush.InterpolationColors = sBlend;// 上色中心点shadowBrush.CenterPoint = brushCenter;g.FillPath(shadowBrush, gp);}}};DrawCorenerN(1);DrawCorenerN(3);DrawCorenerN(7);DrawCorenerN(9);}/// <summary>/// 绘制上下左右四边的阴影/// </summary>/// <param name="g"></param>/// <param name="corSize"></param>/// <param name="gradientSize_LR"></param>/// <param name="gradientSize_TB"></param>private void DrawLines(Graphics g, Size corSize, Size gradientSize_LR, Size gradientSize_TB){Rectangle rect2 = new Rectangle(new Point(corSize.Width, 0), gradientSize_TB);Rectangle rect4 = new Rectangle(new Point(0, corSize.Width), gradientSize_LR);Rectangle rect6 = new Rectangle(new Point(this.Size.Width - this.SkinOptions.ShadowWidth, corSize.Width), gradientSize_LR);Rectangle rect8 = new Rectangle(new Point(corSize.Width, this.Size.Height - this.SkinOptions.ShadowWidth), gradientSize_TB);using (LinearGradientBrush brush2 = new LinearGradientBrush(rect2, this.SkinOptions.ShadowColor[1], 
                      this.SkinOptions.ShadowColor[0], LinearGradientMode.Vertical),brush4 = new LinearGradientBrush(rect4, this.SkinOptions.ShadowColor[1], 
                      this.SkinOptions.ShadowColor[0], LinearGradientMode.Horizontal),brush6 = new LinearGradientBrush(rect6, this.SkinOptions.ShadowColor[0], 
                      this.SkinOptions.ShadowColor[1], LinearGradientMode.Horizontal),brush8 = new LinearGradientBrush(rect8, this.SkinOptions.ShadowColor[0], 
                      this.SkinOptions.ShadowColor[1], LinearGradientMode.Vertical)){g.FillRectangle(brush2, rect2);g.FillRectangle(brush4, rect4);g.FillRectangle(brush6, rect6);g.FillRectangle(brush8, rect8);}}好，到此为止，四周的圆角和渐变边框算是模拟出来了，然后就是将 5号为止的主背景绘制上去，以及添加一些高光、暗部等线条，突出质感：

/// <summary>/// 绘制主背景图/// </summary>/// <param name="g"></param>private void DrawMain(Graphics g){// 要显示的区域图像的大小Rectangle destRect = new Rectangle(0, 0, 
                             this.Width - this.SkinOptions.ShadowWidth * 2 + 1, 
                             this.Height - this.SkinOptions.ShadowWidth * 2 + 1);// 建立一个临时的 bitmap，用于存放被圆角化的图像using (Bitmap corBg = new Bitmap(destRect.Width, destRect.Height)){using (Graphics corG = Graphics.FromImage(corBg)){corG.SmoothingMode = SmoothingMode.HighQuality;// 创建圆角区域using (GraphicsPath gp = CreateRoundRect(destRect, this.SkinOptions.CornerRadius)){Region re = new System.Drawing.Region(gp);// 设置画布区域为圆角区域corG.IntersectClip(re);Pen p = new Pen(this.SkinOptions.BorderColor);p.Width = this.SkinOptions.BorderWidth;p.Alignment = PenAlignment.Inset;switch (this.SkinOptions.BackgroundLayout){case ImageLayout.Center:{// 创建源图上的截取区域Rectangle srcRect = new Rectangle(new Point(0, 0), this.SkinOptions.BackgroundImage.Size);// 绘制背景图corG.DrawImage(this.SkinOptions.BackgroundImage, 
                                       (this.Width - this.SkinOptions.BackgroundImage.Width) / 2, 
                                       (this.Height - this.SkinOptions.BackgroundImage.Height) / 2, 
                                       srcRect, GraphicsUnit.Pixel);}break;case ImageLayout.Stretch:{// 创建源图上的截取区域Rectangle srcRect = new Rectangle(new Point(0, 0), this.SkinOptions.BackgroundImage.Size);// 绘制背景图corG.DrawImage(this.SkinOptions.BackgroundImage, p.Width, p.Width, srcRect, GraphicsUnit.Pixel);}break;case ImageLayout.Tile:{// 创建源图上的截取区域TextureBrush tb = new TextureBrush(this.SkinOptions.BackgroundImage);corG.FillRectangle(tb, destRect);}break;case ImageLayout.Zoom:{// 创′建¨源′图?上?的?截?取?区?域òRectangle srcRect = new Rectangle(new Point(0, 0), this.SkinOptions.BackgroundImage.Size);// 绘制背景图corG.DrawImage(this.SkinOptions.BackgroundImage, 
                                       (this.Width - this.SkinOptions.BackgroundImage.Width) / 2, 
                                       (this.Height - this.SkinOptions.BackgroundImage.Height) / 2, 
                                       srcRect, GraphicsUnit.Pixel);}break;case ImageLayout.None:default:corG.DrawImage(this.SkinOptions.BackgroundImage, p.Width, p.Width);break;}// 构造外边框Rectangle borderOut = new Rectangle(0, 0, destRect.Width - 1, destRect.Height - 1);// 绘制外边框corG.DrawPath(p, CreateRoundRect(borderOut, this.SkinOptions.CornerRadius));// 构造内边框Rectangle borderIn = new Rectangle(1, 1, borderOut.Width - 2, borderOut.Height - 2);using (LinearGradientBrush b = new LinearGradientBrush(borderIn, 
                                       this.SkinOptions.BorderHighlightColor[0], 
                                       this.SkinOptions.BorderHighlightColor[1], 
                                       this.SkinOptions.BorderHighlightAngle)){// 绘制内边框高光using (Pen lightPen = new Pen(b)){// 绘制内边框corG.DrawPath(lightPen, CreateRoundRect(borderIn, this.SkinOptions.CornerRadius));}}// 将圆角图绘制到主画布g.DrawImage(corBg, this.SkinOptions.ShadowWidth, this.SkinOptions.ShadowWidth);#region 绘制Logousing (Bitmap logo = Resources.Default.formlogo){Rectangle paintTo = new Rectangle(25, 20, logo.Width, logo.Height);Rectangle sourceRec = new Rectangle(0, 0, logo.Width, logo.Height);g.DrawImage(logo, paintTo, sourceRec, GraphicsUnit.Pixel);}#endregion#region 绘制控制按钮using (Bitmap cb = Resources.Default.controlboxes){Rectangle paintTo = new Rectangle(this.Width - this.SkinOptions.ShadowWidth - cb.Width + 3, 
                                            this.SkinOptions.ShadowWidth - 1, cb.Width, ControlBoxHeight);Rectangle sourceRec = new Rectangle(0, this._currentControlBoxImgY, cb.Width, ControlBoxHeight);g.DrawImage(cb, paintTo, sourceRec, GraphicsUnit.Pixel);}#endregion}}}}

/// <summary>/// 构造圆角路径/// </summary>/// <param name="rect"></param>/// <param name="radius"></param>/// <returns></returns>private GraphicsPath CreateRoundRect(Rectangle rect, int radius){GraphicsPath gp = new GraphicsPath();int x = rect.X;int y = rect.Y;int width = rect.Width;int height = rect.Height;if (width > 0 && height > 0){// 半径大才做圆角if (radius > MinCornerRadius){radius = Math.Min(radius, height / 2 - 1);radius = Math.Min(radius, width / 2 - 1);gp.AddArc(x + width - (radius * 2), y, radius * 2, radius * 2, 270, 90);gp.AddLine(x + width, y + radius, x + width, y + height - (radius * 2));gp.AddArc(x + width - (radius * 2), y + height - (radius * 2), radius * 2, radius * 2, 0, 90);gp.AddLine(x + width - (radius * 2), y + height, x + radius, y + height);gp.AddArc(x, y + height - (radius * 2), radius * 2, radius * 2, 90, 90);gp.AddLine(x, y + height - (radius * 2), x, y + radius);gp.AddArc(x, y, radius * 2, radius * 2, 180, 90);}else{gp.AddLine(x + width - radius, y, x + width, y + radius);gp.AddLine(x + width, y + radius, x + width, y + height - radius);gp.AddLine(x + width, y + height - radius, x + width - radius, y + height);gp.AddLine(x + width - radius, y + height, x + radius, y + height);gp.AddLine(x + radius, y + height, x, y + height - radius);gp.AddLine(x, y + height - radius, x, y + radius);gp.AddLine(x, y + radius, x + radius, y);}gp.CloseFigure();}return gp;}
好了，带圆角、渐变阴影的窗体背景算是构造好了，但它现在仅仅是一张内存里的 bitmap 图片，我们要如何才能将它显示到窗体上呢？

第二部分：使用 Win32的API将 bitmap 更新到窗体

这个操作使用 UpdateLayeredWindow 来进行，MSDN上是这样描述的：Updates the position, size, shape, content, and translucency of a layered window.

MSDN：ms-help://MS.MSDNQTR.v90.chs/dv_vclib/html/9035dce1-8560-4ea4-94a8-f6e0ba2b2021.htm

现在我们只是用它来将我们绘制好的内存图Update到一个窗体上。你应该已经注意到MSDN的说明以及这个方法的名字了，单词Window前有一个限定词，Layered。那么我们怎么构造一个Layered的Window呢？或者说，怎么才能使我们的窗体成为Layered的呢？很简单，你可以这样：

protected override CreateParams CreateParams{get{CreateParams cp = base.CreateParams;// 绘制背景必须针对具有 WS_EX_LAYERED 扩展风格的窗体进行if (!this.DesignMode){cp.ExStyle |= Win32.WS_EX_LAYERED; // WS_EX_LAYERED}return cp;}}

好了，我们有一个合适的Window了，下面我们使用 UpdateLayeredWindow 来讲绘制的内存图更新到窗体上：（老实说，这段代码是从网上Copy的，嘿嘿~）

/// <summary>/// 绘制已构造好的位图/// </summary>/// <param name="bitmap"></param>/// <param name="opacity"></param>private void SetBitmap(Bitmap bitmap, byte opacity = 255){if (bitmap.PixelFormat != PixelFormat.Format32bppArgb)throw new Exception("窗体背景图必须是 8 位/通道 RGB 颜色的图。");// The ideia of this is very simple,// 1. Create a compatible DC with screen;// 2. Select the bitmap with 32bpp with alpha-channel in the compatible DC;// 3. Call the UpdateLayeredWindow.IntPtr screenDc = Win32.GetDC(IntPtr.Zero);IntPtr memDc = Win32.CreateCompatibleDC(screenDc);IntPtr hBitmap = IntPtr.Zero;IntPtr oldBitmap = IntPtr.Zero;try{hBitmap = bitmap.GetHbitmap(Color.FromArgb(0));  // grab a GDI handle from this GDI+ bitmapoldBitmap = Win32.SelectObject(memDc, hBitmap);Win32.Size size = new Win32.Size(bitmap.Width, bitmap.Height);Win32.Point pointSource = new Win32.Point(0, 0);Win32.Point topPos = new Win32.Point(Left, Top);Win32.BLENDFUNCTION blend = new Win32.BLENDFUNCTION();blend.BlendOp = Win32.AC_SRC_OVER;blend.BlendFlags = 0;blend.SourceConstantAlpha = opacity;blend.AlphaFormat = Win32.AC_SRC_ALPHA;Win32.UpdateLayeredWindow(Handle, screenDc, ref topPos, ref size, 
                      memDc, ref pointSource, 0, ref blend, Win32.ULW_ALPHA);}finally{Win32.ReleaseDC(IntPtr.Zero, screenDc);if (hBitmap != IntPtr.Zero){Win32.SelectObject(memDc, oldBitmap);Win32.DeleteObject(hBitmap);}Win32.DeleteDC(memDc);}}

OK，到此为止，我们需要的圆角、渐变的阴影，都有了！

第三部分：简单的换肤机制

大家可能已经注意到，上面的代码有一个名为 SkinOptions 的东西。为了实现皮肤参数的统一传递和包装，我实现了 SkinOptions 这个类，用于保存当前皮肤的所有参数信息。

/// <summary>/// 皮肤风格参数/// </summary>public class SkinOptions : ICloneable{/// <summary>/// 四边阴影的宽度。默认为 6。/// </summary>public int ShadowWidth = 6;/// <summary>/// 主背景圆角半径。最小值为 1，默认为 4。/// </summary>public int CornerRadius = 4;/// <summary>/// 界面整体透明度。值范围 0~255。/// </summary>public byte Opacity = 255;/// <summary>/// 边框宽度。默认为 1。/// </summary>public int BorderWidth = 1;/// <summary>/// 边框颜色/// </summary>public Color BorderColor = Color.FromArgb(255, 128, 128, 128);/// <summary>/// 四边阴影的颜色。[0]为阴影内沿颜色，[1]为阴影外沿颜色/// </summary>public Color[] ShadowColor = { Color.FromArgb(60, 0, 0, 0), Color.FromArgb(0, 0, 0, 0) };/// <summary>/// 圆角阴影的颜色。[0]为阴影内沿颜色，[1]为阴影外沿颜色。/// 注：一般来讲，圆角阴影内沿的颜色应当比四边阴影内沿的颜色更深，才会有更好的显示效果。此值应当根据您的实际情况而定。/// </summary>/// <remarks>由于给扇面上渐变时，起点并不是准确的扇面内弧，因此扇面的内沿颜色可能应比四边的内沿颜色深</remarks>public Color[] CornerColor = { Color.FromArgb(180, 0, 0, 0), Color.FromArgb(0, 0, 0, 0) };/// <summary>/// 高光颜色。[0]为高光边框左上角点的颜色，[1]为高光边框右下角的颜色/// </summary>public Color[] BorderHighlightColor = { Color.FromArgb(200, 255, 255, 255), Color.FromArgb(200, 255, 255, 255) };/// <summary>/// 高光过渡照射的角度。默认为“左下角到右上角对角线”的法线方向。/// </summary>public float BorderHighlightAngle = 45f;/// <summary>/// 背景高光。[0]为上下两端的颜色，[1]为中间高光的颜色/// </summary>public Color[] BackgroundHighlightColor = { Color.FromArgb(0, 255, 255, 255), Color.FromArgb(200, 255, 255, 255) };/// <summary>/// 窗体背景图/// </summary>public Image BackgroundImage{get{if (bgImg == null){Bitmap defaultBmp = new Bitmap(200, 100);using (Graphics g = Graphics.FromImage(defaultBmp)){g.FillRectangle(SystemBrushes.Control, 0, 0, 200, 100);g.DrawString("未设置背景图", new Font(new FontFamily("宋体"), 9), SystemBrushes.GrayText, 50, 45);bgImg = defaultBmp;}this.BackgroundLayout = ImageLayout.Tile;}return bgImg;}set{//if (null == value) throw new Exception("窗体背景图不能为 null 值。");bgImg = value;}}private Image bgImg;/// <summary>/// 窗体背景图的显示方式/// </summary>public ImageLayout BackgroundLayout = ImageLayout.None;public static SkinOptions NewOne{get{return new SkinOptions();}}#region ICloneable 成员public object Clone(){SkinOptions result = SkinOptions.NewOne;result.BackgroundImage = (Image)this.BackgroundImage.Clone();result.BackgroundLayout = this.BackgroundLayout;result.BorderColor = this.BorderColor;result.BorderWidth = this.BorderWidth;result.CornerColor = (Color[])this.CornerColor.Clone();result.CornerRadius = this.CornerRadius;result.BorderHighlightAngle = this.BorderHighlightAngle;result.BorderHighlightColor = (Color[])this.BorderHighlightColor.Clone();result.BackgroundHighlightColor = (Color[])this.BackgroundHighlightColor.Clone();result.Opacity = this.Opacity;result.ShadowColor = (Color[])this.ShadowColor.Clone();result.ShadowWidth = this.ShadowWidth;return result;}#endregion}有了这个类，我就可以很简单地通过切换这个类的实例，从而达到换肤的目的：

/// <summary>/// 应用新的皮肤风格（淡入淡出）/// </summary>/// <param name="newSkin">新皮肤风格。为 null 则取消皮肤</param>public void ApplySkin(SkinOptions newSkin){if (_isSkinChanging) return;this._isSkinChanging = true;Cursor oldCursor = this.Cursor;this.Cursor = Cursors.WaitCursor;SkinEventArgs e = new SkinEventArgs() {Old = this.SkinOptions == null ? null : (SkinOptions)this.SkinOptions.Clone(),New = newSkin == null ? null : (SkinOptions)newSkin.Clone()};// 触发皮肤切换之前的事件if (OnSkinPreChange != null) { OnSkinPreChange(this, e); }if (newSkin == null) { newSkin = SkinOptions.NewOne; }this.SkinOptions = newSkin;SynchronizationContext context = SynchronizationContext.Current;SendOrPostCallback check = (a) =>{_isSkinChanging = false;this.Cursor = oldCursor;// 触发皮肤切换之后的事件if (OnSkinChanged != null) { OnSkinChanged(this, e); }};// 淡入操作SendOrPostCallback show = (a) =>{byte tmp = 0;byte currentOpacity = newSkin.Opacity;bufferdBackgroundImage = CreateBackground();while (tmp < currentOpacity){SetBitmap(bufferdBackgroundImage, tmp);tmp += 5;Thread.Sleep(5);}new Thread((sc) => { ((SynchronizationContext)sc).Post(check, null); }) { Name = "检查切换操作是否完毕" }.Start(context);};// 淡出操作SendOrPostCallback hide = (a) =>{// 渐变因子byte step = 10;SkinOptions oldSkin = (SkinOptions)this.SkinOptions.Clone();Bitmap oldbg = (Bitmap)bufferdBackgroundImage.Clone();int currentOpacity = oldSkin.Opacity;if (oldbg != null){while (currentOpacity > step){if (currentOpacity - (int)step <= 0) currentOpacity = step;SetBitmap(oldbg, (byte)currentOpacity);currentOpacity -= step;Thread.Sleep(5);}}new Thread((sc) => { ((SynchronizationContext)sc).Post(show, null); }) { Name = "淡入新皮肤" }.Start(context);};new Thread((sc) => { ((SynchronizationContext)sc).Post(hide, null); }) { Name = "淡出旧皮肤" }.Start(context);}private bool _isSkinChanging = false;

OK，到此为止，简单的换肤机制也完成了。

绿色通道：好文要顶关注我收藏该文与我联系

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。