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
// 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
// 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.
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.
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;
}