# Interactive States

## Overview

The Interactive States feature of the SiticoneAdvancedPanel control provides state-based styling for user interactions. Developers can define different background and border colors for hover, active, and disabled states, ensuring that the panel communicates its status clearly to users.

***

### Property Details

| Property Name       | Description                                                     | Data Type | Default Value |
| ------------------- | --------------------------------------------------------------- | --------- | ------------- |
| EnableStateStyles   | Enables state-based styling for interactive feedback.           | bool      | false         |
| HoverBackColor      | Sets the background color when the mouse hovers over the panel. | Color     | Empty (none)  |
| HoverBorderColor    | Sets the border color when the mouse hovers over the panel.     | Color     | Empty (none)  |
| ActiveBackColor     | Sets the background color when the panel is active or clicked.  | Color     | Empty (none)  |
| ActiveBorderColor   | Sets the border color when the panel is active or clicked.      | Color     | Empty (none)  |
| DisabledBackColor   | Defines the background color when the panel is disabled.        | Color     | Empty (none)  |
| DisabledBorderColor | Defines the border color when the panel is disabled.            | Color     | Empty (none)  |

***

### Code Examples

#### Basic Interactive States Configuration

This example demonstrates how to enable interactive state styling and set distinct colors for hover and active states.

```csharp
using System;
using System.Drawing;
using System.Windows.Forms;
using SiticoneNetFrameworkUI;

namespace DemoApp
{
    public class MainForm : Form
    {
        public MainForm()
        {
            // Create an instance of SiticoneAdvancedPanel with interactive state styling enabled
            var interactivePanel = new SiticoneAdvancedPanel
            {
                EnableStateStyles = true,
                HoverBackColor = Color.LightBlue,
                HoverBorderColor = Color.Blue,
                ActiveBackColor = Color.LightGreen,
                ActiveBorderColor = Color.Green,
                DisabledBackColor = Color.Gray,
                DisabledBorderColor = Color.DarkGray,
                BorderColor = Color.Black,
                BorderWidth = 2f,
                TopLeftRadius = 10,
                TopRightRadius = 10,
                BottomLeftRadius = 10,
                BottomRightRadius = 10,
                Size = new Size(300, 200),
                Location = new Point(50, 50),
                BackColor = Color.White
            };

            // Optionally disable the panel to see the disabled state styling
            // interactivePanel.Enabled = false;

            Controls.Add(interactivePanel);
        }

        [STAThread]
        public static void Main()
        {
            Application.EnableVisualStyles();
            Application.Run(new MainForm());
        }
    }
}
```

#### Dynamic State Changes

In this sample, state styling properties are modified at runtime to simulate theme changes or user-driven interactions.

```csharp
// Assume 'interactivePanel' is an instance of SiticoneAdvancedPanel
private void UpdateInteractiveStates(bool isDarkMode)
{
    if (isDarkMode)
    {
        interactivePanel.HoverBackColor = Color.DarkSlateGray;
        interactivePanel.HoverBorderColor = Color.LightGray;
        interactivePanel.ActiveBackColor = Color.DimGray;
        interactivePanel.ActiveBorderColor = Color.White;
        interactivePanel.DisabledBackColor = Color.Black;
        interactivePanel.DisabledBorderColor = Color.Gray;
    }
    else
    {
        interactivePanel.HoverBackColor = Color.LightBlue;
        interactivePanel.HoverBorderColor = Color.Blue;
        interactivePanel.ActiveBackColor = Color.LightGreen;
        interactivePanel.ActiveBorderColor = Color.Green;
        interactivePanel.DisabledBackColor = Color.Gray;
        interactivePanel.DisabledBorderColor = Color.DarkGray;
    }

    interactivePanel.Invalidate(); // Redraw the panel with new state styling
}
```

***

### Key Points

| Aspect                  | Details                                                                                        |
| ----------------------- | ---------------------------------------------------------------------------------------------- |
| Dynamic Feedback        | Changes visual styles based on user interactions (hover, active, disabled) for clear feedback. |
| Customizable Appearance | Developers can assign distinct colors to the panel's background and border for each state.     |
| Real-time Updates       | State changes automatically trigger redrawing via Invalidate(), ensuring immediate feedback.   |

***

### Best Practices

| Recommendation          | Explanation                                                                                     |
| ----------------------- | ----------------------------------------------------------------------------------------------- |
| Consistent State Colors | Choose colors for hover, active, and disabled states that complement the overall UI theme.      |
| Test in Various Modes   | Ensure the panel appears correctly in all states, especially when dynamically switching themes. |
| Use Subtle Differences  | Avoid overly drastic color changes to maintain a professional, cohesive look.                   |

***

### Common Pitfalls

| Pitfall                       | How to Avoid It                                                                                              |
| ----------------------------- | ------------------------------------------------------------------------------------------------------------ |
| Inconsistent Visual Feedback  | Inadequate contrast between state colors can make interactions unclear; choose contrasting colors.           |
| Overcomplicating State Styles | Too many state-specific colors may confuse users; stick to a simple, intuitive palette.                      |
| Ignoring Disabled States      | Failing to define disabled state colors may lead to unexpected appearance when the panel is not interactive. |

***

### Usage Scenarios

| Scenario            | Description                                                                                 |
| ------------------- | ------------------------------------------------------------------------------------------- |
| Interactive Forms   | Enhance form panels with visual cues on hover and active states to improve usability.       |
| Dashboard Widgets   | Use dynamic state styling to indicate which panels are interactive or currently selected.   |
| Themed Applications | Easily switch state colors when applying different themes (e.g., dark mode vs. light mode). |

***

### Review

| Review Point         | Key Consideration                                                                              |
| -------------------- | ---------------------------------------------------------------------------------------------- |
| Flexibility          | Interactive States provide granular control over user feedback through customizable styling.   |
| User Engagement      | Clear visual feedback on user actions enhances the intuitiveness and responsiveness of the UI. |
| Seamless Integration | The state-based properties integrate effortlessly with other styling features of the control.  |

***

### Summary

Interactive States in the SiticoneAdvancedPanel control allow developers to define distinct visual styles for various user interaction scenarios. By specifying separate colors for hover, active, and disabled states, the panel offers immediate, intuitive feedback that enhances the overall user experience.

***

### Additional Sections

#### Troubleshooting

| Issue                  | Possible Cause                                                                           | Suggested Solution                                                             |
| ---------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ |
| Incorrect State Colors | The state properties might not be set or could be overridden by other styling settings.  | Ensure EnableStateStyles is true and assign appropriate colors for each state. |
| Delayed Visual Updates | Changes to state properties might not reflect immediately if Invalidate() is not called. | Explicitly call Invalidate() after updating state properties.                  |

***

#### Integration Checklist

| Step                | Description                                                                                                                 |
| ------------------- | --------------------------------------------------------------------------------------------------------------------------- |
| Enable State Styles | Set EnableStateStyles to true to activate interactive state styling.                                                        |
| Define State Colors | Configure HoverBackColor, HoverBorderColor, ActiveBackColor, ActiveBorderColor, DisabledBackColor, and DisabledBorderColor. |
| Test Interaction    | Validate that the panel responds correctly on mouse hover, click, and when disabled.                                        |
| Update Dynamically  | Implement runtime changes to state colors if supporting theme or mode switching, and ensure redrawing occurs.               |

***

This comprehensive documentation for Interactive States in the SiticoneAdvancedPanel control is designed to help developers implement and fine-tune state-based visual feedback. By following these guidelines and examples, you can create responsive, engaging user interfaces that communicate control status effectively.