Interactive States

Interactive States add dynamic visual feedback by adjusting the panel's appearance in response to user actions such as hovering, clicking, or disabling.

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.

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.

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