在Windows窗体中切换开关控制 [英] Toggle Switch Control in Windows Forms

问题描述

我正在使用 CheckBox 设计一个Toggle Switch控件，但目前我的控件只绘制一个圆。如何绘制如下图所示的圆形，以及如何根据控件的值（如下图所示）更改圆形的位置：

以下是我的代码：

  public class MyCheckBox：CheckBox 
 {
 public MyCheckBox（）
 {
 this.Appearance = System.Windows.Forms.Appearance.Button; 
 this.BackColor = Color.Transparent; 
 this.TextAlign = ContentAlignment.MiddleCenter; 
 this.FlatStyle = System.Windows.Forms.FlatStyle.Flat; 
 this.FlatAppearance.BorderColor = Color.RoyalBlue; 
 this.FlatAppearance.BorderSize = 2; 
} 
 
 protected override void OnPaint（PaintEventArgs e）
 {
 this.OnPaintBackground（e）; 
 using（var path = new GraphicsPath（））
 {
 var c = e.Graphics.ClipBounds; 
 var r = this.ClientRectangle; 
 r.Inflate（-FlatAppearance.BorderSize，-FlatAppearance.BorderSize）; 
 path.AddEllipse（r）; 
 e.Graphics.SetClip（path）; 
 base.OnPaint（e）; 
 e.Graphics.SetClip（c）; 
 e.Graphics.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias; 
 if（this.Checked）
 {
 using（var p = new Pen（FlatAppearance.BorderColor，
 FlatAppearance.BorderSize））
 {
 .Graphics.DrawEllipse（p，r）; 
} 
} 
} 
} 
} 
  

$ b

请帮助我，提前感谢。

解决方案

我知道这是一个

示例

这个例子的重要的是它完全是一个 CheckBox 控制，并支持使用鼠标和键盘检查，还支持数据绑定和所有其他标准功能 CheckBox 。代码不完美，但是有一个好的开始点是有/没有切换切换：

 使用System.Drawing; 
 using System.Drawing.Drawing2D; 
 using System.Windows.Forms; 
 public class MyCheckBox：CheckBox 
 {
 public MyCheckBox（）
 {
 SetStyle（ControlStyles.UserPaint | ControlStyles.AllPaintingInWmPaint，true）; 
 Padding = new Padding（6）; 
} 
 protected override void OnPaint（PaintEventArgs e）
 {
 this.OnPaintBackground（e）; 
 e.Graphics.SmoothingMode = SmoothingMode.AntiAlias; 
 using（var path = new GraphicsPath（））
 {
 var d = Padding.All; 
 var r = this.Height  -  2 * d; 
 path.AddArc（d，d，r，r，90，180）; 
 path.AddArc（this.Width  -  r  -  d，d，r，r，-90，180）; 
 path.CloseFigure（）; 
 e.Graphics.FillPath（Checked？Brushes.DarkGray：Brush.LightGray，path）; 
 r = Height  -  1; 
 var rect =检查？ new Rectangle（Width  -  r  -  1，0，r，r）
：new Rectangle（0，0，r，r）; 
 e.Graphics.FillEllipse（Checked？Brushes.Green：Brushes.WhiteSmoke，rect）; 
} 
} 
} 
  

I am designing a Toggle Switch control using CheckBox, but currently my control only draws a circle. How can I draw round shapes like below image and how can I change the location of the circle based on value of the control like below image:

Here is my code:

public class MyCheckBox:CheckBox
{
    public MyCheckBox()
    {
        this.Appearance = System.Windows.Forms.Appearance.Button;
        this.BackColor = Color.Transparent;
        this.TextAlign = ContentAlignment.MiddleCenter;
        this.FlatStyle = System.Windows.Forms.FlatStyle.Flat;
        this.FlatAppearance.BorderColor = Color.RoyalBlue;
        this.FlatAppearance.BorderSize = 2;
    }

    protected override void OnPaint(PaintEventArgs e)
    {
        this.OnPaintBackground(e);
        using (var path = new GraphicsPath())
        {
            var c = e.Graphics.ClipBounds;
            var r = this.ClientRectangle;
            r.Inflate(-FlatAppearance.BorderSize, -FlatAppearance.BorderSize);
            path.AddEllipse(r);
            e.Graphics.SetClip(path);
            base.OnPaint(e);
            e.Graphics.SetClip(c);
            e.Graphics.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;
            if (this.Checked)
            {
                using (var p = new Pen(FlatAppearance.BorderColor,
                                       FlatAppearance.BorderSize))
                {
                    e.Graphics.DrawEllipse(p, r);
                }
            }
        }
    }
}

Please help me, thanks in advance.

解决方案

I know this is a winforms question. But you may want to take a look at Toggle Switches or read more about Universal Windows App Components. Anyway, here is an answer for Windows forms developers. It shows how we can customize rendering of a check box to have such appearance.

Currently you are drawing only an ellipse, it's quiet a toggle button. But if you want to show it like the below image, you should first draw a round shape for background, then based on Checked value draw the check circle. Using the codes in Example part of the answer you can have a CheckBox with such UI:

Example

The important thing about this sample is it's completely a CheckBox control and supports check using mouse and keyboard, also supports data-binding and all other standard features of CheckBox. The code is not perfect, but is a good start point to have a yes/no toggle switch:

using System.Drawing;
using System.Drawing.Drawing2D;
using System.Windows.Forms;
public class MyCheckBox : CheckBox
{
    public MyCheckBox()
    {
        SetStyle(ControlStyles.UserPaint | ControlStyles.AllPaintingInWmPaint, true);
        Padding = new Padding(6);
    }
    protected override void OnPaint(PaintEventArgs e)
    {
        this.OnPaintBackground(e);
        e.Graphics.SmoothingMode = SmoothingMode.AntiAlias;
        using (var path = new GraphicsPath())
        {
            var d = Padding.All;
            var r = this.Height - 2 * d;
            path.AddArc(d, d, r, r, 90, 180);
            path.AddArc(this.Width - r - d, d, r, r, -90, 180);
            path.CloseFigure();
            e.Graphics.FillPath(Checked ? Brushes.DarkGray : Brushes.LightGray, path);
            r = Height - 1;
            var rect = Checked ? new Rectangle(Width - r - 1, 0, r, r)
                               : new Rectangle(0, 0, r, r);
            e.Graphics.FillEllipse(Checked ? Brushes.Green : Brushes.WhiteSmoke, rect);
        }
    }
}

这篇关于在Windows窗体中切换开关控制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！