Siticone Chip

The SiticoneChip is a compact, interactive element that represents an attribute, entity, or action. Commonly used for contacts, tags, filtering options, or choices, it supports avatars, close buttons, selection states, and mutual exclusivity via groups.

Visual Appearance

Customize the core look of the chip, including its shape, colors, and borders.

Property	Type	Description & Usage Example
`FillColor`	Color	chip.FillColor = Color.WhiteSmoke; The background color of the chip in its normal, unselected state.
`BorderColor`	Color	chip.BorderColor = Color.LightGray; The color of the outline border.
`BorderWidth`	int	chip.BorderWidth = 1; Thickness of the border in pixels. Set to 0 to remove the border.
`AccentColor`	Color	chip.AccentColor = Color.DodgerBlue; A primary theme color used for default checkmarks and other highlights.
`TopLeftRadius`	float	chip.TopLeftRadius = 15f; Controls the roundness of the top-left corner. Similar properties exist for all four corners.

Content & Avatar

Add rich content to the chip, such as images (avatars) and text.

Property	Type	Description
`Text`	string	The label displayed inside the chip.
`Avatar`	Image	chip.Avatar = Properties.Resources.UserIcon; An image displayed on the left side of the chip. The text automatically adjusts to make room.

Selection & Groups

Configure how chips behave when clicked, including toggle states and radio-button style groups.

Property	Type	Description & Usage Example
`EnableSelection`	bool	chip.EnableSelection = true; Allows the chip to toggle between selected and unselected states when clicked.
`IsSelected`	bool	chip.IsSelected = true; Gets or sets the current selection state.
`Group`	string	chip.Group = "CategoryFilter"; Assigns the chip to a named group. Only one chip within the same group can be selected at a time (Mutual Exclusion).
`ShowCheckmark`	bool	chip.ShowCheckmark = true; Displays an animated checkmark icon when the chip is selected.
`SelectedFillColor`	Color	chip.SelectedFillColor = Color.AliceBlue; Background color applied when IsSelected is true.

Close Button & Interaction

Add a dismissal action to the chip, useful for tags or temporary filters.

Property	Type	Description & Usage Example
`ShowCloseButton`	bool	chip.ShowCloseButton = true; Displays an "X" icon on the right side of the chip.
`AutoDisposeOnClose`	bool	chip.AutoDisposeOnClose = true; If true, the control automatically removes itself from the parent and disposes resources when the close button is clicked.
`CloseIconColor`	Color	chip.CloseIconColor = Color.DimGray; The color of the "X" symbol.

Animations & Effects

Polish the user experience with hover, ripple, and selection animations.

Property	Type	Description
`EnableRipples`	bool	Enables the Material Design-style ripple effect on click.
`EnableHoverAnimation`	bool	Smoothly transitions background colors when the mouse enters or leaves the control.
`SelectionAnimationDuration`	int	Duration (ms) for the selection transition (color fade and checkmark animation).

Performance

UltraFastPerformance

// Enable for lists containing hundreds of chips
myChip.UltraFastPerformance = true;

When enabled, this property disables heavy animations (ripples, smooth fades) and uses lower-quality rendering settings to ensure the UI remains responsive when displaying large numbers of chips.

Public Methods

PerformClick()

// Programmatically trigger a click
siticoneChip1.PerformClick();

Simulates a mouse click on the chip, triggering selection logic, animations, and the ChipClicked event.

Events

Event Handling

// Occurs when the main body of the chip is clicked
chip.ChipClicked += (sender, e) => {
                Console.WriteLine("Chip activated: " + chip.Text);
};

// Occurs when the Close (X) button is clicked
chip.CloseClicked += (sender, e) => {
                Console.WriteLine("Close button clicked");
                // Note: If AutoDisposeOnClose is true, the control may already be disposing.
};

// Occurs when the IsSelected property changes
chip.SelectionChanged += (sender, e) => {
                if (chip.IsSelected) {
                ApplyFilter(chip.Text);
    } else {
                RemoveFilter(chip.Text);
    }
};

Detailed Usage Examples

Example 1: Dynamic Tag Cloud

Create a list of removable tags in a FlowLayoutPanel.

C# - Tag Cloud

public void AddTag(string tagName, FlowLayoutPanel container)
{
    var chip = new SiticoneChip();
    chip.Text = tagName;
    chip.FillColor = Color.FromArgb(230, 230, 230);
    
                // Enable close button to remove tag
    chip.ShowCloseButton = true;
    chip.AutoDisposeOnClose = true; // Automatically removes from UI
    
                // Styling for a "Pill" shape
    chip.Height = 32;
    chip.TopLeftRadius = 16;
    chip.TopRightRadius = 16;
    chip.BottomLeftRadius = 16;
    chip.BottomRightRadius = 16;

    container.Controls.Add(chip);
}

Example 2: Filter Selection

A toggleable filter chip that shows a checkmark when active.

C# - Filter Chip

private void CreateFilterChip()
{
    var filter = new SiticoneChip();
    filter.Text = "Show Available Only";
    
                // Selection settings
    filter.EnableSelection = true;
    filter.ShowCheckmark = true;
    
                // Colors for active state
    filter.SelectedFillColor = Color.FromArgb(220, 240, 255);
    filter.SelectedTextColor = Color.DodgerBlue;
    filter.CheckmarkColor = Color.DodgerBlue;
    
    filter.SelectionChanged += (s, e) => {
                FilterGrid(filter.IsSelected);
    };
    
    this.Controls.Add(filter);
}

Example 3: Exclusive Choice Group

Using the Group property to create a radio-button style selection (e.g., choosing a size).

C# - Exclusive Selection

public void SetupSizeSelector()
{
                string groupName = "SizeGroup";
                string[] sizes = { "Small", "Medium", "Large" };

                foreach (var size in sizes)
    {
        var chip = new SiticoneChip();
        chip.Text = size;
        chip.EnableSelection = true;
        
                // Assigning the same group name enforces mutual exclusion
        chip.Group = groupName;
        
                // Hide checkmark for a cleaner "button" look
        chip.ShowCheckmark = false;
        chip.SelectedFillColor = Color.Black;
        chip.SelectedTextColor = Color.White;
        
        flowLayoutPanel1.Controls.Add(chip);
    }
}

Example 4: Contact Chip with Avatar

Displays a user profile image inside the chip.

C# - Contact Chip

private void AddContact(string name, Image profilePic)
{
    var contact = new SiticoneChip();
    contact.Text = name;
    contact.Avatar = profilePic;
    
                // Optional: Clicking the chip opens the profile
    contact.ChipClicked += (s, e) => OpenProfile(name);
    
                // Optional: Allow removing the contact
    contact.ShowCloseButton = true;
    
    contactsPanel.Controls.Add(contact);
}