Управление переключателем тумблеров в Windows Forms

Question

Я разрабатываю управление переключателем 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 нарисуйте круг проверки. Использование кодов в примере часть ответа вы можете иметь CheckBox с такой UI:

Пример

Важно об этом образце это полностью 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); 
     } 
    } 
}