Siticone Image Button

The SiticoneImageButton is a highly interactive control optimized for displaying images with rich feedback. It supports multi-state images (Normal, Hover, Pressed), material ripple effects, spring physics animations, and a fully integrated notification badge system. It seamlessly adapts to system themes and supports circular (radial) geometry.

Image Content

Configure the primary visual content of the button for different interaction states.

Property	Type	Description & Usage Example
`ImageNormal`	Image	btn.ImageNormal = Resources.Icon_Gray; The default image displayed when idle.
`ImageHover`	Image	btn.ImageHover = Resources.Icon_Color; Image displayed when the mouse cursor enters the control.
`ImageDown`	Image	btn.ImageDown = Resources.Icon_Pressed; Image displayed while the mouse button is held down.
`PlaceholderImage`	Image	btn.PlaceholderImage = Resources.Default; Fallback image used if the specific state image is null.
`ImageSizing`	ImageSizingMode	btn.ImageSizing = ImageSizingMode.Zoom; Controls how the image fits the button: `Original`: Renders at actual size. `Stretch`: Distorts to fill the bounds. `Zoom`: Scales proportionally to fit (contain).

Notification Badge

An animated badge system for displaying counts or alerts directly on the button.

Property	Type	Description & Usage Example
`BadgeValue`	int	btn.BadgeValue = 5; The number to display. • 0 or less: Badge is hidden (fades out). • 1-99: Displays the number. • 100+: Displays as "99+".
`BadgePosition`	BadgePositionExt	btn.BadgePosition = BadgePositionExt.TopRight; Corner placement: TopLeft, TopRight, BottomLeft, BottomRight.
`BadgeColor`	Color	btn.BadgeColor = Color.Red;
`BadgeTextColor`	Color	btn.BadgeTextColor = Color.White;
`BadgeAnimationEnabled`	bool	btn.BadgeAnimationEnabled = true; If true, the badge scales in/out smoothly when the value changes.
`BadgeAnimationSpeed`	float	btn.BadgeAnimationSpeed = 0.15f; Speed factor for the badge appearance animation.

Animations & Effects

Settings for interaction feedback, physics, and motion.

Property	Type	Description & Usage Example
`RippleEnabled`	bool	btn.RippleEnabled = true; Enables the material design expanding circle effect on click.
`RippleColor`	Color	btn.RippleColor = Color.FromArgb(50, Color.Black);
`SpringEffectEnabled`	bool	btn.SpringEffectEnabled = true; Adds a "spring" physics simulation that scales the button up/down on click/release.
`AnimationSpeed`	float	btn.AnimationSpeed = 0.15f; Global speed multiplier for hover/press scale transitions.

Styling & Geometry

Control the shape, background, and borders.

Property	Type	Description & Usage Example
`MakeRadial`	bool	btn.MakeRadial = true; Automatically calculates corner radii to make the button perfectly circular.
`BackgroundFillColor`	Color	btn.BackgroundFillColor = Color.Transparent;
`BorderColor`	Color	btn.BorderColor = Color.Black;
`BorderThickness`	int	btn.BorderThickness = 2;
`CornerRadiusTopLeft`	float	btn.CornerRadiusTopLeft = 10f;

Behavior & System Theme

Interaction rules and OS theme integration.

Property	Type	Description & Usage Example
`IsReadOnly`	bool	btn.IsReadOnly = true; Disables clicks. Triggers Shake/Beep if interacted with.
`CanShake`	bool	btn.CanShake = true; Shakes the button when clicked in Read-Only mode.
`TrackSystemTheme`	bool	btn.TrackSystemTheme = true; Monitors Windows Registry for Light/Dark mode changes and fires the `SystemThemeChanged` event.
`CurrentSystemTheme`	SystemTheme	var theme = btn.CurrentSystemTheme; Read-only. Returns current OS theme (Light/Dark).

Events

SystemThemeChanged

// Fired when TrackSystemTheme is true and OS theme changes.
btn.SystemThemeChanged += (s, e) => 
{
                if (e.NewTheme == SystemTheme.Dark)
                ApplyDarkMode();
                else
                ApplyLightMode();
};

BadgeValueChanged

// Fired when BadgeValue property is updated.
btn.BadgeValueChanged += (s, e) => 
{
                Console.WriteLine($"New Badge Count: {e.NewValue}");
};

Designer Support

The control includes a comprehensive Smart Tag panel for rapid configuration.

Category	Features
`Appearance`	Theme Presets: Light, Dark, Primary, Secondary, Success, Warning, Error. Make Circular: Toggle radial geometry. Image Sizing: Switch between Zoom/Stretch/Original.
`Badge`	Configure Value, Position, and Color directly.
`Actions`	Assign Images: Opens a custom dialog to batch-assign Normal, Hover, Pressed, and Placeholder images. Custom Corners: Fine-tune individual corner radii via a visual slider dialog.
`Utilities`	Copy/Paste Settings: Transfer visual styles between buttons.

Detailed Examples

Example 1: Social Media Link

A circular button for a social link with a specific brand color.

C# - Social Button

public void SetupFacebookButton()
{
    btnFB.ImageNormal = Resources.Facebook_Gray;
    btnFB.ImageHover = Resources.Facebook_Blue;
    
                // Circular Geometry
    btnFB.MakeRadial = true;
    btnFB.ImageSizing = ImageSizingMode.Zoom;
    
                // Brand Ripple
    btnFB.RippleEnabled = true;
    btnFB.RippleColor = Color.FromArgb(66, 103, 178); // FB Blue
    
                // Link action
    btnFB.Click += (s, e) => Process.Start("https://facebook.com");
}

Example 2: Shopping Cart with Badge

Using the badge system to show cart items.

C# - Cart Button

public void UpdateCart(int itemCount)
{
    btnCart.BadgeValue = itemCount;
    
                // Visual feedback when updating
                if (itemCount > 0)
    {
        btnCart.BadgeColor = Color.Red;
        btnCart.SpringEffectEnabled = true; // Pop effect on click
    }
                else
    {
        btnCart.BadgeColor = Color.Transparent;
    }
}

Example 3: Theme-Aware Action Button

A button that adapts its icon based on the OS theme (Light/Dark).

C# - Theme Aware

public void InitializeThemeAwareButton()
{
    btnAction.TrackSystemTheme = true;
    
    btnAction.SystemThemeChanged += (s, e) =>
    {
                if (e.NewTheme == SystemTheme.Dark)
        {
            btnAction.ImageNormal = Resources.Action_White;
            btnAction.BackgroundFillColor = Color.FromArgb(45, 45, 45);
        }
                else
        {
            btnAction.ImageNormal = Resources.Action_Black;
            btnAction.BackgroundFillColor = Color.WhiteSmoke;
        }
    };
    
                // Force initial check
                var current = btnAction.CurrentSystemTheme;
                // ... trigger initial logic
}