Siticone Expressive Toggle Switch
The SiticoneExpressiveToggleSwitch is a high-fidelity replacement for the standard checkbox or toggle switch.
It features Physics-Based Animation (elastic thumb stretching, squeezing), fluid color transitions, and a robust state management system.
It also supports a visually distinct Read-Only Mode with tactile feedback (Shake/Beep) to indicate locked states without disabling the control entirely.
Toggle State & Behavior
Core properties for managing the active state and user interaction rules.
| Property | Type | Description & Usage Example |
|---|---|---|
IsChecked |
bool | switch.IsChecked = true; Gets or sets the ON/OFF state. Changing this triggers the smooth slide animation. |
IsReadonly |
bool | switch.IsReadonly = true; When true, the switch enters a "Locked" visual state and rejects user input. Clicking it triggers the shake animation if enabled. |
CanShake |
bool | switch.CanShake = true; If true, the control shakes horizontally when clicked while in ReadOnly mode to indicate access denied. |
CanBeep |
bool | switch.CanBeep = true; If true, plays a system beep when clicked while in ReadOnly mode. |
Appearance & Colors
Customize the look for Checked (On), Unchecked (Off), and ReadOnly (Locked) states.
| Property | Type | Description & Usage Example |
|---|---|---|
CheckedFillColor |
Color | switch.CheckedFillColor = Color.Purple; Track background color when ON. |
CheckedThumbColor |
Color | switch.CheckedThumbColor = Color.White; Thumb (circle) color when ON. |
UncheckedFillColor |
Color | switch.UncheckedFillColor = Color.Gray; Track background color when OFF. |
ReadonlyFillColor |
Color | switch.ReadonlyFillColor = Color.LightGray; Track background color when IsReadonly is true. |
ThumbSize |
int | switch.ThumbSize = 15; Diameter of the sliding circle in pixels. |
BorderThickness |
int | switch.BorderThickness = 2; Width of the track border outline. |
Animation Physics
Fine-tune the "Expressive" feel of the switch movement.
| Property | Type | Description & Usage Example |
|---|---|---|
AnimationSpeed |
float | switch.AnimationSpeed = 3.0f; Multiplier for the slide speed. Higher is faster. |
ThumbStretchScale |
float | switch.ThumbStretchScale = 20.0f; Controls how much the thumb "stretches" (elongates) while moving, simulating velocity. |
SqueezeDepth |
int | switch.SqueezeDepth = 4; How much the track "squeezes" inward when the switch is pressed down. |
Public Methods
// Flips the state (On -> Off or Off -> On) with animation.
toggleSwitch.Toggle();
// Forces the state to ON (checked).
toggleSwitch.ToggleOn();
// Forces the state to OFF (unchecked).
toggleSwitch.ToggleOff();
// Simulates a full mouse click (Press down -> Wait -> Release -> Toggle).
toggleSwitch.PerformClick();
Events
// 1. CheckedChanged
// Standard event fired after the state has flipped.
toggleSwitch.CheckedChanged += (s, e) =>
{
Console.WriteLine($"New Value: {toggleSwitch.IsChecked}");
};
// 2. BeforeToggle (Cancellable)
// Fired before the state changes. Allows you to intercept and cancel the toggle.
toggleSwitch.BeforeToggle += (s, e) =>
{
if (UserHasUnsavedChanges())
{
MessageBox.Show("Please save first.");
e.Cancel = true; // Prevents the switch from toggling
}
};
// 3. ToggleChanged (Detailed)
// Provides extended info like PreviousState and TriggerSource.
toggleSwitch.ToggleChanged += (s, e) =>
{
Debug.WriteLine($"Switched to {e.IsChecked} via {e.TriggerSource}");
};
Detailed Usage Examples
Example 1: Basic Settings Switch
A standard usage for enabling/disabling app features.
public void SetupSwitches()
{
swNotifications.IsChecked = true;
swNotifications.CheckedChanged += (s, e) =>
{
Properties.Settings.Default.EnableNotifications = swNotifications.IsChecked;
Properties.Settings.Default.Save();
};
}
Example 2: Locked/Premium Feature
Demonstrating the ReadOnly mode with visual feedback.
public void ConfigureProFeatures(bool hasProLicense)
{
swAdvancedMode.IsReadonly = !hasProLicense;
swAdvancedMode.CanShake = true; // Shake if clicked without license
if (!hasProLicense)
{
// Optional: Show upgrade prompt if user tries to click
// Since ReadOnly swallows clicks, we can use MouseDown or similar wrapper logic
// But the visual Shake is handled automatically by the control.
swAdvancedMode.ReadonlyFillColor = Color.LightGray;
}
}
Example 3: Custom Theme Application
Applying a custom "iOS Green" look using the properties.
public void ApplyIOSTheme()
{
toggleSwitch.Size = new Size(50, 30);
toggleSwitch.ThumbSize = 26; // Large thumb filling height
toggleSwitch.BorderThickness = 0;
// Colors
toggleSwitch.CheckedFillColor = Color.FromArgb(52, 199, 89); // iOS Green
toggleSwitch.CheckedThumbColor = Color.White;
toggleSwitch.UncheckedFillColor = Color.FromArgb(233, 233, 234);
toggleSwitch.UncheckedThumbColor = Color.White;
// Smooth Elasticity
toggleSwitch.ThumbStretchScale = 5.0f; // Subtle stretch
toggleSwitch.AnimationSpeed = 4.0f; // Snappy
}