Siticone Phone Number Box Advanced

The SiticonePhoneNumberBoxAdvanced is a flexible text control tailored for phone number input that allows complete customization of formatting patterns. Unlike its standard counterpart, this advanced version focuses on mask-based formatting (e.g., (###) ###-####) and offers enhanced visual customization options like material design styles, custom border radius control, and clear buttons.

Formatting & Masking

Define exactly how the phone number should be displayed using custom mask patterns.

Property	Type	Description & Usage Example
`Format`	string	phoneBox.Format = "(###) ###-####"; The mask pattern. Use `#` to represent a digit. All other characters (spaces, dashes, parentheses) are treated as literals and inserted automatically.
`EnableFormatting`	bool	phoneBox.EnableFormatting = true; Master switch to toggle the masking behavior on or off.

Appearance & Visual Style

Extensive options to tailor the look and feel, including border styles, rounded corners, and shadow effects.

Property	Type	Description
`TextBoxType`	Enum	`Default` (Full border) or `Material` (Bottom border only).
`BorderColor`	Color	The color of the border in its idle state.
`FocusBorderColor`	Color	The border color when the control has focus.
`HoverBorderColor`	Color	The border color when the mouse hovers over the control.
`HoverOpacity`	float	Controls the opacity transition effect on hover (0.0 to 1.0).
`CornerRadius...`	int	Individual radius settings for TopLeft, TopRight, BottomLeft, and BottomRight corners.
`MakeRadial`	bool	Automatically sets all corner radii to create a pill-shaped control.

Interaction & Feedback

Features to improve user interaction and provide visual cues.

Property	Type	Description
`PlaceholderText`	string	Text displayed when the control is empty.
`PlaceholderColor`	Color	Color of the placeholder text.
`ShowClearButton`	bool	Shows a clickable 'X' button to clear input when focused and not empty.
`IsReadOnly`	bool	Prevents editing while maintaining a distinct visual style defined by `ReadOnlyColors`.

Images & Icons

Add context or branding with integrated icons that react to state changes.

Property	Type	Description
`IdleImage`	Image	Icon shown by default.
`HoverImage`	Image	Icon shown on hover.
`FocusImage`	Image	Icon shown when focused.
`ImagePosition`	Enum	Left or Right alignment for the image.

Events

A suite of events for handling changes and interactions.

TextContentChangedEnhanced

// Fired when the text content changes.
// Provides access to the old and new text values.
phoneBox.TextContentChangedEnhanced += (s, e) => 
{
                Console.WriteLine($"Changed from '{e.OldValue}' to '{e.NewValue}'");
    
                // Example: Check length
                if (e.NewValue.Length == 14) 
    {
        btnSubmit.Enabled = true;
    }
};

ReadOnlyInteractionAttemptedEnhanced

// Fired when a user tries to edit the control while IsReadOnly is true.
phoneBox.ReadOnlyInteractionAttemptedEnhanced += (s, e) => 
{
                MessageBox.Show("This field cannot be edited directly.");
};

Designer Support

Includes a rich Smart Tag panel for rapid configuration directly in the Visual Studio designer.

Category	Features
`Theme Presets`	Apply pre-built color themes like Light, Dark, Corporate Blue, Success Green, etc.
`Formatting`	Quickly set common masks (International) or toggle formatting.
`Appearance`	Shortcuts for Placeholder Text, Clear Button visibility, Read-Only mode, and Borders.
`Settings`	Copy/Paste style settings between controls.

Usage Examples

Example 1: US Phone Format

Standard setup for US numbers with a specific mask.

C# - US Format

private void SetupUSFormat()
{
    phoneBox.EnableFormatting = true;
    phoneBox.Format = "(###) ###-####";
    phoneBox.PlaceholderText = "(555) 555-5555";
    
                // Visuals
    phoneBox.BorderColor = Color.Silver;
    phoneBox.FocusBorderColor = Color.DodgerBlue;
}

Example 2: International Format with Country Code

Setup for international numbers requiring a country code prefix.

C# - International Format

private void SetupInternational()
{
    phoneBox.EnableFormatting = true;
    phoneBox.Format = "+## ### ### ####"; // e.g., +44 7911 123456
    phoneBox.PlaceholderText = "+44 ...";
    
                // Enable clear button for easy reset
    phoneBox.ShowClearButton = true;
}

Example 3: Dynamic Theming

Using the built-in theme methods to change the control's look at runtime.

C# - Apply Theme

private void ApplyThemeStyle(bool isDark)
{
                if (isDark)
    {
                // Apply dark theme settings manually or use a helper if exposed
        phoneBox.ApplyDarkTheme();
    }
                else
    {
        phoneBox.ApplyCorporateBlue();
    }
}

Example 4: Material Design Style

Configuring the control to use the Material Design aesthetic (bottom border only).

C# - Material Design

private void SetupMaterialStyle()
{
    phoneBox.TextBoxType = PhoneNumberTextBoxType.Material;
    phoneBox.BackgroundColor = Color.WhiteSmoke;
    phoneBox.BorderColor = Color.Gray;
    phoneBox.FocusBorderColor = Color.DeepPink;
    
                // Remove rounding for true material feel
    phoneBox.CornerRadius = 0;
}

Example 5: Read-Only Display

Configuring the control to display a saved number without allowing edits.

C# - ReadOnly Mode

private void DisplaySavedNumber(string number)
{
    phoneBox.TextContent = number;
    phoneBox.IsReadOnly = true;
    
                // Customize read-only appearance
    phoneBox.ReadOnlyColors.BackgroundColor = Color.White;
    phoneBox.ReadOnlyColors.BorderColor = Color.Transparent;
    phoneBox.ReadOnlyColors.TextColor = Color.DimGray;
}