# Essential Styling ## Overview The Essential Styling feature of the SiticoneAdvancedPanel control exposes properties for defining the curvature of each corner and the visual appearance of the panel's border. Developers can control individual corner radii (top-left, top-right, bottom-left, bottom-right) as well as set the border’s color and width, ensuring the panel seamlessly integrates with the overall UI aesthetics. *** ### Property Details The table below summarizes the available properties for Essential Styling: | Property Name | Description | Data Type | Default Value | | ----------------- | -------------------------------------------------------- | --------- | ------------- | | TopLeftRadius | Sets the radius of the top-left corner of the panel. | int | 5 | | TopRightRadius | Sets the radius of the top-right corner of the panel. | int | 5 | | BottomLeftRadius | Sets the radius of the bottom-left corner of the panel. | int | 5 | | BottomRightRadius | Sets the radius of the bottom-right corner of the panel. | int | 5 | | BorderColor | Defines the color of the panel’s border. | Color | Gray | | BorderWidth | Determines the width of the panel’s border. | float | 1.0 | *** ### Code Examples #### Basic Integration Below is a sample code snippet demonstrating how to set up the Essential Styling properties when creating an instance of the SiticoneAdvancedPanel in a .NET WinForms application: ```csharp using System; using System.Drawing; using System.Windows.Forms; using SiticoneNetFrameworkUI; namespace DemoApp { public class MainForm : Form { public MainForm() { // Initialize the advanced panel control var advancedPanel = new SiticoneAdvancedPanel { // Essential Styling: Corner radii TopLeftRadius = 10, TopRightRadius = 10, BottomLeftRadius = 10, BottomRightRadius = 10, // Essential Styling: Border properties BorderColor = Color.Black, BorderWidth = 2.0f, // Set additional properties as needed BackColor = Color.White, Size = new Size(300, 200), Location = new Point(50, 50) }; // Add the panel to the form Controls.Add(advancedPanel); } [STAThread] public static void Main() { Application.EnableVisualStyles(); Application.Run(new MainForm()); } } } ``` #### Advanced Customization For scenarios requiring dynamic adjustments or theme changes at runtime, consider the following code sample: ```csharp // Assuming 'advancedPanel' is an instance of SiticoneAdvancedPanel private void ApplyTheme(bool isDarkTheme) { if (isDarkTheme) { advancedPanel.TopLeftRadius = 15; advancedPanel.TopRightRadius = 15; advancedPanel.BottomLeftRadius = 15; advancedPanel.BottomRightRadius = 15; advancedPanel.BorderColor = Color.White; advancedPanel.BorderWidth = 3.0f; advancedPanel.BackColor = Color.FromArgb(30, 30, 30); } else { advancedPanel.TopLeftRadius = 5; advancedPanel.TopRightRadius = 5; advancedPanel.BottomLeftRadius = 5; advancedPanel.BottomRightRadius = 5; advancedPanel.BorderColor = Color.Gray; advancedPanel.BorderWidth = 1.0f; advancedPanel.BackColor = Color.White; } advancedPanel.Invalidate(); // Redraw to reflect the changes } ``` *** ### Key Points | Aspect | Details | | -------------------------- | --------------------------------------------------------------------------------------------------------------- | | Property Granularity | Each corner radius is independently configurable, providing precise control over panel shape. | | Immediate Feedback | Changes to styling properties trigger the Invalidate() method, ensuring the control is redrawn immediately. | | Integrated with Base Color | The border styling works in tandem with the BackColor and state-dependent colors when state styles are enabled. | *** ### Best Practices | Recommendation | Explanation | | ---------------------------- | ------------------------------------------------------------------------------------------------------------- | | Consistent Design | Use similar radii and border widths across related controls to maintain a consistent UI design. | | Use Invalidate After Updates | Always trigger a redraw (using Invalidate()) after changing styling properties to ensure updates are visible. | | Validate Input | Avoid setting negative values for radii and border widths, as the control validates and throws exceptions. | *** ### Common Pitfalls | Pitfall | How to Avoid It | | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | | Negative Values | Ensure values for TopLeftRadius, TopRightRadius, BottomLeftRadius, BottomRightRadius, and BorderWidth are non-negative. | | Overlapping Radii | Adjust corner radii carefully to avoid overlaps; the control automatically scales values, but extreme values may produce unexpected results. | | Ignoring Invalidate | Forgetting to call Invalidate() after programmatically updating properties may result in the control not redrawing correctly. | *** ### Usage Scenarios | Scenario | Description | | ------------------------------ | ------------------------------------------------------------------------------------------------------------ | | Custom Themed UI | Adjust corner radii and border properties to match custom themes in modern and minimalistic UIs. | | Dynamic User Interface Changes | Modify styling properties at runtime to reflect different application states (e.g., active/inactive modes). | | Responsive Design | Use varying radii and border widths based on the control size to maintain visual consistency across devices. | *** ### Review | Review Point | Key Consideration | | ------------------- | --------------------------------------------------------------------------------------------------------------------------------- | | Flexibility | Essential Styling provides granular control over the panel's appearance, crucial for creating appealing UIs. | | Ease of Integration | The intuitive property naming and immediate visual feedback facilitate quick adoption and iteration. | | Error Handling | Built-in validations help prevent improper values, though developers must handle any exceptions during design-time configuration. | *** ### Summary Essential Styling in the SiticoneAdvancedPanel offers developers the ability to finely tune the appearance of the panel through individual control over corner radii and border properties. This feature is instrumental for achieving a cohesive and customizable UI design, enabling rapid integration and dynamic runtime adjustments with minimal code changes. *** ### Additional Sections #### Troubleshooting | Issue | Possible Cause | Suggested Solution | | ------------------------------ | ------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | | Panel not redrawing | Property changes may not trigger a redraw automatically in certain dynamic scenarios. | Ensure that Invalidate() is called after modifying styling properties. | | Inconsistent Corner Appearance | Extreme values for radii may cause overlapping or unexpected behavior. | Test with moderate values and adjust proportionally to the panel size. | #### Integration Checklist | Step | Description | | -------------------------------------- | ----------------------------------------------------------------------------------------------------- | | Instantiate the Control | Create an instance of SiticoneAdvancedPanel. | | Configure Essential Styling Properties | Set TopLeftRadius, TopRightRadius, BottomLeftRadius, BottomRightRadius, BorderColor, and BorderWidth. | | Test in Different Themes | Verify appearance in both light and dark modes to ensure consistency. | | Validate at Runtime | Dynamically adjust properties and call Invalidate() to ensure immediate visual updates. | *** This comprehensive documentation on Essential Styling is designed to help developers integrate and customize the SiticoneAdvancedPanel easily, ensuring that the control meets both aesthetic and functional requirements in various application scenarios. --- # 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/container-and-layout/siticone-advancedpanel/essential-styling.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.