Selection Indicator

Selection Indicator provides a visual cue on the left side of the button to denote its active or selected state.

Overview

The Selection Indicator feature of the SiticoneDashboardButton control highlights the button’s selected state by displaying a colored, animated indicator along its left edge. This feature helps users easily identify the currently active button, particularly in navigation menus or grouped button scenarios.

---

Properties Table

Property	Type	Default Value	Description
ShowLeftIndicator	bool	true	Controls the visibility of the left-side selection indicator on the button.
IndicatorColor	Color	Color.FromArgb(0, 123, 255)	Sets the base color of the selection indicator.
IndicatorGradientColor	Color	Color.FromArgb(0, 183, 255)	Sets a secondary color used to create a gradient effect on the indicator.
IndicatorWidth	int	4	Determines the width (in pixels) of the selection indicator, with valid values ranging from 0 to 8.

---

Code Examples

Basic Integration

The following example demonstrates how to instantiate the SiticoneDashboardButton control with the Selection Indicator enabled and customize its appearance:

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

public class SelectionIndicatorDemoForm : Form
{
    public SelectionIndicatorDemoForm()
    {
        // Create a new instance of SiticoneDashboardButton
        SiticoneDashboardButton dashboardButton = new SiticoneDashboardButton
        {
            Text = "Home",
            Size = new Size(250, 45),
            Location = new Point(50, 50),
            // Ensure the left-side indicator is visible
            ShowLeftIndicator = true,
            // Set a custom indicator color and gradient color
            IndicatorColor = Color.FromArgb(0, 120, 200),
            IndicatorGradientColor = Color.FromArgb(0, 180, 240),
            // Set the indicator width (0-8)
            IndicatorWidth = 4
        };

        // Mark the button as selected to activate the indicator
        dashboardButton.IsSelected = true;

        // Add the button to the form
        Controls.Add(dashboardButton);
    }

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

Advanced Customization

In this example, the selection indicator is used in a scenario where multiple buttons are grouped together. When one button is selected, the others are deselected automatically. The example demonstrates how to dynamically change the indicator properties based on user interactions.

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

public class GroupedButtonsForm : Form
{
    public GroupedButtonsForm()
    {
        // Create multiple dashboard buttons for a navigation menu
        var dashboardButton1 = new SiticoneDashboardButton
        {
            Text = "Dashboard",
            Size = new Size(250, 45),
            Location = new Point(50, 50),
            ShowLeftIndicator = true,
            IndicatorColor = Color.FromArgb(0, 120, 200),
            IndicatorGradientColor = Color.FromArgb(0, 180, 240),
            IndicatorWidth = 4
        };

        var dashboardButton2 = new SiticoneDashboardButton
        {
            Text = "Settings",
            Size = new Size(250, 45),
            Location = new Point(50, 110),
            ShowLeftIndicator = true,
            IndicatorColor = Color.FromArgb(0, 120, 200),
            IndicatorGradientColor = Color.FromArgb(0, 180, 240),
            IndicatorWidth = 4
        };

        // Handle click events to update the selection state
        dashboardButton1.Click += (sender, e) =>
        {
            dashboardButton1.IsSelected = true;
            dashboardButton2.IsSelected = false;
        };

        dashboardButton2.Click += (sender, e) =>
        {
            dashboardButton2.IsSelected = true;
            dashboardButton1.IsSelected = false;
        };

        // Add the buttons to the form
        Controls.Add(dashboardButton1);
        Controls.Add(dashboardButton2);
    }

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

---

Key Points

Aspect	Details
Visual Cue	The selection indicator offers a clear visual marker to indicate which button is active.
Customizable Appearance	Developers can customize the indicator’s colors and width to match the application’s design theme.
Integrated with State	The indicator automatically animates in tandem with the button’s selection state changes.
Group Behavior	In grouped button scenarios, setting one button as selected will deselect the others automatically.

---

Best Practices

Practice	Recommendation
Consistent UI Design	Use similar indicator settings across grouped buttons to provide a uniform user experience.
Use Subtle Animations	Adjust indicator width and colors to ensure that the indicator enhances rather than distracts from the content.
Dynamic Updates	Consider using event handlers to update the indicator properties dynamically, enhancing interactive feedback.
Test Across Themes	Verify that the indicator works well with different background colors and themes, ensuring accessibility.

---

Common Pitfalls

Pitfall	How to Avoid
Overly Bold Indicator	Setting the IndicatorWidth too high can be visually overwhelming; stick to values between 0 and 8.
Clashing Colors	Ensure that the chosen IndicatorColor and IndicatorGradientColor are in harmony with the overall UI color scheme.
Ignoring State Synchronization	When using grouped buttons, failing to correctly update the IsSelected state may result in multiple active indicators.
Neglecting User Feedback	Over-customizing without testing can lead to an indicator that does not provide clear user feedback.

---

Usage Scenarios

Scenario	Example Use Case
Navigation Menus	Highlight the currently active section in a sidebar or top navigation menu using the selection indicator.
Grouped Button Controls	Use in scenarios where only one button out of several can be active at a time, such as in tab controls.
Interactive Dashboards	Emphasize user selection in interactive dashboards where visual feedback is crucial for usability.

---

Review

The Selection Indicator feature is seamlessly integrated into the SiticoneDashboardButton control, providing a clear, animated visual cue that enhances user navigation and interaction. With customizable properties for visibility, color, and width, this feature is ideal for grouped button scenarios and dynamic interfaces. The provided code examples and tables detail its integration, common pitfalls, and best practices for effective use.

---

Summary

Selection Indicator in the SiticoneDashboardButton control serves as a dynamic visual marker to denote the active state of a button. With properties such as ShowLeftIndicator, IndicatorColor, IndicatorGradientColor, and IndicatorWidth, developers can easily integrate this feature to create intuitive and responsive navigation interfaces. Following the documented best practices and usage scenarios will ensure that the indicator is implemented efficiently and enhances the overall user experience.

---

Additional Resources

Resource	Description	Link/Reference
Control Source Code	Detailed implementation of the Selection Indicator feature.	Refer to the provided source code documentation.
.NET WinForms Guidelines	Official Microsoft guidelines for custom control development.	https://docs.microsoft.com/dotnet/desktop/winforms/

This comprehensive documentation should assist developers in understanding, integrating, and customizing the Selection Indicator feature of the SiticoneDashboardButton control in their .NET WinForms applications.