Winform自定义控件与案例 - 打造炫酷的自定义开关按钮控件

标签：控件圆角自定义 Color Height 炫酷 90f pathZFX

文章目录

1、控件效果
2、开关控件需求说明
3、案例实现
4、案例演示
5、总结

1、控件效果

在这里插入图片描述

2、开关控件需求说明

在开发 Winform 应用程序时，拥有一个美观且功能强大的 UI 控件库是非常重要的。本文将详细介绍如何使用 WinForms 创建一个带有圆角和状态切换功能的自定义开关按钮控件。我们将从头开始构建这个控件，并解决一些常见的绘制问题，如背景覆盖圆角的问题。首先，我们对开关按钮进行需求与功能拆分详解。
功能

开关状态切换点击控件，实现状态切换；
开状态 ---- 背景色(绿色) ,右侧显示白色圆角矩形，中间有个小圆圈
关状态 ---- 背景色(灰色) ,左侧显示白色圆角矩形，中间有个小圆圈

属性扩展

Checked状态
Checked颜色/UnChecked颜色
圆角半径 Radius

事件

checkedChanged 属性改变时发生的

方法封装

开启 Open
关闭 Close

3、案例实现

1、属性扩展代码实现

代码如下（示例）：

  #region 属性扩展

  /// <summary>
  /// 开关状态
  /// </summary>
  private bool checkedStatus = false;
  [DefaultValue(typeof(bool), "false"), Description("开关状态"), Category("自定义")]
  public bool CheckedStatus
  {
      get { return checkedStatus; }
      set { checkedStatus = value; Invalidate(); }
  }

  /// <summary>
  /// 圆角半径
  /// </summary>
  private int radius = 5;
  [DefaultValue(typeof(int), "5"), Description("圆角半径"), Category("自定义")]
  public int Radius
 {
     get { return radius; }
     set
     {
     //圆角半径有效性判断，不可以大于控件高度的一半
         if (value > Height / 2)
         {
             radius = Height / 2;
         }
         else
         {
             radius = value;
         }
         Invalidate();
     }
 }

  /// <summary>
  /// 状态开背景色
  /// </summary>
  private Color backGroundColorChecked = Color.Gray;
  [DefaultValue(typeof(Color), "Gray"), Description("开启时按钮背景色"), Category("自定义")]

  public Color BackGroundColorChecked
  {
      get { return backGroundColorChecked; }
      set { backGroundColorChecked = value; Invalidate(); }
  }

  /// <summary>
  /// 状态关背景色
  /// </summary>
  private Color backGroundColorUChecked = Color.Green;
  [DefaultValue(typeof(Color), "Green"), Description("关闭时按钮背景色"), Category("自定义")]

  public Color BackGroundColorUChecked
  {
      get { return backGroundColorUChecked; }
      set { backGroundColorUChecked = value; Invalidate(); }
  }

  #endregion

2、控件外观绘制

        #region 外观绘制

        protected override void OnPaint(PaintEventArgs e)
        {
            base.OnPaint(e);
            Graphics g = e.Graphics;//绘图对象
                                    //g.SmoothingMode = SmoothingMode.AntiAlias;//消除锯齿
            g.SmoothingMode = SmoothingMode.HighQuality;//高质量

            //背景填充色
            Color fillColor = checkedStatus ? backGroundColorChecked : backGroundColorUChecked;
            GraphicsPath path = new GraphicsPath();//边框路径
            path = PaintHelper.GetRoundRect(rect, Radius, Radius, Radius, Radius);//生成矩形圆角形状路径
            int d = 2 * Radius;
            g.FillPath(new SolidBrush(fillColor), path);

            //白色正方形与白色圆圈---位置和状态有关
            if (CheckedStatus)
            {
                //右侧  正方形边长：Height-4  距外边框2个像素间隔
                GraphicsPath pathZFX = new GraphicsPath();//边框路径
                //左上角
                pathZFX.AddArc(Width - 1 - Height + 2, 2, d, d, 180f, 90f);
                //右上角
                pathZFX.AddArc(Width - 2 - 1 - d, 2, d, d, 270f, 90f);
                //左上角
                pathZFX.AddArc(Width - 2 - 1 - d, Height - 2 - 1 - d, d, d, 0f, 90f);
                //右上角
                pathZFX.AddArc(Width - 1 - Height + 2, Height - 2 - 1 - d, d, d, 90f, 90f);
                g.FillPath(Brushes.White, pathZFX);

                //右侧小圆 直径 （Height-4)/2
                Rectangle ellipse=new Rectangle(Width-Height+2+(Height - 4) / 4, (Height - 4) / 4, (Height - 4) / 2, (Height - 4) / 2);
                g.DrawEllipse(new Pen(fillColor,2),ellipse);

            }
            else
            {
                //左侧  正方形边长：Height-4 距外边框2个像素间隔
                GraphicsPath pathZFX = new GraphicsPath();//边框路径
                //左上角
                pathZFX.AddArc(2, 2, d, d, 180f, 90f);
                //右上角
                pathZFX.AddArc(Height - 2 - d, 2, d, d, 270f, 90f);
                //右下角
                pathZFX.AddArc(Height - 2 - d, Height - 2 - 1-d, d, d, 0f, 90f);
                //左下角
                pathZFX.AddArc(2, Height - 2 - 1 - d, d, d, 90f, 90f);
                g.FillPath(Brushes.White, pathZFX);


                //左侧小圆 直径 （Height-4)/2
                Rectangle ellipse = new Rectangle(2+ (Height - 4) / 4, (Height - 4) / 4, (Height - 4) / 2, (Height - 4) / 2);
                g.DrawEllipse(new Pen(fillColor, 2), ellipse);
            }

        }

        #endregion

3、事件实现

 #region 事件
 public event EventHandler CheckedChanged; //CheckedStatus 改变事件

 //事件触发
 protected override void OnClick(EventArgs e)
 {
     base.OnClick(e);
     CheckedStatus=!CheckedStatus;
     CheckedChanged?.Invoke(this, e);
 }

 #endregion

4、拓展方法

这里我们可以对控件的属性进行方法封装，通过调用方法实现对控件的控制，而不需要直接点击控件

 #region 拓展，方法封装
 public void Open()
 {
     CheckedStatus=true;
 }

 public void Close()
 {
     CheckedStatus = false;
 }

 #endregion

4、案例演示

请添加图片描述
通过拓展方法实现控件控制新增按钮。代码如下：

 private void button1_Click(object sender, EventArgs e)
 {
     if(!switchButton1.CheckedStatus)
     {
         switchButton1.Open();
     }
     else
     {
         switchButton1.Close();
     }
 }

运行效果如下：

请添加图片描述

通过改变按钮属性，实现不同的颜色效果