> 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/progress-and-loading/siticone-hprogressbar/rounded-corners-and-shape-customization.md).
# Rounded Corners & Shape Customization
This feature allows developers to customize the curvature of each corner of the progress bar, enabling unique and visually appealing shapes.
## 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
// Initialize the progress bar with custom corner radii
SiticoneHProgressBar progressBar = new SiticoneHProgressBar();
progressBar.CornerRadiusTopLeft = 20;
progressBar.CornerRadiusTopRight = 20;
progressBar.CornerRadiusBottomLeft = 10;
progressBar.CornerRadiusBottomRight = 10;
this.Controls.Add(progressBar);
` |
| Perfectly Circular Control | To provide a circular progress bar by enabling MakeRadial, which automatically sets each corner to form a circle. | `csharp
// Create a perfectly circular progress bar
SiticoneHProgressBar progressBar = new SiticoneHProgressBar();
progressBar.MakeRadial = true;
progressBar.Size = new Size(100, 100);
this.Controls.Add(progressBar);
` |
| Responsive Design | When designing a responsive UI, ensure that the rounded corners adjust gracefully as the control is resized. | `csharp
// Dynamic resizing example
SiticoneHProgressBar progressBar = new SiticoneHProgressBar();
progressBar.MakeRadial = true;
progressBar.Dock = DockStyle.Fill;
this.Controls.Add(progressBar);
` |
***
### 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.