Siticone Collapsible Panel

The SiticoneCollapsiblePanel is a space-saving container control that allows users to expand or collapse content sections with smooth animations. It features a customizable header with title, image, and chevron support, along with built-in theme presets for rapid UI development.

Header Configuration

Properties to customize the look and content of the panel's header bar.

Property	Type	Description & Usage Example
`Title`	string	collapsiblePanel.Title = "Advanced Settings"; The text displayed in the header area.
`Image`	Image	collapsiblePanel.Image = Properties.Resources.GearIcon; Optional icon displayed to the left of the title.
`HeaderFont`	Font	collapsiblePanel.HeaderFont = new Font("Segoe UI", 10, FontStyle.Bold); The font style used for the title text.
`ImageLeftMargin`	int	collapsiblePanel.ImageLeftMargin = 10; Spacing between the left edge of the header and the image.
`ImageTextGap`	int	collapsiblePanel.ImageTextGap = 8; Spacing between the image and the title text.

Appearance & Themes

Styling options including built-in presets and manual color overrides.

Property	Type	Description & Usage Example
`Theme`	ThemePreset	collapsiblePanel.Theme = CollapsiblePanelThemePreset.Dark; Applies a pre-defined color scheme. Options include: `Blue`, `Green`, `Red`, `Dark`, `Light`, `Success`, `Warning`, etc.
`HeaderBackColor`	Color	collapsiblePanel.HeaderBackColor = Color.FromArgb(40, 40, 40); Manual override for the header background color.
`HeaderForeColor`	Color	collapsiblePanel.HeaderForeColor = Color.White; Manual override for the header text color.
`ChevronColor`	Color	collapsiblePanel.ChevronColor = Color.LightGray; Color of the expand/collapse arrow icon on the right.

Behavior & Animation

Controls how the panel expands, collapses, and animates.

Property	Type	Description & Usage Example
`IsExpanded`	bool	collapsiblePanel.IsExpanded = true; Gets or sets the current state. Setting this programmatically triggers the animation.
`EnableAnimation`	bool	collapsiblePanel.EnableAnimation = true; If true, the panel smoothly slides open/closed. If false, it toggles instantly.
`AnimationSpeed`	int	collapsiblePanel.AnimationSpeed = 25; Controls the speed of the slide effect. Higher values result in faster animation.
`ContentPanel`	Panel	collapsiblePanel.ContentPanel.Controls.Add(myControl); The inner container where child controls should be added. Note: In the Designer, you can simply drop controls onto the body.

Public Methods

Toggle()

// Switches the state from Expanded to Collapsed, or vice-versa.
collapsiblePanel.Toggle();

Expand()

// Forces the panel to open. Does nothing if already expanded.
collapsiblePanel.Expand();

Collapse()

// Forces the panel to close. Does nothing if already collapsed.
collapsiblePanel.Collapse();

Events

Event	Description
`Expanding`	Fired before the panel starts to open. Includes `CancelEventArgs` to prevent the action.
`Expanded`	Fired after the expansion animation is fully complete.
`Collapsing`	Fired before the panel starts to close. Includes `CancelEventArgs` to prevent the action.
`Collapsed`	Fired after the collapse animation is fully complete.

Detailed Usage Examples

Example 1: Basic Setup & Customization

Creates a simple collapsible panel with a custom icon and dark theme.

C# - Basic Initialization

private void InitializePanel()
{
                // Basic configuration
    siticoneCollapsiblePanel1.Title = "User Profile";
    siticoneCollapsiblePanel1.Image = Properties.Resources.UserIcon;
    
                // Apply a dark theme preset
    siticoneCollapsiblePanel1.Theme = CollapsiblePanelThemePreset.Dark;
    
                // Adjust animation
    siticoneCollapsiblePanel1.EnableAnimation = true;
    siticoneCollapsiblePanel1.AnimationSpeed = 30;
    
                // Start expanded
    siticoneCollapsiblePanel1.IsExpanded = true;
}

Example 2: Creating an Accordion

An accordion ensures only one panel is open at a time. This logic links multiple panels together.

C# - Accordion Logic

private void SetupAccordion()
{
                // List of all panels in the accordion group
                var panels = new[] { panelAccount, panelSettings, panelNotifications };

                foreach (var pnl in panels)
    {
                // Subscribe to the Expanding event
        pnl.Expanding += (sender, e) =>
        {
                var current = (SiticoneCollapsiblePanel)sender;
            
                // Collapse all OTHER panels
                foreach (var other in panels)
            {
                if (other != current && other.IsExpanded)
                {
                    other.Collapse();
                }
            }
        };
    }
}

Example 3: Dynamic Content Loading

Load content into the panel only when it is expanded to save memory and improve startup performance.

C# - Lazy Loading

private bool _isContentLoaded = false;

private void siticoneCollapsiblePanel1_Expanding(object sender, CancelEventArgs e)
{
                if (!_isContentLoaded)
    {
                // Simulate loading data controls
                var label = new Label { 
            Text = "Data Loaded: " + DateTime.Now, 
            Dock = DockStyle.Top,
            Padding = new Padding(10)
        };
        
                // Important: Add to ContentPanel, not the control itself
        siticoneCollapsiblePanel1.ContentPanel.Controls.Add(label);
        
        _isContentLoaded = true;
    }
}

Example 4: Custom Styling (Non-Theme)

Manually overriding colors to match a specific brand identity instead of using presets.

C# - Custom Style

private void ApplyBrandColors(SiticoneCollapsiblePanel pnl)
{
                // Brand Colors: Deep Purple and Gold
    pnl.Theme = CollapsiblePanelThemePreset.Default; // Reset first
    
    pnl.HeaderBackColor = Color.FromArgb(60, 20, 80);
    pnl.HeaderForeColor = Color.Gold;
    pnl.ChevronColor = Color.Gold;
    
    pnl.HeaderFont = new Font("Segoe UI", 11f, FontStyle.Bold);
    
                // Content area background
    pnl.ContentPanel.BackColor = Color.WhiteSmoke;
}