Siticone Logo
Siticone UI
DOCS
v2025.12.15
Docs Expressive Group Button

Siticone Expressive Group Button

The SiticoneExpressiveGroupButton allows you to create cohesive, text-based choice groups. It acts as a Radio Button wrapped in a modern, morphing button UI. When multiple buttons share the same GroupName, they enforce mutual exclusivity (only one selected at a time). It combines the text-focused layout of a standard button with the advanced "Jelly" physics and selection states of the Expressive suite.

Grouping & Selection

Core properties for managing the selection state and grouping logic.

Property Type Description & Usage Example
GroupName string grp.GroupName = "ViewMode"; The unique identifier for the group. Buttons with the same GroupName in the same parent will toggle each other off when clicked.
IsSelected bool grp.IsSelected = true; Controls the selection state. Setting this to true visually activates the "Selected" colors and deselects other group members.

Appearance & Colors

Customize the visual feedback for both Idle and Selected states.

Property Type Description & Usage Example
FillColor Color grp.FillColor = Color.WhiteSmoke; Background color when the button is NOT selected.
SelectedFillColor Color grp.SelectedFillColor = Color.DodgerBlue; Background color when the button IS selected.
SelectedForeColor Color grp.SelectedForeColor = Color.White; Text color when the button IS selected.
SelectedBorderColor Color grp.SelectedBorderColor = Color.Blue; Border color when the button IS selected.
TransitionSpeed float grp.TransitionSpeed = 0.15f; Speed of the color fade animation (0.01 to 1.0).

Expressive Physics

Includes the same "Liquid/Jelly" physics engine as other Expressive controls for organic interactions.

Property Type Description & Usage Example
LiquidEffect bool grp.LiquidEffect = true; Enables the fluid wave simulation for shape transitions.
SqueezeOnPress bool grp.SqueezeOnPress = true; If true, the button indents slightly when pressed.
EnableExpressions bool grp.EnableExpressions = true; Master switch for all shape morphing animations.

Public Methods

Selection & Interaction
// Manually select this button (deselects others).
grpButton.Select();

// Deselect this button (if logic allows, e.g. optional groups).
grpButton.Deselect();

// Simulate a click with animation.
grpButton.PerformClickEx();

Events

Selection Changed Event
// Occurs when the selection state changes.
grpButton.SelectionChanged += (s, e) => 
{
                if (e.IsSelected)
    {
                Debug.WriteLine($"Active Group: {e.GroupName}");
                LoadCategory(grpButton.Text);
    }
};

Detailed Usage Examples

Example 1: Segmented Control (View Switcher)

Creating a classic "List | Grid | Map" view switcher using group buttons.

C# - View Switcher
public void SetupViewSwitcher()
{
                // Helper to style the segments
                void StyleSegment(SiticoneExpressiveGroupButton btn)
    {
        btn.GroupName = "ViewModes";
        btn.Size = new Size(100, 40);
        btn.BorderRadius = 6;
        
                // Colors
        btn.FillColor = Color.White;
        btn.ForeColorCustom = Color.Gray;
        btn.SelectedFillColor = Color.FromArgb(60, 60, 60);
        btn.SelectedForeColor = Color.White;
    }

                StyleSegment(btnList);
                StyleSegment(btnGrid);
                StyleSegment(btnMap);
    
                // Set default
    btnList.IsSelected = true;
}

Example 2: Survey Choice (Yes/No)

Using rounded buttons for a binary choice.

C# - Survey Options
public void SetupSurvey()
{
    btnYes.Text = "Yes";
    btnYes.GroupName = "Q1";
    btnYes.SelectedFillColor = Color.SeaGreen;
    btnYes.LeftIcon = Properties.Resources.Check;
    
    btnNo.Text = "No";
    btnNo.GroupName = "Q1";
    btnNo.SelectedFillColor = Color.Crimson;
    btnNo.LeftIcon = Properties.Resources.Cross;
    
                // Add liquid effect for fun interaction
    btnYes.LiquidEffect = true;
    btnNo.LiquidEffect = true;
}