# Corner and Shape Customization

## Overview

The Corner and Shape Customization feature provides granular control over the button's geometry by letting developers specify individual corner radii through properties such as `CornerRadiusTopLeft`, `CornerRadiusTopRight`, `CornerRadiusBottomLeft`, and `CornerRadiusBottomRight`. This flexibility helps achieve a wide range of design styles, from modern minimalistic interfaces with subtle curves to highly stylized controls with pronounced rounded corners. Changes to these properties trigger immediate visual updates, ensuring that the control’s shape integrates seamlessly with the overall application design.

***

### Properties and Configuration

The table below summarizes the key properties related to Corner and Shape Customization:

| Property Name           | Description                                                                 | Default Value / Range               | Sample Usage Example                     |
| ----------------------- | --------------------------------------------------------------------------- | ----------------------------------- | ---------------------------------------- |
| CornerRadiusTopLeft     | Specifies the radius of the top-left corner, controlling its roundness.     | Integer (default is 0, must be ≥ 0) | `myButton.CornerRadiusTopLeft = 10;`     |
| CornerRadiusTopRight    | Specifies the radius of the top-right corner, controlling its roundness.    | Integer (default is 0, must be ≥ 0) | `myButton.CornerRadiusTopRight = 10;`    |
| CornerRadiusBottomLeft  | Specifies the radius of the bottom-left corner, controlling its roundness.  | Integer (default is 0, must be ≥ 0) | `myButton.CornerRadiusBottomLeft = 10;`  |
| CornerRadiusBottomRight | Specifies the radius of the bottom-right corner, controlling its roundness. | Integer (default is 0, must be ≥ 0) | `myButton.CornerRadiusBottomRight = 10;` |

*Note: The effective shape of the button is recalculated whenever these properties are updated, ensuring that the control is redrawn with the new corner specifications.*

***

### Key Points

<table><thead><tr><th width="259">Key Point</th><th>Details</th></tr></thead><tbody><tr><td>Customizable Corners</td><td>Each corner can be individually adjusted to create a unique control shape that fits your design needs.</td></tr><tr><td>Immediate Visual Feedback</td><td>Changes to the corner radii properties trigger a re-layout and redraw, providing real-time updates to the control's appearance.</td></tr><tr><td>Versatile Design Possibilities</td><td>From sharp rectangular edges (all zeros) to fully rounded buttons (radius equals half the button’s height), the options are extensive.</td></tr></tbody></table>

***

### Best Practices

| Best Practice                             | Description                                                                                                                            | Example Code Snippet                                                                                                                                                       |
| ----------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Maintain Consistency Across Controls      | Use consistent corner radius values across similar controls to achieve a unified look throughout your application.                     | `csharp<br>myButton.CornerRadiusTopLeft = 8;<br>myButton.CornerRadiusTopRight = 8;<br>myButton.CornerRadiusBottomLeft = 8;<br>myButton.CornerRadiusBottomRight = 8;<br>`   |
| Use Subtle Rounding for Professional Look | For most business applications, subtle curves (e.g., 4 to 8 pixels) create a modern, refined appearance without being overly dramatic. | `csharp<br>myButton.CornerRadiusTopLeft = 6;<br>myButton.CornerRadiusTopRight = 6;<br>`                                                                                    |
| Experiment with Asymmetrical Radii        | To create unique visual effects or highlight certain controls, try using different radii for each corner.                              | `csharp<br>myButton.CornerRadiusTopLeft = 10;<br>myButton.CornerRadiusTopRight = 5;<br>myButton.CornerRadiusBottomLeft = 5;<br>myButton.CornerRadiusBottomRight = 10;<br>` |

***

### Common Pitfalls

| Pitfall                                 | Description                                                                                                                          | How to Avoid                                                                                       |
| --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------- |
| Over-Rounding                           | Setting very high corner radii can cause the control to lose its rectangular structure and may lead to undesirable visual artifacts. | Test different values to ensure that the rounded corners do not compromise the button's usability. |
| Inconsistent Appearance Across Controls | Using drastically different corner radii on similar controls can create a disjointed user interface.                                 | Standardize on a set of corner radius values for similar controls to maintain design consistency.  |
| Ignoring Content Layout Adjustments     | Overly rounded corners may affect the internal layout and padding calculations, potentially misaligning the text.                    | Validate that the text remains legible and well-positioned after adjusting corner radii.           |

***

### Usage Scenarios

| Scenario                           | Description                                                                                                          | Sample Integration Code                                                                                                                                                                                            |
| ---------------------------------- | -------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Modern Button Designs              | Create buttons with soft, rounded edges for a sleek and modern look suitable for contemporary user interfaces.       | `csharp<br>myButton.CornerRadiusTopLeft = 10;<br>myButton.CornerRadiusTopRight = 10;<br>myButton.CornerRadiusBottomLeft = 10;<br>myButton.CornerRadiusBottomRight = 10;<br>`                                       |
| Emphasized or Highlighted Controls | Use asymmetrical rounding to draw attention to specific buttons, such as primary call-to-action controls.            | `csharp<br>primaryButton.CornerRadiusTopLeft = 15;<br>primaryButton.CornerRadiusTopRight = 15;<br>primaryButton.CornerRadiusBottomLeft = 5;<br>primaryButton.CornerRadiusBottomRight = 5;<br>`                     |
| Adaptive Design for Various Themes | Adjust corner radii dynamically based on the application theme or user preferences to create a more personalized UI. | `csharp<br>if(theme == "modern") {<br> myButton.CornerRadiusTopLeft = 8;<br> myButton.CornerRadiusTopRight = 8;<br>} else {<br> myButton.CornerRadiusTopLeft = 0;<br> myButton.CornerRadiusTopRight = 0;<br>}<br>` |

***

### Real Life Usage Scenarios

| Real Life Scenario                         | Description                                                                                                                                | Example Implementation                                                                                                                                                                                   |
| ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Enterprise Software UI                     | In professional applications, subtle rounded corners can provide a modern, less harsh interface without compromising functionality.        | `csharp<br>enterpriseButton.CornerRadiusTopLeft = 6;<br>enterpriseButton.CornerRadiusTopRight = 6;<br>enterpriseButton.CornerRadiusBottomLeft = 6;<br>enterpriseButton.CornerRadiusBottomRight = 6;<br>` |
| Consumer-Focused Mobile-Style Applications | For applications designed with a mobile-first approach, more pronounced rounded corners can contribute to a friendly, approachable design. | `csharp<br>mobileButton.CornerRadiusTopLeft = 12;<br>mobileButton.CornerRadiusTopRight = 12;<br>mobileButton.CornerRadiusBottomLeft = 12;<br>mobileButton.CornerRadiusBottomRight = 12;<br>`             |

***

### Troubleshooting Tips

| Issue                                      | Potential Cause                                                                                              | Resolution                                                                                                     |
| ------------------------------------------ | ------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------- |
| Rounded Corners Not Appearing              | The properties may not be properly assigned, or the control may not be redrawn after changing corner values. | Ensure the properties are set correctly and call `Invalidate()` if necessary to force a redraw of the control. |
| Text or Icon Clipping                      | Excessive rounding can sometimes cause the content inside the button to be misaligned or clipped.            | Adjust the `TextPadding` and verify the control's internal layout after modifying the corner radii.            |
| Inconsistent Appearance Across Resolutions | Different screen resolutions may render rounded corners with slight variances if not tested thoroughly.      | Test the control on multiple devices and resolutions to ensure consistent appearance and behavior.             |

***

### Integration Code Sample

The following example demonstrates how to integrate Corner and Shape Customization into a simple WinForms application:

```csharp
using System;
using System.Drawing;
using System.Windows.Forms;
using SiticoneNetFrameworkUI; // Ensure the correct namespace is referenced

public class MainForm : Form
{
    public MainForm()
    {
        // Initialize and configure a SiticoneGroupButton with custom corner radii
        SiticoneGroupButton customShapeButton = new SiticoneGroupButton
        {
            Text = "Rounded Button",
            Size = new Size(220, 50),
            Location = new Point(20, 20),
            // Set individual corner radii for a fully rounded look
            CornerRadiusTopLeft = 15,
            CornerRadiusTopRight = 15,
            CornerRadiusBottomLeft = 15,
            CornerRadiusBottomRight = 15,
            // Other visual properties can be set as desired
            NormalColor = Color.FromArgb(100, 100, 100),
            HoverColor = Color.FromArgb(80, 80, 80),
            PressColor = Color.FromArgb(50, 50, 50),
            TextColor = Color.LightGray,
            SelectedTextColor = Color.White
        };

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

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

***

### Review

<table><thead><tr><th width="291">Review Aspect</th><th>Details</th></tr></thead><tbody><tr><td>Customization Flexibility</td><td>Allows precise control over each corner, giving developers the freedom to create both subtle and dramatic button shapes.</td></tr><tr><td>Immediate Visual Updates</td><td>Changes to corner properties trigger a re-layout, ensuring that adjustments are immediately visible.</td></tr><tr><td>Seamless Integration</td><td>Integrates well with other styling features such as content layout and selection markers, contributing to a coherent overall design.</td></tr><tr><td>Minimal Performance Impact</td><td>The corner rendering is optimized for performance, ensuring that even significant shape changes do not affect the control’s responsiveness.</td></tr></tbody></table>

***

### Summary

<table><thead><tr><th width="274">Summary Point</th><th>Description</th></tr></thead><tbody><tr><td>Enhanced Aesthetics</td><td>Corner and Shape Customization allows for tailored button shapes, contributing to a visually appealing and modern UI design.</td></tr><tr><td>Granular Control</td><td>Developers can modify each corner independently, offering flexibility to match various design themes and application requirements.</td></tr><tr><td>Responsive and Dynamic</td><td>The control updates its layout immediately upon changes to the corner properties, ensuring a dynamic user experience.</td></tr><tr><td>Integrates with Overall Styling</td><td>Works in tandem with content layout, color states, and interactive features to deliver a cohesive and polished control appearance.</td></tr></tbody></table>

***

### Additional Useful Sections

#### Frequently Asked Questions (FAQ)

| Question                                           | Answer                                                                                                                                                             |
| -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| How do I set a fully rounded button?               | Set all four corner properties to a value that is half of the button’s height (or greater), for example: `myButton.CornerRadiusTopLeft = 25;` and so on.           |
| Can I have asymmetrical corners?                   | Yes, each corner radius property can be set independently to create asymmetrical or unique shapes.                                                                 |
| Will changing corner radii affect the text layout? | The control automatically recalculates the layout based on corner adjustments; however, ensure that `TextPadding` is configured appropriately to prevent clipping. |

#### Integration Checklist

<table><thead><tr><th width="320">Checklist Item</th><th>Status</th></tr></thead><tbody><tr><td>Set Desired Corner Radii</td><td>Confirm that all four corner properties (<code>CornerRadiusTopLeft</code>, <code>CornerRadiusTopRight</code>, <code>CornerRadiusBottomLeft</code>, <code>CornerRadiusBottomRight</code>) are set as required.</td></tr><tr><td>Verify Content Layout</td><td>Ensure that the text and any icons are properly aligned within the control after rounding.</td></tr><tr><td>Test Across Themes and Resolutions</td><td>Validate the appearance on various themes and screen resolutions to ensure consistency.</td></tr><tr><td>Confirm Immediate Visual Feedback</td><td>Verify that changes to corner properties trigger an immediate re-layout and update of the control.</td></tr></tbody></table>

***

By following this comprehensive documentation for Corner and Shape Customization, developers can effectively tailor the button control's geometry to match the desired design aesthetic in their .NET WinForms applications, thereby enhancing both functionality and visual appeal.