Winform中实现自定义水晶按钮控件(附代码下载)

场景

效果

 

 

注：

博客主页：

关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

新建一个用户控件transparencybutton,修改其代码如下

using system;
using system.collections.generic;
using system.componentmodel;
using system.drawing;
using system.data;
using system.linq;
using system.text;
using system.windows.forms;
using system.drawing.drawing2d;

namespace 自定义水晶按钮控件
{
    public partial class transparencybutton : usercontrol
    {
        public transparencybutton()
        {
            initializecomponent();
        }

        #region 公共变量
        public static smoothingmode sm;
        public static bool pub_buttonclick = true;//判断按钮是否按下（false为按下）
        public static int pub_degree = 0;//记录四角弧度的大小范围
        public static int pub_rgb_r0 = 0x130;//按钮背景的r色值
        public static int pub_rgb_r1 = 0x99;//按钮其它颜色的r色值
        #endregion

        #region 添加属性
        private string bntext = "";
        [browsable(true), category("透明按钮的属性设置"), description("设置显示的文本")]   //在“属性”窗口中显示ntext属性
        public string ntext
        {
            get { return bntext; }
            set
            {
                bntext = value;
                if (bntext.length > 0)
                    invalidate();
            }
        }

        private int bdegree = 1;
        [browsable(true), category("透明按钮的属性设置"), description("设置按钮四个角的弧度")]   //在“属性”窗口中显示degree属性
        public int degree
        {
            get { return bdegree; }
            set
            {
                bdegree = value;
                if (this.width >= this.height)
                    pub_degree = (int)(this.height / 2);
                else
                    pub_degree = (int)(this.width / 2);
                if (bdegree <= 0)
                    bdegree = 1;
                if (bdegree > pub_degree)
                    bdegree = pub_degree;
                if (bdegree > 0)
                    invalidate();
            }
        }

        private color dshinecolor = color.black;
        [browsable(true), category("透明按钮的属性设置"), description("设置按钮的光泽度颜色")]   //在“属性”窗口中显示shinecolor属性
        public color shinecolor
        {
            get { return dshinecolor; }
            set
            {
                dshinecolor = value;
                invalidate();
            }
        }

        private color dundersideshine = color.lightgray;
        [browsable(true), category("透明按钮的属性设置"), description("设置按钮的下部的光泽度")]   //在“属性”窗口中显示undersideshine属性
        public color undersideshine
        {
            get { return dundersideshine; }
            set
            {
                dundersideshine = value;
                invalidate();
            }
        }

        private int dctransparence = 0;
        [browsable(true), category("透明按钮的属性设置"), description("设置按钮的透明度数")]   //在“属性”窗口中显示ctransparence属性
        public int ctransparence
        {
            get { return dctransparence; }
            set
            {
                dctransparence = value;
                if (dctransparence > 20)
                    dctransparence = 20;
                if (dctransparence < 0)
                    dctransparence = 0;
                if (dctransparence >= 0)
                    invalidate();
            }
        }

        private int dcfontdeepness = 1;
        [browsable(true), category("透明按钮的属性设置"), description("设置按钮文本的深度")]   //在“属性”窗口中显示cfontdeepness属性
        public int cfontdeepness
        {
            get { return dcfontdeepness; }
            set
            {
                dcfontdeepness = value;
                if (dcfontdeepness > 20)
                    dcfontdeepness = 20;
                if (dcfontdeepness < 0)
                    dcfontdeepness = 0;
                if (dcfontdeepness >= 0)
                    invalidate();
            }
        }

        #endregion

        #region 事件
        private void transparencybutton_paint(object sender, painteventargs e)
        {
            this.backcolor = color.transparent;//使当前控件透明
            sm = e.graphics.smoothingmode;//设置呈现质量
            color shinecolor = color.black;
            rectangle rect2 = new rectangle(0, 0, this.width, this.height);//设置绘制按钮的矩形区域
            rectangle rect1 = new rectangle(0, this.height / 2, this.width, this.height / 2);//设置绘制按钮下半部的矩形区域
            if (this.ctransparence == 0)//如果按钮的透明度为0
            {
                coboblongdown(rect2, e.graphics);//绘制按扭的背景
                coboblong(rect2, e.graphics, this.shinecolor);//绘制按扭的背景
            }
            else
            {
                if (this.ctransparence > 0)//如果按钮的透明度不为0
                {
                    coboblongdown(rect2, e.graphics);//绘制按扭的背景
                    for (int i = 0; i < ctransparence; i++)
                    {
                        coboblong(rect2, e.graphics, this.shinecolor);//绘制按扭的背景颜色
                    }
                }
            }

            int tem_n = (int)(this.ctransparence / 3);//获取一个值，用于设置下半部按钮的颜色深度
            if (tem_n == 0)//如果为0
                cobajar(rect1, e.graphics, this.shinecolor);//绘制按扭的下半部背景
            else
            {
                if (tem_n > 0)//如果不为0
                {
                    for (int i = 0; i < tem_n; i++)//加深下部按钮的颜色
                    {
                        cobajar(rect1, e.graphics, this.shinecolor);//绘制按扭的下半部背景颜色
                    }
                }
            }
            coboblong(rect2, e.graphics, this.undersideshine);//设置下半部按钮的光泽度
            if (pub_buttonclick == false)//判断按钮是否按下（false为按下）
            {
                coboblongdown(rect2, e.graphics);//绘制按扭的背景
            }
            if (this.ntext.length > 0)//如果text属性中有值
                protracttext(e.graphics);//绘制透明按钮的文本信息
        }

        private void transparencybutton_sizechanged(object sender, eventargs e)
        {
            invalidate();//对控件进行重绘
        }

        private void transparencybutton_mousedown(object sender, mouseeventargs e)
        {
            pub_buttonclick = false;//按下按钮
            invalidate();//对控件进行重绘
        }

        private void transparencybutton_mouseup(object sender, mouseeventargs e)
        {
            pub_buttonclick = true;//松开按钮
            invalidate();//对控件进行重绘
        }
        #endregion

        #region 自定义方法
        /// <summary>
        /// 绘制透明按扭的文本
        /// </summary>
        /// <param g="graphics">封装一个绘图的类对象</param>
        private void protracttext(graphics g)
        {
            graphics titg = this.creategraphics();//创建graphics类对象
            string tits = this.ntext;//获取图表标题的名称
            sizef titsize = titg.measurestring(tits, this.font);//将绘制的字符串进行格式化
            float titwidth = titsize.width;//获取字符串的宽度
            float titheight = titsize.height;//获取字符串的高度
            float titx = 0;//标题的横向坐标
            float tity = 0;//标题的纵向坐标
            if (this.height > titheight)//如果按钮的高度大于文本的高度
                tity = (this.height - titheight) / 2;//使文本水平方向局中
            else
                tity = this.bdegree;//文本置顶
            if (this.width > titwidth)//如果按钮的宽度大于文本的宽度
                titx = (this.width - titwidth) / 2;//使文本水平局中
            else
                titx = this.bdegree;//文本置左
            //设置文本的绘制区域
            rectangle rect = new rectangle((int)math.floor(titx), (int)math.floor(tity), (int)math.ceiling(titwidth), (int)math.ceiling(titheight));
            int opacity = pub_rgb_r1;//设置r色值
            opacity = (int)(.4f * opacity + .5f);//设置渐变值
            for (int i = 0; i < dcfontdeepness; i++)//设置文本的深度
            {
                //设置文本的渐变颜色
                using (lineargradientbrush br = new lineargradientbrush(rect, color.fromargb(opacity, this.forecolor), color.fromargb(opacity, this.forecolor), lineargradientmode.vertical))
                {
                    g.drawstring(tits, this.font, br, new pointf(titx, tity));//绘制带有渐变效果的文本
                }
            }
        }

        /// <summary>
        /// 绘制透明按扭的背景色
        /// </summary>
        /// <param rect="rectangle">绘制按钮的区域</param>
        /// <param g="graphics">封装一个绘图的类对象</param>
        /// <param fillcolor="color">填充的颜色</param>
        private void coboblong(rectangle rect, graphics g, color fillcolor)
        {
            using (graphicspath bh = createcoboblong(rect, this.bdegree))//绘制一个圆角矩形
            {
                int opacity = pub_rgb_r0;//设置按钮的r色值
                opacity = (int)(.4f * opacity + .5f);//设置渐变的变化值
                //设置按钮的渐变颜色
                using (lineargradientbrush br = new lineargradientbrush(rect, color.fromargb(opacity / 5, fillcolor), color.fromargb(opacity, fillcolor), lineargradientmode.vertical))
                {
                    g.fillpath(br, bh);//填充按钮背景
                }
                g.smoothingmode = sm;//设置呈现的质量
            }
        }

        /// <summary>
        /// 绘制透明按扭的下半部背景色
        /// </summary>
        /// <param rect="rectangle">绘制按钮的下半部区域</param>
        /// <param g="graphics">封装一个绘图的类对象</param>
        /// <param fillcolor="color">填充的颜色</param>
        private void cobajar(rectangle rect, graphics g, color fillcolor)
        {
            using (graphicspath bh = createcobajar(rect, this.bdegree))
            {
                int opacity = pub_rgb_r1;
                opacity = (int)(.4f * opacity + .5f);
                using (lineargradientbrush br = new lineargradientbrush(rect, color.fromargb(opacity, fillcolor), color.fromargb(pub_rgb_r1 / 5, fillcolor), lineargradientmode.vertical))
                {
                    g.fillpath(br, bh);//填充按钮背景
                }
                g.smoothingmode = sm;//设置呈现的质量
            }
        }

        /// <summary>
        /// 绘制透明按扭按下时的效果
        /// </summary>
        /// <param rect="rectangle">绘制按钮的区域</param>
        /// <param g="graphics">封装一个绘图的类对象</param>
        private void coboblongdown(rectangle rect, graphics g)
        {
            using (graphicspath bh = createcoboblong(rect, this.bdegree))//按钮的圆角绘制
            {
                int opacity = pub_rgb_r1;//设置按钮的r色值
                color tem_color = color.black;//设置按钮的背景颜色为黑色
                if (pub_buttonclick == true)//如果按钮没有按下
                {
                    opacity = pub_rgb_r0;//设置按钮的r色值
                    tem_color = color.white;//设置按钮的背景颜色为白色
                }
                opacity = (int)(.4f * opacity + .5f);//设置渐变的变化值
                //设置按钮的渐变颜色
                using (lineargradientbrush br = new lineargradientbrush(rect, color.fromargb(opacity + 20, tem_color), color.fromargb(opacity, tem_color), lineargradientmode.vertical))
                {
                    g.fillpath(br, bh);//填充按钮背景
                }
                g.smoothingmode = sm;//设置呈现的质量
            }
        }

        /// <summary>
        /// 按钮的圆角绘制
        /// </summary>
        /// <param rect="rectangle">绘制按钮的区域</param>
        /// <param radius="int">圆角的度数</param>
        private static graphicspath createcoboblong(rectangle rectangle, int radius)
        {
            graphicspath path = new graphicspath();//实例化graphicspath类
            int l = rectangle.left;//获取矩形左上角的x坐标
            int t = rectangle.top;//获取矩形左上角的y坐标
            int w = rectangle.width;//获取矩形的宽度
            int h = rectangle.height;//获取矩形的高度
            path.addarc(l, t, 2 * radius, 2 * radius, 180, 90);//在矩形的左上角绘制圆角
            path.addline(l + radius, t, l + w - radius, t);//绘制左上角圆角与右上角之间的线段
            path.addarc(l + w - 2 * radius, t, 2 * radius, 2 * radius, 270, 90);//绘制右上角的圆角
            path.addline(l + w, t + radius, l + w, t + h - radius);//绘制左上角、右上角和右下角所形成的三角形
            path.addarc(l + w - 2 * radius, t + h - 2 * radius, 2 * radius, 2 * radius, 0, 90);//绘制右下角圆角
            path.addline(l + radius, t + h, l + w - radius, t + h);//绘制右下角圆角与左上角圆之间的线段
            path.addarc(l, t + h - 2 * radius, 2 * radius, 2 * radius, 90, 90);//绘制左下角的圆角
            path.addline(l, t + radius, l, t + h - radius);//绘制左上角、左下角和右下角之间的三角形
            return path;
        }

        /// <summary>
        /// 按钮的下半个圆角绘制
        /// </summary>
        /// <param rect="rectangle">绘制下半部按钮的区域</param>
        /// <param radius="int">圆角的度数</param>
        private static graphicspath createcobajar(rectangle rectangle, int radius)
        {
            graphicspath path = new graphicspath();
            int l = rectangle.left;//获取矩形左上角的x坐标
            int t = rectangle.top;//获取矩形左上角的y坐标
            int w = rectangle.width;//获取矩形的宽度
            int h = rectangle.height;//获取矩形的高度
            path.addarc(l, t, 2 * radius, 2 * radius, 0, 0);//绘制左上角的点
            path.addline(l, t, l + w, t);//绘制左上角与右上角之间的线段
            path.addarc(l + w, t, 2 * radius, 2 * radius, 0, 0);//绘制右上角的点
            path.addline(l + w, t + radius, l + w, t + h - radius);//绘制左上角、右上角和右下角所形成的三角形
            path.addarc(l + w - 2 * radius, t + h - 2 * radius, 2 * radius, 2 * radius, 0, 90);//绘制右下角圆角
            path.addline(l + radius, t + h, l + w - radius, t + h);//绘制右下角圆角与左上角圆之间的线段
            path.addarc(l, t + h - 2 * radius, 2 * radius, 2 * radius, 90, 90);//绘制左下角的圆角
            path.addline(l, t + radius, l, t + h - radius);//绘制左上角、左下角和右下角之间的三角形
            return path;
        }
        #endregion
    }
}

 

然后新建一个窗体form1然后拖拽一个新建的自定义水晶控件

 

 

代码下载

https://download.csdn.net/download/badao_liumang_qizhi/12241085