在 Windows 窗體中切換切換控件

Question

我正在使用CheckBox設計一個 Toggle Switch 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

我知道這是一個winforms問題。 但您可能需要查看Toggle Switches或閱讀有關Universal Windows App Components 的更多信息。

無論如何，這是 Windows 窗體開發人員的答案。 它展示了我們如何自定義復選框的呈現以具有這種外觀。

目前您只繪制一個橢圓，它是一個安靜的切換按鈕。 但是如果你想像下圖一樣顯示它，你應該先畫一個圓形作為背景，然后根據Checked值繪制選中的圓圈。 使用答案示例部分中的代碼，您可以擁有一個帶有此類 UI 的CheckBox ：

示例

這個示例的重要之處在於它完全是一個CheckBox控件，支持使用鼠標和鍵盤進行檢查，還支持數據綁定和CheckBox所有其他標准功能。 代碼並不完美，但它是一個很好的起點，可以使用是/否切換開關：

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