Siticone Logo
Siticone UI
DOCS
v2025.12.15
Docs Expressive Group Toggle Switch

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

Programmatic Control
// 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

Change & Group 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.

C# - Theme Selector
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.

C# - Locked Feature
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);
}