Siticone Fluent Toggle Switch

The SiticoneFluentToggleSwitch is a highly interactive toggle control inspired by modern Fluent design principles. It features fluid animations, including thumb scaling and stretching, gradient backgrounds for both On/Off states, and comprehensive feedback mechanisms.

Visual Styling

Customize the track, thumb, and hover states with solid colors or gradients.

Property	Type	Description
`OnBackColor`	Color	Solid background color when the switch is ON.
`OffBackColor`	Color	Solid background color when the switch is OFF.
`OnThumbColor`	Color	Color of the thumb when ON.
`OffThumbColor`	Color	Color of the thumb when OFF.
`GradientOn`	bool	Enables gradient background for the ON state.
`OnGradientColor1/2`	Color	Start and end colors for the ON state gradient.

Animation Physics

Control the fluid movement of the toggle thumb.

Property	Type	Description
`StretchOnToggle`	bool	If true, the thumb elongates horizontally during the transition (0 to 100%), creating a sense of speed.
`StretchFactor`	float	Intensity of the stretch effect (0.1 to 1.0). Default is 0.6.
`ThumbScaleStyle`	Enum	Animation when pressing the thumb: `Inflate`: Scales up (e.g., 110%). `Deflate`: Scales down (e.g., 85%). `None`: No scaling.
`AnimationDuration`	int	Time in milliseconds for the toggle transition (Default: 350ms).

Behavior & Performance

Property	Type	Description
`Checked`	bool	Gets or sets the toggle state.
`IsReadOnly`	bool	Prevents user interaction while maintaining appearance (with reduced opacity).
`UltraFastPerformance`	bool	Disables animations and cosmetic effects for maximum rendering speed.

Events

React to state changes and user interactions.

CheckedChanged Event

// Fired when the Checked state changes.
fluentSwitch.CheckedChanged += (s, e) => 
{
                // e.IsChecked gives the new state
                if (e.IsChecked)
    {
                ActivateMode();
    }
};

AnimationStateChanged Event

// Track animation lifecycle.
fluentSwitch.AnimationStateChanged += (s, e) => 
{
                if (e.State == AnimationState.Completed)
    {
                Console.WriteLine("Transition finished.");
    }
};

Designer Support

The control includes a comprehensive Smart Tag menu with extensive theme presets.

Category	Features
`Standard Themes`	Apply presets like Light, Dark, Material, iOS, Success, Error, Warning.
`Creative Themes`	Apply unique styles like Neon Night, Cyberpunk, Eco Leaf, Ruby Red.
`Animation`	Configure Stretch Factor, Scale Style, and Duration directly.

Usage Examples

Example 1: Gradient Toggle

Creating a vibrant toggle with gradient backgrounds for ON/OFF states.

C# - Gradient Setup

private void SetupGradientSwitch()
{
                // Enable Gradients
    fluentSwitch.GradientOn = true;
    fluentSwitch.GradientOff = true;
    
                // Sunset Gradient (ON)
    fluentSwitch.OnGradientColor1 = Color.FromArgb(255, 87, 34);
    fluentSwitch.OnGradientColor2 = Color.FromArgb(255, 193, 7);
    
                // Night Gradient (OFF)
    fluentSwitch.OffGradientColor1 = Color.FromArgb(40, 40, 60);
    fluentSwitch.OffGradientColor2 = Color.FromArgb(20, 20, 30);
    
    fluentSwitch.AnimationDuration = 400; // Slow transition
}

Example 2: Elastic Interaction

Configuring the toggle for a "jelly-like" feel using stretch and inflate animations.

C# - Elastic Animation

private void SetupElasticSwitch()
{
                // High stretch factor for jelly effect
    fluentSwitch.StretchOnToggle = true;
    fluentSwitch.StretchFactor = 0.9f;
    
                // Inflate thumb on press
    fluentSwitch.ThumbScaleStyle = ThumbScaleAnimation.Inflate;
    fluentSwitch.ThumbScaleFactor = 1.25f;
    
    fluentSwitch.AnimationDuration = 300;
}

Example 3: Read-Only Lock

A toggle that represents a locked setting, providing shake feedback on click.

C# - Locked Switch

private void SetupLockedSwitch()
{
    fluentSwitch.Checked = true;
    fluentSwitch.IsReadOnly = true;
    
                // Feedback configuration
    fluentSwitch.CanShake = true;
    fluentSwitch.ShakeIntensity = 5;
    
    fluentSwitch.ReadOnlyInteraction += (s, e) => 
    {
                MessageBox.Show("This setting is managed by your organization.");
    };
}