> For the complete documentation index, see [llms.txt](https://docs-siticoneframework.gitbook.io/home/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs-siticoneframework.gitbook.io/home/net-framework-or-net-core-ui/input-controls/siticone-checkbox/container-states.md). # Container States ## **Overview** The **Container States** feature of the `SiticoneCheckBox` control allows developers to define and manipulate the container's visual appearance based on various states such as **Default**, **Hover**, **Pressed**, **Checked**, and **Indeterminate**. By leveraging these state-specific properties, you can provide clear visual feedback to users, enhancing interactivity and ensuring that the checkbox seamlessly integrates with your application's design language. #### **Key Properties** The following table outlines the primary **public properties** associated with the Container States of the `SiticoneCheckBox`. These properties enable comprehensive customization of the container's appearance based on its current state. | **Property** | **Type** | **Description** | | ------------------------------ | -------- | ----------------------------------------------------------------------------------------- | | `ContainerBackColor` | `Color` | Sets the background color of the container in its default state. | | `ContainerBorderColor` | `Color` | Sets the border color of the container in its default state. | | `ContainerBorderWidth` | `int` | Sets the border width of the container in pixels. | | `ContainerTopLeftRadius` | `int` | Sets the top-left corner radius of the container. | | `ContainerTopRightRadius` | `int` | Sets the top-right corner radius of the container. | | `ContainerBottomLeftRadius` | `int` | Sets the bottom-left corner radius of the container. | | `ContainerBottomRightRadius` | `int` | Sets the bottom-right corner radius of the container. | | `ContainerCheckedColor` | `Color` | Sets the container's background color when the checkbox is checked. | | `ContainerCheckedBorderColor` | `Color` | Sets the container's border color when the checkbox is checked. | | `ContainerHoverBackColor` | `Color` | Sets the container's background color when the mouse hovers over it. | | `ContainerPressedBackColor` | `Color` | Sets the container's background color when the checkbox is pressed (clicked). | | `ContainerCheckedHoverColor` | `Color` | Sets the container's background color when the checkbox is both checked and hovered over. | | `ContainerCheckedPressedColor` | `Color` | Sets the container's background color when the checkbox is both checked and pressed. | | `IndeterminateColor` | `Color` | Sets the container's background color when the checkbox is in an indeterminate state. | | `IndeterminateBorderColor` | `Color` | Sets the container's border color when the checkbox is in an indeterminate state. | #### **Detailed Property Descriptions** **1. `ContainerBackColor` (`Color`)** **Description:**\ Sets the container's background color in its default (normal) state, providing a consistent baseline appearance when the checkbox is neither interacted with nor in a checked or indeterminate state. **Usage:**\ Assign a `Color` value to define the container's default background. **Example:** ```csharp // Set container default background color to white siticoneCheckBox.ContainerBackColor = Color.White; // Set container default background color to light gray siticoneCheckBox.ContainerBackColor = Color.LightGray; ``` *** **2. `ContainerBorderColor` (`Color`)** **Description:**\ Sets the container's border color in its default state, defining the outline's visual characteristics when the checkbox is in its normal state. **Usage:**\ Assign a `Color` value to customize the container's default border color. **Example:** ```csharp // Set container default border color to dark gray siticoneCheckBox.ContainerBorderColor = Color.DarkGray; // Set container default border color to black siticoneCheckBox.ContainerBorderColor = Color.Black; ``` *** **3. `ContainerBorderWidth` (`int`)** **Description:**\ Sets the width of the container's border in pixels, allowing control over the thickness of the container's outline. **Usage:**\ Specify the border width in pixels. **Example:** ```csharp // Set container border width to 2 pixels siticoneCheckBox.ContainerBorderWidth = 2; // Increase container border width to 4 pixels for greater emphasis siticoneCheckBox.ContainerBorderWidth = 4; ``` *** **4. `ContainerTopLeftRadius` (`int`)** **Description:**\ Sets the top-left corner radius of the container, allowing for rounded or sharp corners based on the value. **Usage:**\ Assign an integer value representing the radius in pixels. **Example:** ```csharp // Set top-left corner radius to 10 pixels siticoneCheckBox.ContainerTopLeftRadius = 10; // Set top-left corner radius to 0 for a sharp corner siticoneCheckBox.ContainerTopLeftRadius = 0; ``` *** **5. `ContainerTopRightRadius` (`int`)** **Description:**\ Sets the top-right corner radius of the container, enabling customization of corner curvature. **Usage:**\ Assign an integer value representing the radius in pixels. **Example:** ```csharp // Set top-right corner radius to 10 pixels siticoneCheckBox.ContainerTopRightRadius = 10; // Set top-right corner radius to 0 for a sharp corner siticoneCheckBox.ContainerTopRightRadius = 0; ``` *** **6. `ContainerBottomLeftRadius` (`int`)** **Description:**\ Sets the bottom-left corner radius of the container, allowing for tailored corner shapes. **Usage:**\ Assign an integer value representing the radius in pixels. **Example:** ```csharp // Set bottom-left corner radius to 10 pixels siticoneCheckBox.ContainerBottomLeftRadius = 10; // Set bottom-left corner radius to 0 for a sharp corner siticoneCheckBox.ContainerBottomLeftRadius = 0; ``` *** **7. `ContainerBottomRightRadius` (`int`)** **Description:**\ Sets the bottom-right corner radius of the container, providing control over the curvature of the corner. **Usage:**\ Assign an integer value representing the radius in pixels. **Example:** ```csharp // Set bottom-right corner radius to 10 pixels siticoneCheckBox.ContainerBottomRightRadius = 10; // Set bottom-right corner radius to 0 for a sharp corner siticoneCheckBox.ContainerBottomRightRadius = 0; ``` *** **8. `ContainerCheckedColor` (`Color`)** **Description:**\ Sets the container's background color when the checkbox is in the checked state. This property allows the container to visually reflect the checkbox's state, providing clear user feedback. **Usage:**\ Assign a `Color` value to customize the container's background color when checked. **Example:** ```csharp // Set container checked background color to green siticoneCheckBox.ContainerCheckedColor = Color.Green; // Set container checked background color to blue siticoneCheckBox.ContainerCheckedColor = Color.Blue; ``` *** **9. `ContainerCheckedBorderColor` (`Color`)** **Description:**\ Sets the container's border color when the checkbox is in the checked state. This property enhances the visual distinction of the checked state by altering the container's outline accordingly. **Usage:**\ Assign a `Color` value to customize the container's border color when checked. **Example:** ```csharp // Set container checked border color to dark green siticoneCheckBox.ContainerCheckedBorderColor = Color.DarkGreen; // Set container checked border color to navy siticoneCheckBox.ContainerCheckedBorderColor = Color.Navy; ``` *** **10. `ContainerHoverBackColor` (`Color`)** **Description:**\ Sets the container's background color when the user hovers the mouse over the checkbox, providing visual feedback during hover interactions. **Usage:**\ Assign a `Color` value to customize the container's background color on hover. **Example:** ```csharp // Set container hover background color to light yellow siticoneCheckBox.ContainerHoverBackColor = Color.LightYellow; // Set container hover background color to light gray siticoneCheckBox.ContainerHoverBackColor = Color.LightGray; ``` *** **11. `ContainerPressedBackColor` (`Color`)** **Description:**\ Sets the container's background color when the checkbox is pressed (clicked), providing immediate visual feedback during active interactions. **Usage:**\ Assign a `Color` value to customize the container's background color when pressed. **Example:** ```csharp // Set container pressed background color to dark blue siticoneCheckBox.ContainerPressedBackColor = Color.DarkBlue; // Set container pressed background color to dark green siticoneCheckBox.ContainerPressedBackColor = Color.DarkGreen; ``` *** **12. `ContainerCheckedHoverColor` (`Color`)** **Description:**\ Sets the container's background color when the checkbox is both checked and hovered over. This allows for nuanced visual feedback combining multiple states. **Usage:**\ Assign a `Color` value to customize the container's background color when checked and hovered. **Example:** ```csharp // Set container checked hover background color to light green siticoneCheckBox.ContainerCheckedHoverColor = Color.LightGreen; // Set container checked hover background color to teal siticoneCheckBox.ContainerCheckedHoverColor = Color.Teal; ``` *** **13. `ContainerCheckedPressedColor` (`Color`)** **Description:**\ Sets the container's background color when the checkbox is both checked and pressed. This provides distinct visual feedback during combined state interactions. **Usage:**\ Assign a `Color` value to customize the container's background color when checked and pressed. **Example:** ```csharp // Set container checked pressed background color to dark teal siticoneCheckBox.ContainerCheckedPressedColor = Color.DarkTeal; // Set container checked pressed background color to dark blue siticoneCheckBox.ContainerCheckedPressedColor = Color.DarkBlue; ``` *** **14. `IndeterminateColor` (`Color`)** **Description:**\ Sets the container's background color when the checkbox is in an indeterminate state. This property is useful for scenarios like "Select All" checkboxes that indicate partial selection. **Usage:**\ Assign a `Color` value to customize the container's background color when in the indeterminate state. **Example:** ```csharp // Set container indeterminate background color to yellow siticoneCheckBox.IndeterminateColor = Color.Yellow; // Set container indeterminate background color to orange siticoneCheckBox.IndeterminateColor = Color.Orange; ``` *** **15. `IndeterminateBorderColor` (`Color`)** **Description:**\ Sets the container's border color when the checkbox is in an indeterminate state. This property differentiates the container's outline during partial selection scenarios. **Usage:**\ Assign a `Color` value to customize the container's border color when in the indeterminate state. **Example:** ```csharp // Set container indeterminate border color to goldenrod siticoneCheckBox.IndeterminateBorderColor = Color.Goldenrod; // Set container indeterminate border color to dark orange siticoneCheckBox.IndeterminateBorderColor = Color.DarkOrange; ``` *** #### **Code Examples** **Example 1: Enabling Container States with Customized Styling** ```csharp using SiticoneNetFrameworkUI; using System.Drawing; using System.Windows.Forms; public class ContainerStatesForm : Form { private SiticoneCheckBox containerStateCheckBox; public ContainerStatesForm() { InitializeComponent(); } private void InitializeComponent() { this.containerStateCheckBox = new SiticoneCheckBox(); this.SuspendLayout(); // // containerStateCheckBox // this.containerStateCheckBox.Style = CheckBoxStyle.Classic; this.containerStateCheckBox.IsContained = true; // Enable container layout this.containerStateCheckBox.ContainerBackColor = Color.White; this.containerStateCheckBox.ContainerBorderColor = Color.Gray; this.containerStateCheckBox.ContainerBorderWidth = 1; this.containerStateCheckBox.ContainerHoverBackColor = Color.LightYellow; this.containerStateCheckBox.ContainerHoverBorderColor = Color.Orange; this.containerStateCheckBox.ContainerPressedBackColor = Color.LightGreen; this.containerStateCheckBox.ContainerPressedBorderColor = Color.Green; this.containerStateCheckBox.ContainerCheckedColor = Color.Green; this.containerStateCheckBox.ContainerCheckedBorderColor = Color.DarkGreen; this.containerStateCheckBox.ContainerCheckedHoverColor = Color.MediumSeaGreen; this.containerStateCheckBox.ContainerCheckedPressedColor = Color.DarkGreen; this.containerStateCheckBox.IndeterminateColor = Color.Yellow; this.containerStateCheckBox.IndeterminateBorderColor = Color.Goldenrod; this.containerStateCheckBox.Text = "Enable Feature"; this.containerStateCheckBox.Location = new Point(50, 50); this.containerStateCheckBox.Size = new Size(200, 40); this.containerStateCheckBox.CheckStateChanged += ContainerStateCheckBox_CheckStateChanged; // // ContainerStatesForm // this.ClientSize = new Size(300, 200); this.Controls.Add(this.containerStateCheckBox); this.Text = "SiticoneCheckBox - Container States Example"; this.ResumeLayout(false); } private void ContainerStateCheckBox_CheckStateChanged(object sender, CheckStateEventArgs e) { // The container appearance updates automatically based on property bindings. // No additional code is required here unless you have custom logic to handle state changes. } } ``` **Explanation:** * The checkbox is enabled within a styled container by setting `IsContained = true`. * Container properties are customized for different states: default, hover, pressed, checked, and indeterminate. * An event handler `ContainerStateCheckBox_CheckStateChanged` is attached to respond to state changes. The container's appearance updates automatically based on property bindings, eliminating the need for manual updates. *** **Example 2: Dynamic Container Styling Based on Checkbox State** ```csharp using SiticoneNetFrameworkUI; using System.Drawing; using System.Windows.Forms; public class DynamicContainerStatesForm : Form { private SiticoneCheckBox dynamicContainerCheckBox; public DynamicContainerStatesForm() { InitializeComponent(); } private void InitializeComponent() { this.dynamicContainerCheckBox = new SiticoneCheckBox(); this.SuspendLayout(); // // dynamicContainerCheckBox // this.dynamicContainerCheckBox.Style = CheckBoxStyle.Minimal; this.dynamicContainerCheckBox.IsContained = true; this.dynamicContainerCheckBox.ContainerPadding = 8; this.dynamicContainerCheckBox.ContainerBackColor = Color.White; this.dynamicContainerCheckBox.ContainerBorderColor = Color.Gray; this.dynamicContainerCheckBox.ContainerBorderWidth = 1; this.dynamicContainerCheckBox.ContainerHoverBackColor = Color.LightGray; this.dynamicContainerCheckBox.ContainerHoverBorderColor = Color.DarkGray; this.dynamicContainerCheckBox.ContainerPressedBackColor = Color.DarkGray; this.dynamicContainerCheckBox.ContainerPressedBorderColor = Color.Black; this.dynamicContainerCheckBox.ContainerCheckedColor = Color.LightGreen; this.dynamicContainerCheckBox.ContainerCheckedBorderColor = Color.Green; this.dynamicContainerCheckBox.ContainerCheckedHoverColor = Color.MediumSeaGreen; this.dynamicContainerCheckBox.ContainerCheckedPressedColor = Color.DarkGreen; this.dynamicContainerCheckBox.IndeterminateColor = Color.LightYellow; this.dynamicContainerCheckBox.IndeterminateBorderColor = Color.Goldenrod; this.dynamicContainerCheckBox.Text = "Agree to Terms"; this.dynamicContainerCheckBox.Location = new Point(50, 50); this.dynamicContainerCheckBox.Size = new Size(180, 35); this.dynamicContainerCheckBox.CheckStateChanged += DynamicContainerCheckBox_CheckStateChanged; // // DynamicContainerStatesForm // this.ClientSize = new Size(300, 200); this.Controls.Add(this.dynamicContainerCheckBox); this.Text = "SiticoneCheckBox - Dynamic Container Styling"; this.ResumeLayout(false); } private void DynamicContainerCheckBox_CheckStateChanged(object sender, CheckStateEventArgs e) { // The container appearance updates automatically based on property bindings. // No additional code is required here unless you have custom logic to handle state changes. } } ``` **Explanation:** * The checkbox is contained within a styled container with initial properties set for padding, background color, border color, and corner radii. * An event handler `DynamicContainerCheckBox_CheckStateChanged` is attached to respond to state changes. The container's appearance updates automatically based on property bindings, eliminating the need for manual updates. *** #### **Best Practices** Adhering to best practices ensures that the **Container States** feature enhances the user interface without introducing design inconsistencies or usability issues. The following table outlines key best practices for effectively implementing container states in the `SiticoneCheckBox` control. | **Best Practice** | **Description** | | ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Enable Containers When Necessary** | Use containers to group checkboxes with related options, enhancing layout structure and visual hierarchy within the UI. | | **Maintain Consistent State Styling** | Apply uniform styling for containers across similar states to ensure a cohesive and professional appearance. | | **Use Complementary Colors** | Choose `ContainerBackColor` and `ContainerBorderColor` that complement the application's color scheme, maintaining visual harmony and enhancing the checkbox's visibility. | | **Adjust Corner Radii for Style** | Customize corner radii (`ContainerTopLeftRadius`, etc.) to align with the overall design language, whether aiming for rounded or sharp edges. | | **Dynamic Styling Based on State** | Utilize state-specific properties like `ContainerCheckedColor` and `ContainerHoverBackColor` to provide clear visual feedback on user interactions and checkbox states. | | **Optimize for Readability** | Ensure that container styling does not obscure the checkbox's visibility. Maintain sufficient contrast and clarity between the container and the checkbox. | | **Leverage Event Handlers for Dynamic Changes** | Use event handlers such as `CheckStateChanged` to handle custom logic based on the checkbox's state, enhancing interactivity and responsiveness. | | **Ensure Scalability** | Design container layouts to be responsive and adaptable to different screen sizes and resolutions, ensuring consistent appearance across various devices and display settings. | | **Avoid Overcomplicating Designs** | While containers offer enhanced styling options, avoid overly complex container designs that may clutter the UI or confuse users. | | **Test Across Different Themes** | Validate container layouts under various application themes (light, dark, custom) to ensure consistent and visually appealing appearances in all contexts. | *** #### **Common Pitfalls and Design Considerations** Understanding and avoiding common pitfalls ensures that the **Container States** feature is implemented effectively, maintaining both functionality and visual appeal. The following tables detail these aspects. **Common Pitfalls** | **Pitfall** | **Description** | **Solution** | | --------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | | **Inconsistent Container Styling** | Applying different container styles to similar checkboxes can lead to a disjointed and unprofessional UI. | Establish and adhere to a consistent container styling guideline, ensuring uniformity across all checkbox instances. | | **Overlapping Container and Checkbox Styles** | Conflicting styles between the container and the checkbox can obscure the checkbox or create visual confusion. | Ensure that container background and border colors complement the checkbox's style and do not obscure its visibility. | | **Insufficient Contrast** | Low contrast between `ContainerBackColor` and `ContainerBorderColor` can make the container's boundaries unclear. | Choose colors with adequate contrast to clearly define the container's borders and background. | | **Neglecting Padding Adjustments** | Inadequate `ContainerPadding` can result in cramped or overly spacious checkbox placements within containers. | Adjust `ContainerPadding` to achieve balanced spacing that enhances readability and aesthetics. | | **Ignoring Corner Radius Consistency** | Varying corner radii within a single container or across multiple containers can disrupt visual harmony. | Maintain consistent corner radii settings within a single container and across similar controls throughout the application. | **Design Considerations** Designing effective container states involves several key considerations to ensure that the checkbox is both functional and aesthetically pleasing. The following table outlines these considerations. | **Aspect** | **Consideration** | **Implementation Tips** | | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------- | | **Visual Hierarchy** | Containers can establish a visual hierarchy, grouping related checkboxes and enhancing UI structure. | Use containers to logically group related checkboxes, making the interface more intuitive and organized for users. | | **Aesthetic Consistency** | The container's styling should align with the application's overall design language and theme to maintain visual harmony. | Select `ContainerBackColor`, `ContainerBorderColor`, and corner radii that complement the application's color palette and design motifs. | | **Spatial Efficiency** | Containers should optimize the use of space without causing clutter or excessive whitespace. | Adjust `ContainerPadding` to achieve balanced spacing, ensuring that checkboxes are neither too cramped nor overly spaced. | | **State-Responsive Styling** | Containers should visually respond to the checkbox's state changes, providing clear feedback to users. | Utilize state-specific properties like `ContainerCheckedColor` and `ContainerHoverBackColor` to dynamically reflect the checkbox's state. | | **Accessibility** | Container designs should support accessibility, ensuring that all users can interact with and understand the checkbox's state. | Choose colors with sufficient contrast, maintain clear borders, and ensure that container styling does not impede readability. | | **Responsive Design** | Containers should adapt to different screen sizes and resolutions, maintaining consistent appearance across devices. | Implement scalable container sizes and responsive corner radii to ensure that the checkbox remains proportionate and visible on various displays. | | **Interactive Feedback** | Containers should enhance interactive feedback, such as hover and press effects, to improve user engagement. | Customize `ContainerHoverBackColor` and `ContainerPressedBackColor` to provide immediate visual responses to user interactions. | | **Performance Impact** | Complex container designs can impact rendering performance, especially in resource-constrained environments. | Opt for simple and optimized container styles that achieve the desired aesthetic without excessive rendering overhead. | | **Customization Flexibility** | Providing a range of container customization options allows developers to tailor the checkbox to diverse design requirements. | Expose properties like `ContainerBorderWidth` to enable detailed customization based on specific UI needs. | | **Integration with Other Controls** | Ensure that container styles harmonize with other UI elements, fostering a cohesive and professional interface. | Align container styling with the styling of related controls (e.g., buttons, labels) to maintain a unified design language. | *** #### **Summary and Review** The **Container States** feature of the `SiticoneCheckBox` control provides a set of properties that enable developers to customize the container's appearance based on the checkbox's current state comprehensively. By defining state-specific colors and adjusting container properties, you can ensure that the container dynamically reflects the checkbox's state, offering clear and immediate visual feedback to users. **Key Takeaways:** | **Point** | **Explanation** | | --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **State-Specific Customization** | Properties like `ContainerCheckedColor`, `ContainerHoverBackColor`, and `ContainerPressedBackColor` allow for detailed customization based on the checkbox's state. | | **Comprehensive Styling Options** | A wide range of container properties such as `ContainerBackColor`, `ContainerBorderColor`, and `ContainerBorderWidth` enable developers to create visually appealing layouts. | | **Dynamic Feedback** | The container's appearance updates automatically based on property bindings, ensuring that visual feedback corresponds accurately to the checkbox's state. | | **Accessibility and Usability** | Thoughtful color choices and clear border definitions ensure that the container is accessible to all users, including those with visual impairments. | | **Consistency and Uniformity** | Maintaining consistent container styles across similar controls fosters a cohesive and professional user interface, improving overall user experience. | | **Performance Optimization** | Efficient implementation of container state properties ensures that enhanced visual feedback does not compromise application performance. | | **Customization Flexibility** | The extensive range of container properties provides developers with the flexibility to tailor the checkbox's appearance to meet specific design requirements and preferences. | | **Responsive Design Support** | Containers are designed to adapt to various screen sizes and resolutions, maintaining consistent appearance and functionality across different devices. | By adhering to the best practices and design considerations outlined above, developers can effectively leverage the **Container States** feature to create checkboxes that are not only functional but also enhance the overall visual structure and user experience of their applications.