> 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/buttons-and-elements/siticone-imagebutton/visual-style-and-layout.md). # Visual Style and Layout This feature allows developers to customize the overall appearance of the control, including its border, background, and corner designs, to ensure it fits seamlessly within the application's UI. ## Overview The Visual Style & Layout feature provides properties for defining the control's border (color and thickness), background fill color, and rounded corner dimensions. Additionally, it offers an option to make the control radial (circular) by automatically adjusting the corner radii, which aids in creating a modern and consistent design across the UI. *** ### Key Points | Aspect | Description | | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | | BorderColor | Sets the color of the control's border, allowing customization to match the application's color theme. | | BorderThickness | Determines the width of the border with a minimum enforced thickness, ensuring a clear and visible outline. | | BackgroundFillColor | Specifies the background color of the control, enabling transparency or a solid fill as required by the design. | | CornerRadius Properties | Allow for the individual configuration of the top-left, top-right, bottom-left, and bottom-right corner radii to achieve various rounded effects. | | MakeRadial | Automatically adjusts all corner radii to create a circular (radial) control, ideal for buttons or icons requiring a circular shape. | *** ### Best Practices | Best Practice Area | Recommendation | | ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Consistent Design | Use BorderColor and BackgroundFillColor consistently across your UI to maintain a unified visual theme. | | Appropriate Border Usage | Ensure that BorderThickness is set to a value that is neither too thin (causing visibility issues) nor too thick (overpowering the control’s content), with the minimum recommended value enforced. | | Tailored Corner Styling | When using custom corner radii, adjust each property to achieve the desired curvature; for circular controls, enable MakeRadial for automatic adjustment based on control dimensions. | | Responsive Layout | Consider how the control resizes and scales its visual elements (including borders and rounded corners) across different screen sizes or resolutions, testing adjustments on various form layouts. | *** ### Common Pitfalls | Pitfall Area | Description | Mitigation Strategy | | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | | Overlapping Styles | Mixing too many different border or background styles may lead to a cluttered or inconsistent UI appearance. | Standardize the use of BorderColor and BackgroundFillColor across similar controls to maintain visual harmony. | | Incorrect Corner Sizing | Manually setting inconsistent corner radii may produce a jarring effect if the intended design is a smooth curve or circle. | Use MakeRadial when a circular appearance is desired, or adjust all corner radii proportionately. | | Neglecting Background | A transparent BackgroundFillColor might cause display issues if the underlying form’s color conflicts with the intended control design. | Set an appropriate background color or ensure that the parent control’s background complements the control's design. | *** ### Usage Scenarios | Scenario | Explanation | Recommended Settings | | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | | Themed Application Design | In applications with a defined color theme, customize BorderColor and BackgroundFillColor to align the control with the overall design. | Set BorderColor and BackgroundFillColor to colors that match your app’s theme; adjust BorderThickness for clarity. | | Circular Button Design | When designing circular buttons or icons, use the MakeRadial property to automatically round the control, ensuring a perfect circle regardless of size changes. | Enable MakeRadial and fine-tune control dimensions; consider using a complementary BorderColor for enhanced visibility. | | Custom Rounded Corners | For more unique or brand-specific styling, manually set individual corner radii to create custom shapes or soft edges on the control. | Configure CornerRadiusTopLeft, CornerRadiusTopRight, CornerRadiusBottomLeft, and CornerRadiusBottomRight as needed. | *** ### Code Examples #### Example 1: Basic Visual Style Customization ```csharp using System; using System.Drawing; using System.Windows.Forms; using SiticoneNetFrameworkUI; public class MainForm : Form { public MainForm() { // Initialize the image button with custom visual style SiticoneImageButton imageButton = new SiticoneImageButton { Size = new Size(120, 120), Location = new Point(50, 50), // Set the border color and thickness for clear visibility BorderColor = Color.DarkGray, BorderThickness = 2, // Define a subtle background fill color BackgroundFillColor = Color.LightGray, // Set custom corner radii for a rounded rectangle appearance CornerRadiusTopLeft = 15, CornerRadiusTopRight = 15, CornerRadiusBottomLeft = 15, CornerRadiusBottomRight = 15, // Disable MakeRadial since a circular button is not required in this case MakeRadial = false }; // Add the styled control to the form Controls.Add(imageButton); } [STAThread] static void Main() { Application.EnableVisualStyles(); Application.Run(new MainForm()); } } ``` #### Example 2: Creating a Circular Button ```csharp using System; using System.Drawing; using System.Windows.Forms; using SiticoneNetFrameworkUI; public class CircularButtonForm : Form { public CircularButtonForm() { // Initialize the image button and set it to be circular using MakeRadial SiticoneImageButton circularButton = new SiticoneImageButton { Size = new Size(100, 100), Location = new Point(50, 50), // Set a contrasting border color for clarity BorderColor = Color.Black, BorderThickness = 2, // Set the background fill color to enhance the circular design BackgroundFillColor = Color.CadetBlue, // Enable MakeRadial for a perfect circular shape MakeRadial = true }; // Add the circular button to the form Controls.Add(circularButton); } [STAThread] static void Main() { Application.EnableVisualStyles(); Application.Run(new CircularButtonForm()); } } ``` *** ### Integration Demos | Demo Type | Description | Code Reference | | -------------------- | ----------------------------------------------------------------------------------------------------------------- | --------------- | | Basic Style Demo | Demonstrates setting the border, background, and custom corner radii to style the control as a rounded rectangle. | Example 1 above | | Circular Button Demo | Shows how to configure the control to automatically become circular using the MakeRadial property. | Example 2 above | *** ### Additional Considerations | Consideration | Details | | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Visual Consistency | Align the control’s visual properties with the rest of your application’s design; using similar border and background colors can enhance consistency. | | Dynamic Resizing | When using MakeRadial, be mindful of the control's size adjustments, as the corner radii will be recalculated automatically based on the current dimensions. | | Testing Across Themes | If your application supports theming (such as light/dark modes), test the control with different BorderColor and BackgroundFillColor values to ensure compatibility. | *** ### Review The Visual Style & Layout feature of the SiticoneImageButton control provides extensive customization options to ensure that the control seamlessly integrates into your application's visual design. With flexible settings for borders, backgrounds, and corner designs—including an automatic circular mode—developers have the tools needed to create polished and modern UI components. *** ### Summary The Visual Style & Layout feature empowers developers to tailor the appearance of the SiticoneImageButton control to match the specific design requirements of their applications. By configuring properties such as BorderColor, BorderThickness, BackgroundFillColor, and individual corner radii, as well as leveraging the MakeRadial property for circular designs, this feature ensures a flexible and visually appealing control. It plays a crucial role in enhancing the overall UI consistency and responsiveness. *** ### Key Points Recap | Recap Point | Details | | ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | | Customizable Borders | Developers can define the border's color and thickness to create a distinct outline that complements the application’s theme. | | Flexible Backgrounds | The BackgroundFillColor property enables developers to set a clear or transparent background based on design needs. | | Rounded Corners & Circles | With individual corner radii and the MakeRadial option, the control can be styled as a rounded rectangle or a perfect circle to suit various design styles. | *** ### Usage Scenarios Recap | Scenario | Application Example | | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | | Themed UIs | Customize the border and background to match the overall theme of the application, ensuring a harmonious design throughout the UI. | | Circular Buttons | Utilize the MakeRadial property to create circular buttons or icons that are visually distinct and modern. | | Custom Shape Designs | Apply custom corner radii to achieve unique rounded rectangle shapes that reflect the branding or style guidelines of the application. | *** ### Conclusion The Visual Style & Layout feature is essential for developers seeking to craft a refined and consistent user interface with the SiticoneImageButton control. Through the extensive customization options available—ranging from border and background settings to flexible corner designs—this feature enables a high degree of visual tailoring. By following the provided guidelines, best practices, and code examples, developers can achieve an aesthetically pleasing and well-integrated control that enhances the overall user experience in their WinForms applications. This comprehensive guide serves as a useful reference for integrating and optimizing the Visual Style & Layout features as defined in the control’s code.