Corner Radius

Allows you to define the rounded shape of each corner of the Siticone ToggleButton, creating smooth and modern UI edges.

Overview

The Corner Radius feature provides granular control over each corner of the SiticoneToggleButton. By customizing these properties, you can achieve anything from perfectly square corners to fully rounded pill-shaped edges. This flexibility helps the control fit seamlessly into various design styles, whether minimalistic or playful.

---

Key API Members

Below is a table summarizing the corner radius properties that let you set the curvature of each corner independently:

Property	Type	Description	Example
TopLeftRadius	float	Defines the top-left corner’s radius.	myToggle.TopLeftRadius = 5f;
TopRightRadius	float	Defines the top-right corner’s radius.	myToggle.TopRightRadius = 5f;
BottomLeftRadius	float	Defines the bottom-left corner’s radius.	myToggle.BottomLeftRadius = 5f;
BottomRightRadius	float	Defines the bottom-right corner’s radius.	myToggle.BottomRightRadius = 5f;

---

Key Points to Note

1. Independent Corner Control

   • Each corner can be independently set, enabling asymmetrical shapes if desired.

2. Maximum Radius Constraints

   • If a corner’s radius is too large relative to the control’s width/height, it will be clamped to a sensible value automatically.

3. Impact on Border & Background

   • Rounding the corners affects how both the border and background are rendered. All edges follow the same curvature.

4. Combination with Other Appearance Settings

   • Color properties (ToggledBackColor, UntoggledBackColor, etc.) still apply to the newly shaped corners.

---

Usage Example

// Assume you have a SiticoneToggleButton named myToggle

// Make the top corners more rounded than the bottom corners
myToggle.TopLeftRadius = 10f;
myToggle.TopRightRadius = 10f;
myToggle.BottomLeftRadius = 3f;
myToggle.BottomRightRadius = 3f;

// You can still configure other appearance settings in tandem
myToggle.ToggledBackColor = Color.MediumSlateBlue;
myToggle.UntoggledBackColor = Color.LightGray;
myToggle.BorderThickness = 2f;
myToggle.BorderStyleOption = SiticoneToggleButton.BorderStyleOptions.Solid;

Tip: Experiment with different radius values to achieve styles like pill-shaped toggles (by making all corners the same larger radius).

---

Best Practices to Create Beautiful UI and Apps

Practice	Reason
Match the corner radius of your toggle button to other UI elements’ rounding.	Ensures design consistency across the application.
Use moderate values for corners (3–10 px) in professional, modern UIs.	Looks visually pleasing without appearing too exaggerated or too sharp.
Consider setting all four radii the same to create pill-shaped toggles.	Helps the button stand out as a standard toggle-like switch.
Combine rounded corners with subtle border styles (e.g., Solid or Dotted).	Creates a neat, polished look that can enhance user experience.
Test hover/press color overlays on rounded corners.	Ensures the overlays appear smooth and consistent at the edges.

---

Common Pitfalls and Design Considerations

Pitfall	Mitigation / Recommendation
Setting large radius values on a very small control size.	This can lead to disproportionate edges or corners that appear clipped; adjust carefully.
Using vastly different values for each corner without intention.	Can produce an odd, inconsistent shape; plan asymmetry deliberately for desired aesthetics.
Not considering border thickness when selecting radius values.	Thicker borders can make smaller radius differences harder to notice.
Overlapping or conflicting designs with other round UI elements.	Ensure overall app design remains cohesive if multiple controls share or differ in style.

---

Review and Summary

• What You Learned: How to customize each corner radius of the SiticoneToggleButton, allowing for unique shapes and UI styling.

• Why It’s Important: Rounded corners are a staple of modern UI design, offering a softer, more inviting look that often aligns with both desktop and web design trends.

• How to Move Forward: Experiment with various corner radii to match your application’s branding or layout scheme. Combine this with Border Settings and Appearance & Text to create cohesive, visually pleasing toggles.

By adjusting each corner radius, you can seamlessly blend the SiticoneToggleButton into virtually any user interface design, ensuring both functional clarity and aesthetic appeal.