Toggle Check Button
A flat, square-cornered on/off switch in the Windows 8 style: a framed track with a gradient interior and a solid bar – the stick – that sits at the left end while off and at the right end while on.
Assembly
| Assembly | Binarymission.WinForms.Controls.ToggleControls.dll |
| Root namespace | Binarymission.WinForms.Controls.ToggleControls |
| Target frameworks | .NET Framework 4.8, .NET 6 / 8 / 10 |
Overview
Use it for settings that take effect at once, where a check box would do but a switch reads
better – "Auto-save", "Show completed tasks", "Use proxy server". Read and set the state with
IsChecked and handle Toggled to act on it.
The parts and their colours
Every part has one colour for the on state and one for the off state, so the switch can say which state it is in by colour as well as by the stick's position. The two sets start out identical; set the on-state colours to something brighter to make the difference plain.
| Part | On / off colour properties |
|---|---|
Outer border – the frame round the track |
|
Inner border – the line inside the frame |
|
Track interior – a top-to-bottom gradient |
|
Stick – the full-height bar that moves |
|
ShouldDrawGapBetweenSwitchStickAndTrack cuts a slot between the stick and the
track, and ShouldDrawFocusRectangleWhenFocused shows a dotted rectangle while the switch
has the keyboard focus. All widths are in logical pixels and are scaled for the display.
Using it
A click on the switch toggles it, and so does Enter or Space while it has the focus. The switch
has no default size: give it a Control.Size, such as 60 by 24.
Getting started
An "Auto-save" switch on a document editor's toolbar panel, green while on and grey while off.
using System;
using System.Drawing;
using System.Windows.Forms;
using Binarymission.WinForms.Controls.ToggleControls;
public class EditorOptionsPanel : Panel
{
private readonly Win8ToggleSwitch _autoSave = new Win8ToggleSwitch();
public EditorOptionsPanel()
{
Size = new Size(260, 48);
var caption = new Label { Text = "Auto-save", Location = new Point(12, 16), AutoSize = true };
_autoSave.Location = new Point(120, 12);
_autoSave.Size = new Size(60, 24);
// On: a green stick on a light green track.
_autoSave.ToggleStickColor = Color.SeaGreen;
_autoSave.BackgroundStartColor = Color.Honeydew;
_autoSave.BackgroundEndColor = Color.LightGreen;
// Off: a grey stick on a grey track.
_autoSave.ToggleStickColorUnchecked = Color.DimGray;
_autoSave.BackgroundStartColorUnchecked = Color.White;
_autoSave.BackgroundEndColorUnchecked = Color.Gainsboro;
_autoSave.ShouldDrawFocusRectangleWhenFocused = true;
_autoSave.Toggled += (sender, e) => Console.WriteLine("Auto-save " + (_autoSave.IsChecked ? "on" : "off"));
Controls.Add(caption);
Controls.Add(_autoSave);
}
}API reference
Binarymission.WinForms.Controls.ToggleControls
class ToggleSwitch | An on/off switch for settings that take effect at once - "Notifications", "Dark mode", "Sync over mobile data" - drawn as a pill-shaped track with a sliding knob and a text or image showing the current state. |
class Win8ToggleSwitch | A flat, square-cornered on/off switch in the Windows 8 style: a framed track with a gradient interior and a solid bar - the stick - that sits at the left end while off and at the right end while on. |