Siticone Expressive Button
The SiticoneExpressiveButton is a next-generation button control designed for modern, interactive user interfaces.
It goes beyond simple clicks by incorporating Material Design 3 aesthetics, fluid state transitions, and unique "Expressive" shape morphing.
Features include liquid ripple effects, physics-based squeeze animations, gradient support, and a comprehensive event system for detailed interaction handling.
Colors & Gradients
Define the visual identity of the button across its various states (Idle, Hover, Press, Disabled).
| Property | Type | Description & Usage Example |
|---|---|---|
FillColor |
Color | btn.FillColor = Color.DodgerBlue; The primary background color in the idle state. |
FillColor2 |
Color | btn.FillColor2 = Color.Cyan; The secondary background color. If different from FillColor, a gradient is automatically rendered. |
GradientMode |
LinearGradientMode | btn.GradientMode = LinearGradientMode.ForwardDiagonal; Determines the direction of the gradient fill (e.g., Vertical, Horizontal). |
HoverFillColor |
Color | btn.HoverFillColor = Color.FromArgb(50, 150, 255); Background color when the mouse hovers over the button. |
PressFillColor |
Color | btn.PressFillColor = Color.DarkBlue; Background color when the button is actively pressed. |
RippleColor |
Color | btn.RippleColor = Color.White; The color of the expanding ink ripple effect on click. |
Shape & Expressions
Control the geometry of the button and its "expressive" animations (morphing).
| Property | Type | Description & Usage Example |
|---|---|---|
BorderRadius |
int | btn.BorderRadius = 20; The corner radius in the idle state. Higher values make the button rounder. |
EnableExpressions |
bool | btn.EnableExpressions = true; Master switch for shape morphing. If true, the button can change its radius or squeeze when pressed. |
PressedBorderRadius |
int | btn.PressedBorderRadius = 10; The target corner radius when pressed. The button will smoothly morph to this shape. |
SqueezeOnPress |
bool | btn.SqueezeOnPress = true; If true, the button horizontally "squeezes" (indents) when clicked, simulating physical material flex. |
SqueezeDepth |
int | btn.SqueezeDepth = 5; The pixel depth of the horizontal squeeze effect. |
LiquidEffect |
bool | btn.LiquidEffect = true; When enabled, shape transitions (radius/squeeze) use a fluid physics model with subtle waves instead of linear interpolation. |
Icons & Text
Manage the layout of text and optional left/right icons.
| Property | Type | Description & Usage Example |
|---|---|---|
Text |
string | btn.Text = "Submit Order"; The button caption. |
LeftIcon |
Image | btn.LeftIcon = Properties.Resources.Cart; An icon displayed on the left side. |
RightIcon |
Image | btn.RightIcon = Properties.Resources.ArrowRight; An icon displayed on the right side. |
LeftIconSize |
Size | btn.LeftIconSize = new Size(24, 24); The explicit display size for the left icon. |
Advanced Behavior
Settings for interaction modes, accessibility, and feedback.
| Property | Type | Description & Usage Example |
|---|---|---|
IsReadOnly |
bool |
btn.IsReadOnly = true;
Disables normal clicks and grays out the button. Unlike Enabled=false, it can still receive certain events (like shake feedback).
|
EnableRipples |
bool | btn.EnableRipples = true; Toggles the expanding ink ripple effect on click. |
EnableKeyboardSupport |
bool | btn.EnableKeyboardSupport = true; Allows the button to be triggered via Enter/Space keys when focused. |
CanShake |
bool | btn.CanShake = true; If true, the button shakes horizontally when clicked while in ReadOnly mode. |
Public Methods
// Simulates a full click, including visual press/release animations.
btn.PerformClickEx();
// Simulates a click with a ripple starting from a specific coordinate.
// Useful for forwarding clicks from other controls.
btn.PerformRippleClick(new Point(10, 10));
// Manually triggers the error shake animation.
btn.TriggerShake();
Events
// 1. Ripple Started
// Fires when a ripple animation begins. Useful for spawning particle effects.
btn.RippleStarted += (s, e) =>
{
Debug.WriteLine($"Ripple at {e.Location}");
};
// 2. Keyboard Clicked
// Fires specifically when triggered via keyboard (requires EnableKeyboardSupport).
btn.KeyboardClicked += (s, e) =>
{
LogAction("Keyboard Entry");
};
// 3. ReadOnly Changed
btn.ReadOnlyChanged += (s, e) =>
{
lblStatus.Text = e.NewState ? "Locked" : "Ready";
};
Detailed Usage Examples
Example 1: Liquid Morph Button
Configuring a button that feels like a fluid bubble when pressed.
public void SetupLiquidButton()
{
btn.Text = "Hold Me";
btn.FillColor = Color.DeepSkyBlue;
btn.BorderRadius = 25;
// Enable Expressive Features
btn.EnableExpressions = true;
btn.LiquidEffect = true;
// When pressed, it will become rounder (radius 25 -> 15)
// and squeeze inward by 8 pixels with a fluid wave.
btn.PressedBorderRadius = 15;
btn.SqueezeOnPress = true;
btn.SqueezeDepth = 8;
}
Example 2: Ghost Button with Gradient
Creating a transparent "Ghost" button that reveals a gradient on hover.
public void SetupGhostButton()
{
// Transparent Idle State
btn.FillColor = Color.Transparent;
btn.FillColor2 = Color.Transparent;
btn.ForeColorCustom = Color.Black;
btn.BorderColor = Color.Black;
btn.BorderSize = 1;
// Gradient Hover State
btn.HoverFillColor = Color.Violet;
btn.HoverFillColor2 = Color.Orange;
btn.GradientMode = LinearGradientMode.ForwardDiagonal;
btn.HoverForeColor = Color.White;
}
Designer Support
The SiticoneExpressiveButton includes a powerful Smart Tag panel in Visual Studio.
- 24+ Themes: Instantly apply presets like "Neon Cyber", "Material Blue", or "Minimalist Black".
- Clipboard Tools: Copy the exact visual style of one button and paste it onto another with one click.
- Quick Config: Easily toggle Ripples, Expressions, and ReadOnly modes directly from the design surface.