Corner and Fill Config

This feature enables developers to tailor the control’s outer shape and background appearance by adjusting the corner radii and fill properties, resulting in a refined and modern user interface.

Overview

The Corner & Fill Customization feature is managed through a series of public properties that allow you to define how the control’s corners are rounded and how its background is rendered. These properties provide control over both a solid background and a gradient fill, enabling you to achieve a variety of visual styles.

Property	Type	Default	Description
CornerRadiusTopLeft	int	0	Defines the rounding radius for the top-left corner of the control.
CornerRadiusTopRight	int	0	Defines the rounding radius for the top-right corner of the control.
CornerRadiusBottomLeft	int	0	Defines the rounding radius for the bottom-left corner of the control.
CornerRadiusBottomRight	int	0	Defines the rounding radius for the bottom-right corner of the control.
UseFillGradient	bool	false	Specifies whether the background is filled with a gradient instead of a solid color.
FillColor1	Color	White	The primary color used for the background fill or as the starting color for a gradient fill.
FillColor2	Color	White	The secondary color used for the background gradient fill when UseFillGradient is enabled.
FillGradientMode	LinearGradientMode	Horizontal	Determines the direction (e.g., Horizontal, Vertical) of the gradient fill when enabled.

---

Key Points

Aspect	Detail
Corner Customization	CornerRadiusTopLeft, CornerRadiusTopRight, CornerRadiusBottomLeft, and CornerRadiusBottomRight allow for independent control of each corner's roundness.
Fill Options	UseFillGradient toggles between a solid background (using FillColor1) and a gradient background (using FillColor1, FillColor2, and FillGradientMode).
Visual Impact	Adjusting the corner radii and fill settings can dramatically change the control’s appearance, making it either sharp and modern or soft and rounded.

---

Best Practices

Practice	Explanation
Maintain Consistent Corner Radii	Use similar values for all four corners for a uniform look unless a specific design calls for asymmetric rounding.
Use Gradients to Enhance Depth	Enable UseFillGradient with complementary FillColor1 and FillColor2 values to create a subtle depth effect that matches your theme.
Balance Solid and Gradient Fills	Choose a solid fill when simplicity is desired and a gradient fill when you wish to add visual complexity without overwhelming the design.
Test on Different Resolutions	Verify that the corner radii and fill effects look good on different screen sizes and resolutions to ensure consistent appearance.

---

Common Pitfalls

Pitfall	How to Avoid
Over-Rounded Corners Causing Layout Issues	Avoid setting excessively high values for corner radii that may reduce the usable content area or distort the control’s proportions.
Inconsistent Fill Colors Leading to Clashing Themes	Ensure that FillColor1 and FillColor2 complement each other and the overall color scheme of your application.
Ignoring Gradient Direction Impact	Test different FillGradientMode settings to confirm that the gradient direction aligns with your design expectations.
Manual Padding Interference	Let the control handle text padding adjustments automatically when using the corner customization features, unless explicit overrides are required.

---

Usage Scenarios

Scenario	Example Use Case
Modern Rounded Controls	Set all corner radii to a non-zero value (e.g., 10) for a soft, rounded look that appeals to modern UI design trends.
Subtle Gradient Backgrounds	Enable UseFillGradient with harmonious FillColor1 and FillColor2 values to create a smooth gradient background for enhanced depth.
Distinct Visual Sections	Customize corner radii to emphasize particular edges (for example, only rounding the top corners) to indicate a header section.
Theme-Dependent Fill Customization	Dynamically update FillColor1, FillColor2, and FillGradientMode based on the current theme (e.g., light or dark mode) to maintain consistency.

---

Code Examples

Example 1: Basic Rounded Corners with Solid Fill This sample demonstrates setting uniform rounded corners with a solid background fill.

// Instantiate the control
SiticonePhoneNumberBox phoneNumberBox = new SiticonePhoneNumberBox();

// Set uniform rounded corners for a modern look
phoneNumberBox.CornerRadiusTopLeft = 10;
phoneNumberBox.CornerRadiusTopRight = 10;
phoneNumberBox.CornerRadiusBottomLeft = 10;
phoneNumberBox.CornerRadiusBottomRight = 10;

// Use a solid fill with a custom color
phoneNumberBox.UseFillGradient = false;
phoneNumberBox.SolidFillColor = Color.White;  // This property is used when gradients are not enabled

// Set location and size, then add the control to the form
phoneNumberBox.Location = new Point(20, 20);
phoneNumberBox.Size = new Size(250, 40);
this.Controls.Add(phoneNumberBox);

Example 2: Gradient Fill with Custom Gradient Direction This sample shows how to enable a gradient background with a horizontal transition.

SiticonePhoneNumberBox phoneNumberBox = new SiticonePhoneNumberBox();

// Set corner radii to achieve a rounded look
phoneNumberBox.CornerRadiusTopLeft = 8;
phoneNumberBox.CornerRadiusTopRight = 8;
phoneNumberBox.CornerRadiusBottomLeft = 8;
phoneNumberBox.CornerRadiusBottomRight = 8;

// Enable gradient fill and configure colors and direction
phoneNumberBox.UseFillGradient = true;
phoneNumberBox.FillColor1 = Color.LightBlue;
phoneNumberBox.FillColor2 = Color.White;
phoneNumberBox.FillGradientMode = LinearGradientMode.Horizontal;

// Set location and size on the form
phoneNumberBox.Location = new Point(20, 80);
phoneNumberBox.Size = new Size(250, 40);
this.Controls.Add(phoneNumberBox);

Example 3: Asymmetric Corners for a Unique Design This example demonstrates how to use different corner radii for each corner to create a unique control shape.

SiticonePhoneNumberBox phoneNumberBox = new SiticonePhoneNumberBox();

// Set asymmetric corner radii for a custom shape
phoneNumberBox.CornerRadiusTopLeft = 5;
phoneNumberBox.CornerRadiusTopRight = 15;
phoneNumberBox.CornerRadiusBottomLeft = 15;
phoneNumberBox.CornerRadiusBottomRight = 5;

// Use a solid background fill
phoneNumberBox.UseFillGradient = false;
phoneNumberBox.SolidFillColor = Color.Beige;

// Position the control and add it to the form
phoneNumberBox.Location = new Point(20, 140);
phoneNumberBox.Size = new Size(250, 40);
this.Controls.Add(phoneNumberBox);

---

Review

Aspect	Review Comment
Versatility	The properties offer a wide range of customization options for both the control's shape (via corner radii) and background appearance (via fill settings).
Design Impact	Adjusting the corners and fill can dramatically alter the control’s visual appeal, enabling designs that range from minimalist to highly stylized.
Ease of Integration	The provided code examples show straightforward integration into a WinForms application, making it easy to achieve the desired aesthetic.

---

Summary

The Corner & Fill Customization feature of the SiticonePhoneNumberBox control empowers developers to refine the control's visual appearance by adjusting the corner radii and background fill options. Whether you opt for a solid color or a gradient background, and whether you choose uniform or asymmetric corner rounding, this feature provides the flexibility to create a modern, cohesive design that fits seamlessly into your application's UI.

---

Additional Notes

Note Type	Detail
Extensibility	The corner and fill properties can be dynamically updated at runtime, allowing for adaptive designs based on user interaction or theme changes.
Integration Tips	Coordinate these visual customization settings with border, shadow, and text properties to ensure a harmonious overall design.
Debugging	Verify that changes to corner radii and fill properties correctly update the control’s appearance by testing across different control sizes and resolutions.