Siticone Expressive Group Toggle Switch
The SiticoneExpressiveGroupToggleSwitch combines the fluid, organic animations of the standard Expressive Toggle Switch with Radio Button logic.
When multiple switches are assigned the same GroupName within a container, enabling one will automatically animate the others to the "Off" state.
It also includes a specialized Read-Only Mode with distinct styling and tactile feedback (Shake/Beep) to indicate locked settings.
Grouping & Behavior
Core properties for managing the radio-button logic and interactivity.
| Property | Type | Description & Usage Example |
|---|---|---|
GroupName |
string | switch.GroupName = "ThemeOptions"; The unique identifier for the group. Any other `ExpressiveGroupToggleSwitch` in the same parent container with this name will be mutually exclusive (Radio behavior). |
IsChecked |
bool | switch.IsChecked = true; Gets or sets the toggle state. Setting this to true automatically unchecks other switches in the same group. |
IsReadOnly |
bool | switch.IsReadOnly = true; When true, the switch enters a specific visual state (typically grayed out) and prevents toggling. Clicking it triggers feedback (Shake/Beep). |
Appearance & Colors
Customize the colors for On, Off, and the specific Read-Only state.
| Property | Type | Description & Usage Example |
|---|---|---|
CheckedFillColor |
Color | switch.CheckedFillColor = Color.DodgerBlue; Track background color when ON. |
CheckedThumbColor |
Color | switch.CheckedThumbColor = Color.White; Thumb (circle) color when ON. |
UncheckedFillColor |
Color | switch.UncheckedFillColor = Color.FromArgb(60, 122, 117, 127); Track background color when OFF. |
ReadOnlyFillColor |
Color | switch.ReadOnlyFillColor = Color.FromArgb(235, 236, 240); Track background color when IsReadOnly is true (Overrides Checked/Unchecked). |
ReadOnlyThumbColor |
Color | switch.ReadOnlyThumbColor = Color.FromArgb(151, 151, 151); Thumb color when IsReadOnly is true. |
Animation Physics
Control the fluid motion of the thumb and track morphing.
| Property | Type | Description & Usage Example |
|---|---|---|
AnimationSpeed |
float | switch.AnimationSpeed = 3.0f; Multiplier for the slide animation speed. Higher is faster. |
ThumbStretchScale |
float | switch.ThumbStretchScale = 20.0f; Controls the "Elasticity" of the thumb. Higher values make the thumb stretch more (like a capsule) while moving. |
SqueezeDepth |
int | switch.SqueezeDepth = 4; How many pixels the track squeezes inward when pressed or toggled. |
Public Methods
// Toggles the state (On -> Off or Off -> On).
// Note: If turning ON, it will turn OFF other switches in the same group.
switch.Toggle();
// Forces the state to ON.
switch.ToggleOn();
// Forces the state to OFF.
switch.ToggleOff();
// Forces the group logic to run immediately.
// Useful if you dynamically added controls and need to ensure only one is checked.
switch.EnforceGroupState();
Events
// 1. CheckedChanged
// Standard event fired whenever IsChecked changes.
switch.CheckedChanged += (s, e) =>
{
if (switch.IsChecked)
ApplyTheme("Dark Mode");
};
// 2. GroupSelectionUpdated
// Fired specifically when this switch caused OTHER switches to uncheck.
switch.GroupSelectionUpdated += (s, e) =>
{
Debug.WriteLine("Other switches were deselected by this action.");
};
// 3. BeforeToggle (Cancellable)
// Allows preventing the toggle action (e.g. if user has unsaved changes).
switch.BeforeToggle += (s, e) =>
{
if (PreventChange()) e.Cancel = true;
};
Detailed Usage Examples
Example 1: Settings Panel (Radio Mode)
Using three switches to select a single application theme. Only one can be active.
public void SetupThemeSelector()
{
// Configure all switches to the same group
swLight.GroupName = "AppTheme";
swDark.GroupName = "AppTheme";
swSystem.GroupName = "AppTheme";
// Set initial selection
swSystem.IsChecked = true;
// Logic
swLight.CheckedChanged += (s, e) => { if (swLight.IsChecked) SetTheme(Theme.Light); };
swDark.CheckedChanged += (s, e) => { if (swDark.IsChecked) SetTheme(Theme.Dark); };
swSystem.CheckedChanged += (s, e) => { if (swSystem.IsChecked) SetTheme(Theme.System); };
}
Example 2: Locked Settings (ReadOnly)
Demonstrating the distinct visual state for ReadOnly controls. Use this for settings managed by an administrator or requiring a higher license tier.
public void ConfigureAdminSettings(bool isAdmin)
{
// "Force SSL" setting
swForceSSL.IsChecked = true;
// If not admin, lock the control
swForceSSL.IsReadOnly = !isAdmin;
// Customize lock feedback
swForceSSL.CanShake = true; // Visual rejection
swForceSSL.CanBeep = true; // Audio rejection
// Customize lock appearance (Pale Gray)
swForceSSL.ReadOnlyFillColor = Color.FromArgb(230, 230, 230);
swForceSSL.ReadOnlyThumbColor = Color.FromArgb(160, 160, 160);
}