Siticone Expressive Image Button

The SiticoneExpressiveImageButton is a specialized button control optimized for icon-only interactions. It replaces standard text with a dynamic image stack that cross-fades between Idle, Hover, and Press states. It also features a unique "Jelly" Morphing Physics engine for rounded shapes, creating a playful, organic feel when interacted with.

Image States

Define different images for each interaction state. The control automatically cross-fades between them.

Property	Type	Description & Usage Example
`IdleImage`	Image	btn.IdleImage = Resources.Icon_Gray; The base image shown when the button is inactive. Always visible at the bottom of the stack.
`HoverImage`	Image	btn.HoverImage = Resources.Icon_Blue; Fades in over the IdleImage when the mouse enters the control.
`PressImage`	Image	btn.PressImage = Resources.Icon_White; Fades in on top of everything when the button is actively pressed.
`ImageSize`	Size	btn.ImageSize = new Size(32, 32); The explicit size to render the centered image.

Organic Jelly Physics

This control features a specialized physics engine for rounded buttons. Instead of a mechanical shrink, it can deform organically like a soft jelly object.

Property	Type	Description & Usage Example
`EnableRandomJellyEffect`	bool	btn.EnableRandomJellyEffect = true; If true, the squeeze animation uses randomized control points on each side, creating a unique, organic wobble every time it's clicked.
`RoundedMorphThreshold`	int	btn.RoundedMorphThreshold = 20; If `BorderRadius` is greater than this value, the "Jelly" physics are enabled automatically.
`LiquidEffect`	bool	btn.LiquidEffect = true; Enables the fluid wave simulation for shape transitions.
`SqueezeDepth`	int	btn.SqueezeDepth = 6; The maximum depth of the indentation when pressed.

Appearance & Colors

Standard color properties for the button container background.

Property	Type	Description & Usage Example
`FillColor`	Color	btn.FillColor = Color.WhiteSmoke; Idle background color.
`HoverFillColor`	Color	btn.HoverFillColor = Color.AliceBlue; Hover background color.
`PressFillColor`	Color	btn.PressFillColor = Color.DodgerBlue; Pressed background color.
`BorderRadius`	int	btn.BorderRadius = 35; Corner radius. Higher values trigger Jelly mode.

Public Methods

Programmatic Interaction

// Simulates a full click with random jelly physics.
btn.PerformClickEx();

// Simulates a click with a ripple starting from a specific point.
btn.PerformRippleClick(new Point(15, 15));

// Triggers the "Error" shake animation manually.
btn.TriggerShake();

Events

Animation Events

// Occurs whenever the visible image state changes (e.g. Idle -> Hover)
btn.ImageStateChanged += (s, e) => 
{
                Debug.WriteLine($"State: {e.ActiveStateName}, Alpha: {e.Opacity}");
};

// Occurs on every frame of the image fade animation
btn.ImageFadeStep += (s, e) => 
{
                // Custom logic for syncing external animations
};

Detailed Usage Examples

Example 1: Interactive Like Button

A circular button that "bloops" and changes color when liked.

C# - Jelly Like Button

public void SetupLikeButton()
{
                // Circular shape triggering Jelly Physics
    btnLike.Size = new Size(60, 60);
    btnLike.BorderRadius = 30; 
    btnLike.EnableRandomJellyEffect = true;
    
                // Images for states
    btnLike.IdleImage = Properties.Resources.Heart_Outline;
    btnLike.HoverImage = Properties.Resources.Heart_Pink;
    btnLike.PressImage = Properties.Resources.Heart_Filled;
    
                // Colors
    btnLike.FillColor = Color.White;
    btnLike.HoverFillColor = Color.LavenderBlush;
    btnLike.PressFillColor = Color.HotPink;
}

Example 2: Media Player Play/Pause

A standard button with subtle morphing and icon switching.

C# - Play Button

public void SetupPlayButton()
{
                // Standard rounded rect
    btnPlay.Size = new Size(50, 50);
    btnPlay.BorderRadius = 15;
    
                // Disable random jelly for a more mechanical feel
    btnPlay.EnableRandomJellyEffect = false;
    btnPlay.SqueezeDepth = 3;
    
                // Images
    btnPlay.IdleImage = Properties.Resources.Play_Gray;
    btnPlay.HoverImage = Properties.Resources.Play_White;
    
                // Theme
    btnPlay.FillColor = Color.FromArgb(40, 40, 40);
    btnPlay.HoverFillColor = Color.FromArgb(60, 60, 60);
    btnPlay.RippleColor = Color.White;
}