Siticone Material Expansion Panel

The SiticoneMaterialExpansionPanel is a versatile container control that implements the Material Design expansion panel behavior. It features a header that can be clicked to expand or collapse the content area, with smooth animations, a secondary description line, a notification badge, and an optional button action bar. It is ideal for settings pages, FAQ sections, or complex forms that need to be organized into collapsible groups.

Core Behavior

Control the expansion state and general layout of the panel.

Property	Type	Description & Usage Example
`Expanded`	bool	panel.Expanded = true; Gets or sets whether the content area is visible. Toggling this triggers the expand/collapse animation.
`HeaderText`	string	panel.HeaderText = "Account Settings"; The main title text displayed in the header bar.
`DescriptionText`	string	panel.DescriptionText = "Manage your password and email"; Secondary text displayed below the header. Useful for providing context or summary information.
`ShowDescription`	bool	panel.ShowDescription = true; Toggles the visibility of the secondary description area.
`EnableCollapseExpandAnimation`	bool	panel.EnableCollapseExpandAnimation = true; Enables smooth sliding animation when opening or closing the panel.

Header Styling

Customize the appearance of the interactive header area.

Property	Type	Description & Usage Example
`HeaderHeight`	int	panel.HeaderHeight = 60; The height of the clickable header strip in pixels.
`HeaderBackColor`	Color	panel.HeaderBackColor = Color.White; Background color of the header in its idle state.
`HeaderHoverBackColor`	Color	panel.HeaderHoverBackColor = Color.WhiteSmoke; Background color of the header when the mouse hovers over it.
`HeaderForeColor`	Color	panel.HeaderForeColor = Color.Black; Color of the header text.
`ShowChevron`	bool	panel.ShowChevron = true; Shows the arrow icon indicating expansion state (Up/Down).
`ChevronColor`	Color	panel.ChevronColor = Color.Gray; Color of the expansion arrow icon.

Action Buttons Panel

The panel includes an optional bottom bar with "Save" and "Cancel" buttons (or custom text), adhering to Material Design guidelines for forms.

Property	Type	Description & Usage Example
`ShowButtonPanel`	bool	panel.ShowButtonPanel = true; Shows the bottom area containing action buttons.
`SaveButtonText`	string	panel.SaveButtonText = "APPLY"; Custom text for the primary action button.
`CancelButtonText`	string	panel.CancelButtonText = "DISCARD"; Custom text for the secondary action button.
`ShowButtonSeparator`	bool	panel.ShowButtonSeparator = true; Draws a subtle line separating the content from the button actions.

Notification Badge

Display a numeric badge or alert icon on the header (e.g., "3 updates").

Property	Type	Description & Usage Example
`BadgeValue`	int	panel.BadgeValue = 5; The number displayed in the badge. 0 automatically hides the badge. Values > 999 show as "999+".
`BadgeColor`	Color	panel.BadgeColor = Color.Red; Background color of the notification badge.
`BadgeAnimationType`	AnimationType	panel.BadgeAnimationType = FadeAndScale; Animation style when showing/hiding the badge: `None`, `Fade`, `Scale`, or `FadeAndScale`.

Interaction & Feedback

Configure ripple effects, read-only states, and user feedback.

Property	Type	Description & Usage Example
`EnableMaterialRipple`	bool	panel.EnableMaterialRipple = true; Enables the Google-style ink ripple effect on clicks.
`IsReadOnly`	bool	panel.IsReadOnly = false; Prevents the user from expanding/collapsing the panel.
`CanShake`	bool	panel.CanShake = true; If true, the panel shakes when clicked in ReadOnly mode to indicate it is locked.

Public Methods

Expand() / Collapse() / Toggle()

// Programmatically open the panel
expansionPanel1.Expand();

// Programmatically close the panel
expansionPanel1.Collapse();

// Manually set the expanded height
expansionPanel1.SetExpandedHeight(500);

Events

Event Handling

// 1. Expanded State Changed
// Fires when the panel opens or closes.
panel.ExpandedChanged += (s, e) => 
{
                if (e.IsExpanded) 
                Console.WriteLine("Panel Opened");
};

// 2. Save Button Click
// Fires when the user clicks the built-in Save button.
panel.SaveButtonClick += (s, e) => 
{
                SaveChanges();
    panel.Collapse();
};

// 3. Cancel Button Click
panel.CancelButtonClick += (s, e) => 
{
                RevertChanges();
    panel.Collapse();
};

Detailed Usage Examples

Example 1: FAQ Section

Creating a collapsible FAQ item with descriptions.

C# - FAQ Setup

private SiticoneMaterialExpansionPanel CreateFaqItem(string question, string answer)
{
                var panel = new SiticoneMaterialExpansionPanel
    {
        HeaderText = question,
        DescriptionText = "Click to reveal answer",
        
                // Hide button panel for pure information display
        ShowButtonPanel = false,
        
                // Styling
        HeaderHeight = 50,
        Expanded = false,
        Dock = DockStyle.Top
    };

                var answerLabel = new Label 
    { 
        Text = answer, 
        Dock = DockStyle.Fill,
        Padding = new Padding(20)
    };
    
    panel.Controls.Add(answerLabel);
    
                return panel;
}

Example 2: User Settings with Validation

A settings panel that validates input before closing.

C# - Settings Panel

private void SetupSettingsPanel(SiticoneMaterialExpansionPanel panel)
{
    panel.HeaderText = "Profile Settings";
    panel.SaveButtonText = "UPDATE";
    
    panel.SaveButtonClick += (s, e) => 
    {
                if (ValidateInputs())
        {
                SaveData();
            panel.Collapse();
                MessageBox.Show("Profile Updated");
        }
                else
        {
                // Show error badge
            panel.BadgeValue = 1; 
            panel.BadgeColor = Color.Red;
        }
    };
}