Siticone Expressive Image Group Button

The SiticoneExpressiveImageGroupButton is a specialized variant of the Expressive Image Button designed for selection scenarios. It acts like a Radio Button for images. When multiple buttons share the same GroupName, only one can be selected at a time. It features a dedicated Selected State with its own image and color properties, alongside the standard Hover/Press interactions and "Jelly" physics.

Grouping & Selection

Properties controlling the radio-button-like behavior of the control.

Property	Type	Description & Usage Example
`GroupName`	string	grpBtn.GroupName = "FilterOptions"; The identifier for the group. All buttons with the same GroupName in the same parent container will be mutually exclusive (only one selected at a time).
`IsSelected`	bool	grpBtn.IsSelected = true; Gets or sets the selection state. Setting this to true automatically deselects other buttons in the same group.

Image States

Define images for Idle, Hover, Press, and the specific Selected state.

Property	Type	Description & Usage Example
`IdleImage`	Image	grpBtn.IdleImage = Resources.Filter_Gray; Base image when unselected and inactive.
`HoverImage`	Image	grpBtn.HoverImage = Resources.Filter_Blue; Fades in on mouse hover (if not selected).
`PressImage`	Image	grpBtn.PressImage = Resources.Filter_Dark; Fades in on press.
`SelectedImage`	Image	grpBtn.SelectedImage = Resources.Filter_White; Unique to Group Button: The image displayed permanently while the button is in the `IsSelected` state.
`ImageSize`	Size	grpBtn.ImageSize = new Size(24, 24); Render size for all state images.

Appearance & Colors

Customize the background appearance for standard and selected states.

Property	Type	Description & Usage Example
`FillColor`	Color	grpBtn.FillColor = Color.WhiteSmoke; Background color when unselected.
`SelectedFillColor`	Color	grpBtn.SelectedFillColor = Color.DodgerBlue; Background color when selected.
`SelectedFillColor2`	Color	grpBtn.SelectedFillColor2 = Color.RoyalBlue; Secondary background color for gradient when selected.
`HoverFillColor`	Color	grpBtn.HoverFillColor = Color.AliceBlue; Background color on hover (unselected).

Jelly Physics

Includes the same "Expressive" physics engine as the standard Image Button.

Property	Type	Description & Usage Example
`EnableRandomJellyEffect`	bool	grpBtn.EnableRandomJellyEffect = true; Creates organic, randomized wobble on click.
`RoundedMorphThreshold`	int	grpBtn.RoundedMorphThreshold = 20; Threshold for enabling jelly physics based on radius.
`LiquidEffect`	bool	grpBtn.LiquidEffect = true; Enables fluid wave simulation for transitions.

Public Methods

Selection & Interaction

// Selects this button (and automatically deselects others in the group).
grpBtn.Select();

// Deselects this button.
grpBtn.Deselect();

// Simulates a full click with animation.
grpBtn.PerformClickEx();

Events

Selection Changed Event

// Fires when the selection state changes (Selected or Deselected).
grpBtn.SelectionChanged += (s, e) => 
{
                if (e.IsSelected)
    {
                Debug.WriteLine($"Button in group '{e.GroupName}' was selected via {e.Source}.");
    }
};

Detailed Usage Examples

Example 1: Tool Palette (Brush Selection)

Creating a radio-style group for selecting a drawing tool.

C# - Tool Group

public void SetupToolPalette()
{
                // Common settings for all buttons
                void Configure(SiticoneExpressiveImageGroupButton btn, Image icon)
    {
        btn.GroupName = "Tools";
        btn.Size = new Size(50, 50);
        btn.BorderRadius = 15;
        
                // Colors
        btn.FillColor = Color.WhiteSmoke;
        btn.SelectedFillColor = Color.FromArgb(220, 230, 255); // Light Blue
        
                // Images
        btn.IdleImage = ImageOps.Grayscale(icon);
        btn.SelectedImage = icon; // Full color when selected
    }

                Configure(btnBrush, Properties.Resources.Brush);
                Configure(btnPen, Properties.Resources.Pen);
                Configure(btnEraser, Properties.Resources.Eraser);
    
                // Select default
    btnBrush.Select();
}

Example 2: Tab Bar Navigation

Using group buttons as a modern, icon-based tab bar.

C# - Tab Navigation

public void SetupTabBar()
{
                // Configure 'Home' Tab
    btnHome.GroupName = "MainTabs";
    btnHome.IdleImage = Properties.Resources.Home_Outline;
    btnHome.SelectedImage = Properties.Resources.Home_Filled;
    
                // Configure 'Settings' Tab
    btnSettings.GroupName = "MainTabs";
    btnSettings.IdleImage = Properties.Resources.Cog_Outline;
    btnSettings.SelectedImage = Properties.Resources.Cog_Filled;
    
                // Handle Selection
    btnHome.SelectionChanged += (s, e) => 
    {
                if (e.IsSelected) ShowPage("Home");
    };
    
    btnSettings.SelectionChanged += (s, e) => 
    {
                if (e.IsSelected) ShowPage("Settings");
    };
}