# 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. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs-siticoneframework.gitbook.io/home/net-framework-or-net-core-ui/input-controls/siticone-checkbox/container-states.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.