---
description: >-
  This feature allows developers to customize the curvature of each corner of
  the progress bar, enabling unique and visually appealing shapes.
---

# Rounded Corners & Shape Customization

## Overview

The Rounded Corners & Shape Customization feature of the control provides fine-grained control over the appearance of each corner through individual radius properties. It also includes an option to automatically set all corners to a uniform, perfectly circular curvature using the MakeRadial property. This flexibility enables developers to match the control's appearance to their application’s design language.

***

### Properties and Their Details

The following table summarizes the main properties associated with rounded corners and shape customization:

| Property                | Description                                                                                                       | Default Value |
| ----------------------- | ----------------------------------------------------------------------------------------------------------------- | ------------- |
| CornerRadiusTopLeft     | Sets the curvature radius of the top-left corner.                                                                 | 15            |
| CornerRadiusTopRight    | Sets the curvature radius of the top-right corner.                                                                | 15            |
| CornerRadiusBottomLeft  | Sets the curvature radius of the bottom-left corner.                                                              | 15            |
| CornerRadiusBottomRight | Sets the curvature radius of the bottom-right corner.                                                             | 15            |
| MakeRadial              | When true, calculates and applies maximum possible radius for a perfect circular shape based on the control size. | true          |

***

### Key Points

| Aspect               | Details                                                                                                                |
| -------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| Customizability      | Each corner's curvature can be adjusted independently using the four CornerRadius properties.                          |
| Automatic Adjustment | Enabling MakeRadial ensures that the corners automatically adjust to form a circle, based on the control's dimensions. |
| Dynamic Redraw       | Changes to these properties trigger an update of the control's region and force a repaint to reflect the new shape.    |

***

### Best Practices

| Practice                | Explanation                                                                                                                                  |
| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| Consistent Sizing       | When using MakeRadial, ensure that the control's height and width are similar to achieve a uniform circular appearance.                      |
| Gradual Adjustments     | Adjust the corner radii gradually when not using MakeRadial to maintain a balanced visual design and avoid disproportionate corners.         |
| Test in Different Sizes | Verify the appearance at various sizes by dynamically resizing the control to ensure the rounded corners render correctly at all dimensions. |

***

### Common Pitfalls

| Pitfall                     | Explanation                                                                                                | Avoidance Strategy                                                                                                                                 |
| --------------------------- | ---------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| Overlapping Radii           | Setting corner radii larger than half the width or height of the control may lead to visual glitches.      | Always ensure that the radius value does not exceed half the minimum of the control's width or height (this is automatically clamped in the code). |
| Ignoring MakeRadial Effects | Manually setting corner radii when MakeRadial is enabled may produce unexpected results.                   | Use MakeRadial exclusively for a circular effect, or disable it if custom individual corner radii are desired.                                     |
| Inconsistent Control Sizing | Changing the control size without updating the region can cause improper rendering of the rounded corners. | Use the control’s OnSizeChanged event (which calls UpdateControlRegion) to ensure that the rounded corners adjust to new dimensions automatically. |

***

### Usage Scenarios

| Scenario                   | Description                                                                                                       | Sample Code Integration                                                                                                                                                                                                                                                                                                                                  |
| -------------------------- | ----------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Custom UI Theme            | When developing a themed application where controls need to have a specific rounded look.                         | `csharp<br>// Initialize the progress bar with custom corner radii<br>SiticoneHProgressBar progressBar = new SiticoneHProgressBar();<br>progressBar.CornerRadiusTopLeft = 20;<br>progressBar.CornerRadiusTopRight = 20;<br>progressBar.CornerRadiusBottomLeft = 10;<br>progressBar.CornerRadiusBottomRight = 10;<br>this.Controls.Add(progressBar);<br>` |
| Perfectly Circular Control | To provide a circular progress bar by enabling MakeRadial, which automatically sets each corner to form a circle. | `csharp<br>// Create a perfectly circular progress bar<br>SiticoneHProgressBar progressBar = new SiticoneHProgressBar();<br>progressBar.MakeRadial = true;<br>progressBar.Size = new Size(100, 100);<br>this.Controls.Add(progressBar);<br>`                                                                                                             |
| Responsive Design          | When designing a responsive UI, ensure that the rounded corners adjust gracefully as the control is resized.      | `csharp<br>// Dynamic resizing example<br>SiticoneHProgressBar progressBar = new SiticoneHProgressBar();<br>progressBar.MakeRadial = true;<br>progressBar.Dock = DockStyle.Fill;<br>this.Controls.Add(progressBar);<br>`                                                                                                                                 |

***

### Code Example and Demo

Below is an extensive example demonstrating how to integrate the Rounded Corners & Shape Customization feature in a simple WinForms application:

```csharp
using System;
using System.Drawing;
using System.Windows.Forms;
using SiticoneNetFrameworkUI;

namespace ProgressBarDemo
{
    public class MainForm : Form
    {
        private SiticoneHProgressBar progressBar;
        private Button toggleRadialButton;

        public MainForm()
        {
            // Initialize the form
            Text = "Progress Bar Rounded Corners Demo";
            Size = new Size(400, 200);

            // Initialize the progress bar
            progressBar = new SiticoneHProgressBar()
            {
                Location = new Point(50, 50),
                Size = new Size(300, 30),
                // Custom corner radii for a unique look
                CornerRadiusTopLeft = 20,
                CornerRadiusTopRight = 10,
                CornerRadiusBottomLeft = 10,
                CornerRadiusBottomRight = 20,
                // Initially disable automatic radial mode
                MakeRadial = false,
                Value = 50  // Set an initial value for demonstration
            };

            // Initialize a button to toggle MakeRadial
            toggleRadialButton = new Button()
            {
                Text = "Toggle Circular",
                Location = new Point(150, 100),
                AutoSize = true
            };
            toggleRadialButton.Click += ToggleRadialButton_Click;

            // Add controls to the form
            Controls.Add(progressBar);
            Controls.Add(toggleRadialButton);
        }

        private void ToggleRadialButton_Click(object sender, EventArgs e)
        {
            // Toggle the MakeRadial property to switch between custom and perfectly circular corners
            progressBar.MakeRadial = !progressBar.MakeRadial;
        }

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

***

### Review

| Aspect              | Evaluation                                                                                                                                 |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| Flexibility         | The feature provides a high level of customization for each corner, making it adaptable to many design requirements.                       |
| Ease of Integration | With properties that automatically update the control’s region on change, integrating rounded corners is straightforward.                  |
| Visual Impact       | The ability to toggle between custom corner settings and a perfectly circular shape (MakeRadial) greatly enhances UI design possibilities. |

***

### Summary

The Rounded Corners & Shape Customization feature of the progress bar control allows developers to tailor the appearance of each corner through individual radius properties and an option for a fully circular appearance via the MakeRadial property. This ensures that the control can be seamlessly integrated into various design themes, offering both flexibility and a high level of visual polish.

***

### Additional Sections

#### Troubleshooting Tips

| Tip                           | Description                                                                                                                                                          |
| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Verify Property Values        | Ensure that corner radius values do not exceed half of the control’s dimensions; the control automatically clamps these values, but checking helps during debugging. |
| Respond to Resize Events      | If the control does not appear to adjust its corners correctly, verify that the OnSizeChanged event is triggering the UpdateControlRegion method.                    |
| Use MakeRadial for Uniformity | For a truly circular appearance, always use MakeRadial and set the control's size to a square dimension.                                                             |

#### Integration Checklist

| Checklist Item                        | Status    |
| ------------------------------------- | --------- |
| Define desired corner radii           | \[ ] Done |
| Decide on using MakeRadial            | \[ ] Done |
| Set initial control size and location | \[ ] Done |
| Test across different UI themes       | \[ ] Done |
| Verify responsiveness upon resizing   | \[ ] Done |

***

This comprehensive documentation should assist developers in understanding, integrating, and leveraging the Rounded Corners & Shape Customization feature of the provided control effectively.
