Windows 表单中的切换开关控件

Question

我正在使用 CheckBox 设计一个 切换开关 控件，但目前我的控件只绘制一个圆圈。如何绘制如下图所示的圆形，以及如何根据控件的值更改圆的位置以表示选中和未选中状态，如下图所示？

这是我的代码：

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);
                }
            }
        }
    }
}

Answer 1

我知道这是一个 Windows 表单问题。但你可能想看看 Toggle Switches or read more about Universal Windows App Components.

无论如何，这里是 Windows 表单开发人员的答案。它显示了我们如何自定义复选框的呈现以具有这种外观。

目前您只绘制了一个椭圆，它是一个相当多的切换按钮。但是如果你想像下图那样显示，你应该先画一个圆形作为背景，然后根据 Checked 值，画检查圆。使用 Example 部分答案中的代码，您可以得到 CheckBox 和这样的 UI:

例子

此示例的重要之处在于它完全是一个 CheckBox 控件并支持使用鼠标和键盘进行检查。它还支持数据绑定和 CheckBox 的所有其他标准功能。代码并不完美，但有一个 yes/no 切换开关是一个很好的起点：

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 表单中的切换开关控件

Toggle switch control in Windows Forms

c#

.net

winforms

checkbox

toggleswitch