首页 > 编程语言 >C#自定义checkBox开关按钮控件,设计漂亮美观的UI按钮

C#自定义checkBox开关按钮控件,设计漂亮美观的UI按钮

时间:2023-07-07 11:35:00浏览次数:48  
标签:控件 CheckStyle 自定义 按钮 bitMapOn Properties Resources checkStyle

第一步:

先准备开关按钮要使用到的背景图片,一张是开启的,一张是关闭的,如下图:

 

  

一共有6种款式,大家也可以全部加进去

 

 

 

 然后将这些图片作为资源文件添加到项目中,如下图:

 

第二步、新建用户控件,命名为:ButtonCheck.cs

 

ButtonCheck.cs 代码如下:

        /// <summary>
        /// 是否选中
        /// </summary>
        bool isCheck = true;
        /// <summary>
        /// 枚举
        /// </summary>
        public enum CheckStyle
        {
            style1 = 0,
            style2 = 1,
            style3 = 2,
            style4 = 3,
            style5 = 4,
            style6 = 5
        };
        public ButtonCheck()
        {
            InitializeComponent();
            //设置Style支持透明背景色并且双缓冲
            this.SetStyle(ControlStyles.AllPaintingInWmPaint, true);
            this.SetStyle(ControlStyles.DoubleBuffer, true);
            this.SetStyle(ControlStyles.ResizeRedraw, true);
            this.SetStyle(ControlStyles.Selectable, true);
            this.SetStyle(ControlStyles.SupportsTransparentBackColor, true);
            this.SetStyle(ControlStyles.UserPaint, true);
            this.BackColor = Color.Transparent;

            this.Cursor = Cursors.Hand;
            this.Size = new Size(87, 27);
        }
        /// <summary>
        /// 是否选中
        /// </summary>
        public bool Checked
        {
            set { isCheck = value; this.Invalidate(); }
            get { return isCheck; }
        }

        CheckStyle checkStyle = CheckStyle.style1;

        /// <summary>
        /// 样式
        /// </summary>
        public CheckStyle CheckStyleX
        {
            set { checkStyle = value; this.Invalidate(); }
            get { return checkStyle; }
        }
        protected override void OnPaint(PaintEventArgs e)
        {
            Bitmap bitMapOn = null;
            Bitmap bitMapOff = null;

            if (checkStyle == CheckStyle.style1)
            {
                bitMapOn = Properties.Resources.on1;
                bitMapOff = Properties.Resources.off1;
            }
            else if (checkStyle == CheckStyle.style2)
            {
                bitMapOn = Properties.Resources.on2;
                bitMapOff = Properties.Resources.off2;
            }
            else if (checkStyle == CheckStyle.style3)
            {
                bitMapOn = Properties.Resources.on3;
                bitMapOff = Properties.Resources.off3;
            }
            else if (checkStyle == CheckStyle.style4)
            {
                bitMapOn = Properties.Resources.on4;
                bitMapOff = Properties.Resources.off4;
            }
            else if (checkStyle == CheckStyle.style5)
            {
                bitMapOn = Properties.Resources.on5;
                bitMapOff = Properties.Resources.off5;
            }
            else if (checkStyle == CheckStyle.style6)
            {
                bitMapOn = Properties.Resources.on6;
                bitMapOff = Properties.Resources.off6;
            }

            Graphics g = e.Graphics;
            Rectangle rec = new Rectangle(0, 0, this.Size.Width, this.Size.Height);

            if (isCheck)
            {
                g.DrawImage(bitMapOn, rec);
            }
            else
            {
                g.DrawImage(bitMapOff, rec);
            }
        }
        //特别说明:ButtonCheck_Click这个事件要添加控制方法产生,而不是直接在这里写
        private void ButtonCheck_Click(object sender, EventArgs e)
        {
            isCheck = !isCheck;
            this.Invalidate();
        }
View Code

2.1.在用户控件后台写入上述代码

 

2.2.为用户控件添加点击事件

 

        private void ButtonCheck_Click_1(object sender, EventArgs e)
        {
            isCheck = !isCheck;
            this.Invalidate();
        }

 

第三步、调用自定义的开关按钮控件

3.1.项目上右击,点击重新生成

 

3.2.回到UI设计界面,刷新“工具箱”,会发现多出一个可使用的ButtonCheck控件

 

直接拖出来就可以使用自定义的开关按钮控件了

 

标签:控件,CheckStyle,自定义,按钮,bitMapOn,Properties,Resources,checkStyle
From: https://www.cnblogs.com/Kirito-Asuna-Yoyi/p/UsingCheckBox.html

相关文章

  • vue 自定义指令实现overflow-tooltip
    利用elementui el-tooltip组件实现1.创建overflow-tooltip指令importVuefrom'vue'/*eslint-disable*/functiongetStyle(obj,attr){if(obj.currentStyle){returnobj.currentStyle[attr];}else{returngetComputedStyle(obj)[attr];......
  • 手把手教你自定义自己SpringBoot Starter组件源码剖析
    我们知道SpringBootStarter也就是启动器。是SpringBoot组件化的一大优点。基于这个思想,基于这个思想SpringBoot才变得非常强大,官方给我们提供很多开箱即用的启动器。SpringBootStarter是SpringBoot的一个重要特性,它有以下优点:依赖管理:Starter自动处理项目的依赖关系,......
  • 前端Vue自定义精美底部操作栏导航栏工具栏 可用于电商购物车底部导航
    随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。通过组件化开发,可以有效实现单独开发,单独维护,而且他们之间可以随意的进行组合。大大提升开发效率......
  • 转载:用pageOffice控件实现 office word文档 编辑Word加水印的功能
    OA办公中,业务需要多人编辑word文档,需要加文字水印的功能。怎么实现word文档的编辑加文字水印呢?2实现方法通过pageOffice实现简单的在线打开编辑word时,通过设置doc.getWaterMark().setText("PageOffice开发平台");属性,给Word文档添加文字水印。就可以实现编辑word中增加水......
  • uniapp实现这该死的自定义弹窗
    最近自己学习和写这个uniapp,刚开始规划的时候就觉得自己到时候会需要一个这个弹框,弹框里面药房input这样的东西什么的,然后就在想uniapp里面会不会没有这个modal呢?转念一想应该是会有的吧,毕竟是一个框架嘛.然后我就找找找,找了好久都没找到合适的.可能是人家有我没找到吧,最......
  • 十一、控件学习
    1.QWidget主窗口控件1.1是所有用户界面对象的基类,即直接或间接的继承于该类。1.2常用于做顶层小部件或子小部件。1.3示例 2.QPushButton按钮控件2.1常用信号clicked(boolchecked):点击信号pressed():按下信号released():释放信号to......
  • Java实现浏览器端大文件分片上传控件
    ​ 核心原理: 该项目核心就是文件分块上传。前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题。* 如何分片;* 如何合成一个文件;* 中断了从哪个分片开始。如何分,利用强大的js库,来减轻我们的工作,市场上已经能有关于大文件分块......
  • Django restframwork中使用分页及实现自定义分页
    关于为何要分页以及如何在Django+Template架构中如何使用分页,可以参考之前的文章django自定义分页类和使用总结[1]DjangoRestFramework中分页限制今天开篇我们先不讲如何使用,我们先说Django+restframework实现前后端分离项目开发时,分页功能使用的限制?缘由是之前在开发运维......
  • Vue 先初始化子组件再初始化父组件的方法(自定义父子组件mounted执行顺序)
    写在前面:本篇内容内容主要讲述了,在使用Konva进行开发过程中遇到的一些问题。(既然是组件加载顺序,主要牵扯到的就是,父子组件的关系,父子组件的生命周期)众所周知,Vue中父子组件生命周期的执行顺序为://挂载阶段父beforeCreate->父created->父beforeMount->子beforeCre......
  • 认识soui4js(第5篇):使用扩展控件
    无论内置控件多么丰富,也不可能满足用户所有需求。总有时候用户需要自己扩展控件。soui4js推荐使用C++来扩展控件,然后通过实现一个js模块来提供js使用。扩展控件通常涉及到图形上下文的频繁交互,如果使用js来实现,效率上会大打折扣。使用C++,没了C++和js的相互调用。使用起来就和C++......