Appearance and Styling

Appearance & Styling feature provides a rich set of properties to customize the visual presentation of the text box control.

Overview

This section documents all front‑facing properties and behaviors related to customizing the visual aspects of the text box control as provided in the code, including border, fill, shadow, corner, and padding configurations.

Developers can use these properties to define static or dynamic visual styles and animated effects for a modern UI experience.

---

Key Points

Aspect	Description
Border Customization	Offers options to enable/disable the border, select styles (solid, dashed, dotted), set thickness, and choose colors (with or without gradients) for normal, hover, and focused states.
Fill Customization	Supports both solid colors and gradient fills to determine the background appearance of the control.
Shadow Effects	Allows the addition of a drop shadow with customizable color, blur, animation duration, and blinking options.
Corner Styling	Provides properties for independently setting the corner radius for each corner, enabling non-rectangular shapes.
Padding & Layout	Defines internal text padding to manage the layout and spacing within the control.

---

Best Practices

Practice Area	Recommendation
Consistency	Use consistent border and fill styles across your application to maintain a unified look and feel.
Performance	Limit the use of animated effects (such as shadow blink or gradient transitions) if performance is a concern.
Readability	Ensure that text and placeholder colors contrast well with the background and border colors for optimum readability.
Responsive Design	Adjust padding and corner radius properties to maintain visual quality across different control sizes and screen resolutions.

---

Common Pitfalls

Pitfall	Description
Overuse of Animations	Excessive use of animated transitions for borders or shadows may distract users and impact performance.
Inconsistent Styling	Mixing multiple border and fill styles without coordination can result in a visually cluttered interface.
Inadequate Contrast	Poorly chosen fill and border colors may reduce text readability, especially in disabled or read-only modes.
Incorrect Padding Values	Setting padding values too high or too low can cause misalignment of text or unwanted clipping of content.

---

Real Life Usage Scenarios

Scenario	Description
Themed Application Interface	Use gradient border and fill properties to match the application’s color scheme, dynamically updating focus and hover colors to align with the theme.
Interactive Form Controls	Apply drop shadow effects and rounded corners to create modern, interactive form fields that stand out and improve user engagement.
Read-Only Data Displays	Customize read-only border and fill colors to visually differentiate non-editable data areas from active input fields.
Accessibility Enhancements	Optimize text contrast by adjusting appearance properties to support high-contrast themes, ensuring better accessibility for all users.

---

Troubleshooting Tips

Issue	Suggested Solution
Border Not Appearing	Ensure that ShowBorder is set to true and BorderSize is greater than 0; also verify that state-specific properties (e.g., hover/focus) are set appropriately.
Unexpected Color Behavior	Confirm that the correct color properties (e.g., SolidBorderColor, HoverBorderColor1/2, FillColor1/2) are assigned and that gradient usage is not conflicting.
Animation Performance Lag	Consider reducing the animation duration (e.g., lower ShadowAnimationDuration) or disabling some animated effects if performance is impacted.
Shadow Not Visible	Verify that EnableDropShadow is true and check that the shadow properties such as ShadowBlur and internal opacity values are correctly configured.

---

Property Reference

Below is a reference table of key appearance properties:

Property Name	Type	Description
ShowBorder	bool	Determines whether the border is rendered.
BorderSize	int	Sets the thickness of the border.
SolidBorderColor	Color	Color used for the border when not using gradients.
SolidBorderFocusColor	Color	Border color when the control is focused.
SolidBorderHoverColor	Color	Border color when the mouse hovers over the control.
UseBorderGradient	bool	Enables the use of gradient colors for the border.
BorderColor1	Color	Starting color for the border gradient.
BorderColor2	Color	Ending color for the border gradient.
BorderGradientMode	LinearGradientMode	Direction of the border gradient (Horizontal or Vertical).
UseFillGradient	bool	Enables gradient fill for the control’s background.
FillColor1	Color	Primary color for the background fill.
FillColor2	Color	Secondary color for the gradient fill.
FillGradientMode	LinearGradientMode	Direction of the fill gradient.
EnableDropShadow	bool	Determines whether a drop shadow is rendered.
ShadowColor	Color	The color of the drop shadow.
ShadowBlur	int	The blur intensity for the shadow effect.
ShadowAnimationDuration	int	Duration for the shadow fade animation in milliseconds.
CornerRadiusTopLeft	int	Rounding for the top-left corner.
CornerRadiusTopRight	int	Rounding for the top-right corner.
CornerRadiusBottomLeft	int	Rounding for the bottom-left corner.
CornerRadiusBottomRight	int	Rounding for the bottom-right corner.
TextPadding	Padding	Sets the internal padding for the text within the control.

---

Code Examples

Below are several code examples that demonstrate how to use the Appearance & Styling properties in practice.

Example 1: Basic Appearance Configuration

This example sets a complete set of appearance properties including border, fill, shadow, corner styling, and text padding.

using System;
using System.Drawing;
using System.Windows.Forms;
using System.Drawing.Drawing2D;
using SiticoneNetFrameworkUI;

public class BasicAppearanceForm : Form
{
    public BasicAppearanceForm()
    {
        // Create an instance of the custom text box control
        var customTextBox = new SiticoneTextBox
        {
            // Border properties
            ShowBorder = true,
            BorderSize = 2,
            SolidBorderColor = Color.LightSlateGray,
            SolidBorderFocusColor = Color.Blue,
            SolidBorderHoverColor = Color.Gray,
            UseBorderGradient = true,
            BorderColor1 = Color.LightSlateGray,
            BorderColor2 = Color.SlateBlue,
            BorderGradientMode = LinearGradientMode.Horizontal,

            // Fill properties
            UseFillGradient = true,
            FillColor1 = Color.White,
            FillColor2 = Color.LightGray,
            FillGradientMode = LinearGradientMode.Vertical,

            // Shadow properties
            EnableDropShadow = true,
            ShadowColor = Color.FromArgb(15, Color.Black),
            ShadowBlur = 10,
            ShadowAnimationDuration = 300,

            // Corner styling properties
            CornerRadiusTopLeft = 5,
            CornerRadiusTopRight = 5,
            CornerRadiusBottomLeft = 5,
            CornerRadiusBottomRight = 5,

            // Padding settings for the text
            TextPadding = new Padding(15, 5, 15, 5),

            // Set location and size of the control
            Location = new Point(20, 20),
            Size = new Size(250, 40)
        };

        // Add the control to the form
        Controls.Add(customTextBox);

        // Configure the form
        Text = "Basic Appearance Configuration";
        Size = new Size(300, 150);
    }

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

---

Example 2: Dynamic Runtime Appearance Update

This example shows how to update appearance properties at runtime (for example, in response to a button click) to demonstrate dynamic customization.

using System;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Windows.Forms;
using SiticoneNetFrameworkUI;

public class DynamicAppearanceForm : Form
{
    private SiticoneTextBox customTextBox;
    private Button updateStyleButton;

    public DynamicAppearanceForm()
    {
        // Initialize the custom text box
        customTextBox = new SiticoneTextBox
        {
            ShowBorder = true,
            BorderSize = 2,
            SolidBorderColor = Color.LightSlateGray,
            UseFillGradient = true,
            FillColor1 = Color.White,
            FillColor2 = Color.LightGray,
            EnableDropShadow = true,
            CornerRadiusTopLeft = 5,
            CornerRadiusTopRight = 5,
            CornerRadiusBottomLeft = 5,
            CornerRadiusBottomRight = 5,
            TextPadding = new Padding(10, 5, 10, 5),
            Location = new Point(20, 20),
            Size = new Size(250, 40)
        };

        // Initialize a button to update the style
        updateStyleButton = new Button
        {
            Text = "Change Appearance",
            Location = new Point(20, 80),
            Size = new Size(250, 30)
        };
        updateStyleButton.Click += UpdateStyleButton_Click;

        // Add controls to the form
        Controls.Add(customTextBox);
        Controls.Add(updateStyleButton);

        // Configure the form
        Text = "Dynamic Appearance Update";
        Size = new Size(300, 180);
    }

    private void UpdateStyleButton_Click(object sender, EventArgs e)
    {
        // Update border properties to a new style
        customTextBox.UseBorderGradient = false;
        customTextBox.SolidBorderColor = Color.DarkGreen;
        customTextBox.BorderSize = 3;

        // Update fill properties to a solid color
        customTextBox.UseFillGradient = false;
        customTextBox.SolidFillColor = Color.Honeydew;

        // Update shadow properties
        customTextBox.EnableDropShadow = true;
        customTextBox.ShadowColor = Color.FromArgb(25, Color.Green);
        customTextBox.ShadowBlur = 15;
        customTextBox.ShadowAnimationDuration = 500;

        // Update corner styling to create more pronounced curves
        customTextBox.CornerRadiusTopLeft = 10;
        customTextBox.CornerRadiusTopRight = 10;
        customTextBox.CornerRadiusBottomLeft = 10;
        customTextBox.CornerRadiusBottomRight = 10;

        // Update text padding for better spacing
        customTextBox.TextPadding = new Padding(20, 10, 20, 10);
    }

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

---

Example 3: Combining Gradient and Shadow Effects

This example demonstrates how to combine gradient border and fill properties with a drop shadow to create a modern visual effect.

using System;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Windows.Forms;
using SiticoneNetFrameworkUI;

public class CombinedEffectsForm : Form
{
    public CombinedEffectsForm()
    {
        var customTextBox = new SiticoneTextBox
        {
            // Gradient border properties
            ShowBorder = true,
            BorderSize = 2,
            UseBorderGradient = true,
            BorderColor1 = Color.LightSlateGray,
            BorderColor2 = Color.SlateBlue,
            BorderGradientMode = LinearGradientMode.Horizontal,

            // Gradient fill properties
            UseFillGradient = true,
            FillColor1 = Color.White,
            FillColor2 = Color.LightBlue,
            FillGradientMode = LinearGradientMode.Vertical,

            // Drop shadow properties
            EnableDropShadow = true,
            ShadowColor = Color.FromArgb(20, Color.Black),
            ShadowBlur = 12,
            ShadowAnimationDuration = 250,

            // Corner styling for a smooth appearance
            CornerRadiusTopLeft = 8,
            CornerRadiusTopRight = 8,
            CornerRadiusBottomLeft = 8,
            CornerRadiusBottomRight = 8,

            // Padding for text content
            TextPadding = new Padding(12, 4, 12, 4),

            // Control location and size
            Location = new Point(30, 30),
            Size = new Size(300, 50)
        };

        Controls.Add(customTextBox);
        Text = "Combined Effects Demo";
        Size = new Size(380, 140);
    }

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

---

Frequently Asked Questions

Question	Answer
How do I switch between gradient and solid borders?	Set the UseBorderGradient property to true for gradients or false for a solid border, and adjust the respective color properties accordingly.
Can I animate the appearance changes?	Yes, properties such as shadow opacity and border color transitions are animated via internal timers; ensure that animation duration properties (like ShadowAnimationDuration) are set appropriately.
What should I do if my text appears misaligned?	Adjust the TextPadding property to ensure that the text is centered and spaced correctly within the control.
How can I improve performance if animations are too heavy?	Consider reducing the animation durations or disabling certain animated effects such as shadow blinking if performance becomes an issue.
Is it possible to change the corner radii at runtime?	Yes, the corner radius properties (CornerRadiusTopLeft, etc.) can be updated at runtime to change the shape of the control dynamically.
How do I ensure my control adheres to the overall application theme?	Use the gradient and color properties in combination with dynamic state changes (such as focus and hover events) to match your application's design standards.
What is the recommended approach for responsive design?	Use relative padding and dynamic adjustments of corner radii and border sizes to ensure that the control scales well across different resolutions and sizes.
How can I verify that state-specific styling (hover/focus) is working?	Test the control by simulating hover and focus events in your application and observe the changes in border color or gradient transitions as defined by the properties.

---

Integration Checklist

Step	Verification
Border and Fill Configuration	Confirm that properties such as ShowBorder, BorderSize, SolidBorderColor, FillColor1, and FillColor2 are correctly set.
Gradient Setup	Verify that UseBorderGradient and UseFillGradient are enabled when needed and that gradient colors and modes are defined correctly.
Shadow and Corner Settings	Ensure that EnableDropShadow, ShadowBlur, and corner radius properties meet the desired design specifications.
Text Padding and Layout	Adjust the TextPadding values to guarantee that text is properly aligned and spaced within the control.
Runtime Behavior	Test dynamic changes by updating properties at runtime and observing their effects on hover, focus, and read-only states.
System Theme Integration (if used)	Check that dynamic theme changes (if using TrackSystemTheme) update the control’s appearance consistently with the system settings.
Event Handling Verification	Ensure that any changes trigger the appropriate events (e.g., focus changes, theme changes) and that visual feedback is provided as expected.
Accessibility Compliance	Verify that color choices and text alignments meet accessibility standards for contrast and readability.
Cross-Platform Consistency	Confirm that the control renders consistently across different versions of Windows and with various DPI settings if applicable.

---

Additional Sections

Review

Review Aspect	Details
Customization Flexibility	The code provides an extensive range of properties that allow deep customization of the control's appearance.
Integration Simplicity	With clear property names and grouped configuration options, integrating and customizing the control is straightforward.
Visual Consistency	Proper usage of gradient, border, and shadow properties ensures a professional and consistent user interface design.

---

Summary

The Appearance & Styling feature of the text box control offers extensive customization options covering borders, fill, shadows, corners, and padding.

By adjusting these properties, developers can create visually distinct and interactive controls tailored to the specific design requirements of their applications.