Appearance Customization

A feature that provides extensive options to style the control’s border, background, corners, and displayed text for a refined and integrated user interface.

Overview

This section covers properties related to the visual design of the control. It includes settings for border visibility and colors, background fill and gradient effects, individual corner radii, and text alignment. These properties enable developers to customize the control's appearance to match their application's theme and enhance user experience.

Property Overview Table

Property	Description	Data Type	Default Value
ShowBorder	Determines whether the control's border is drawn.	bool	true
BorderColor	Sets the default border color of the control.	Color	Gray
HoverBorderColor	Specifies the border color when the mouse hovers over the control.	Color	Blue
ActiveBorderColor	Specifies the border color when the control is focused.	Color	DodgerBlue
FillColor	Sets the solid background fill color (used when gradient is disabled).	Color	White
UseGradient	Enables or disables the use of a gradient background.	bool	false
GradientColorStart	The starting color for the gradient background.	Color	White
GradientColorEnd	The ending color for the gradient background.	Color	LightGray
GradientMode	Defines the direction or style of the gradient (Horizontal, Vertical, ForwardDiagonal, BackwardDiagonal).	GradientModes	None
CornerRadiusTopLeft	Radius of the top-left corner, allowing for rounded corner effects.	int	4
CornerRadiusTopRight	Radius of the top-right corner.	int	4
CornerRadiusBottomRight	Radius of the bottom-right corner.	int	4
CornerRadiusBottomLeft	Radius of the bottom-left corner.	int	4
TextAlignment	Sets the horizontal alignment (Left, Center, or Right) of the displayed numeric value.	TextAlignment	Right
Font	(Inherited from Control) Sets the font used to display the numeric value.	Font	Segoe UI, 11f, Bold
ForeColor	(Inherited from Control) Sets the color of the displayed numeric value.	Color	Black

---

Code Examples and Integration

The following code examples illustrate how to integrate and configure the Appearance Customization feature into a .NET WinForms application.

Example 1: Basic Appearance Setup

using System.Drawing;
using SiticoneNetFrameworkUI;
using SiticoneNetFrameworkUI.Helpers.Enum;

// Create an instance of the control and set its basic appearance properties.
var numericUpDown = new SiticoneUpDown
{
    // Border settings
    ShowBorder = true,
    BorderColor = Color.DarkGray,
    HoverBorderColor = Color.MediumBlue,
    ActiveBorderColor = Color.DeepSkyBlue,

    // Background settings
    UseGradient = false,
    FillColor = Color.White,

    // Corner radii for a modern rounded look
    CornerRadiusTopLeft = 6,
    CornerRadiusTopRight = 6,
    CornerRadiusBottomRight = 6,
    CornerRadiusBottomLeft = 6,

    // Text appearance
    TextAlignment = SiticoneNetFrameworkUI.Helpers.Text.TextAlignment.Center,
    Font = new Font("Segoe UI", 11f, FontStyle.Bold),
    ForeColor = Color.Black
};

// Add the control to your form.
this.Controls.Add(numericUpDown);

Example 2: Gradient Background and Custom Border

using System.Drawing;
using SiticoneNetFrameworkUI;
using SiticoneNetFrameworkUI.Helpers.Enum;

// Configure the control to use a gradient background.
var numericUpDown = new SiticoneUpDown
{
    // Enable gradient background and define the gradient colors.
    UseGradient = true,
    GradientColorStart = Color.LightYellow,
    GradientColorEnd = Color.Orange,
    GradientMode = GradientModes.Vertical,

    // Customize the border
    ShowBorder = true,
    BorderColor = Color.OrangeRed,
    HoverBorderColor = Color.Red,
    ActiveBorderColor = Color.DarkRed,

    // Set corner radii for smooth curves.
    CornerRadiusTopLeft = 8,
    CornerRadiusTopRight = 8,
    CornerRadiusBottomRight = 8,
    CornerRadiusBottomLeft = 8,

    // Ensure text remains clear and centered.
    TextAlignment = SiticoneNetFrameworkUI.Helpers.Text.TextAlignment.Center,
    Font = new Font("Segoe UI", 11f, FontStyle.Bold),
    ForeColor = Color.DarkSlateGray
};

// Add the control to the form.
this.Controls.Add(numericUpDown);

Example 3: Full Customization for a Modern UI

using System.Drawing;
using SiticoneNetFrameworkUI;
using SiticoneNetFrameworkUI.Helpers.Enum;

// Set up a fully customized numeric up/down control.
var numericUpDown = new SiticoneUpDown
{
    // Border properties
    ShowBorder = true,
    BorderColor = Color.SlateGray,
    HoverBorderColor = Color.CornflowerBlue,
    ActiveBorderColor = Color.DodgerBlue,

    // Background fill using a gradient for a modern look.
    UseGradient = true,
    GradientColorStart = Color.WhiteSmoke,
    GradientColorEnd = Color.LightSteelBlue,
    GradientMode = GradientModes.ForwardDiagonal,
    FillColor = Color.White, // Fallback color if gradient is disabled

    // Rounded corners to match modern UI standards.
    CornerRadiusTopLeft = 10,
    CornerRadiusTopRight = 10,
    CornerRadiusBottomRight = 10,
    CornerRadiusBottomLeft = 10,

    // Text styling
    TextAlignment = SiticoneNetFrameworkUI.Helpers.Text.TextAlignment.Right,
    Font = new Font("Segoe UI", 11f, FontStyle.Bold),
    ForeColor = Color.Black
};

// Add the control to your form.
this.Controls.Add(numericUpDown);

---

Key Points

Key Point	Details
Customizable Borders	Developers can control the border appearance through properties like ShowBorder, BorderColor, HoverBorderColor, and ActiveBorderColor.
Flexible Background Options	The control supports both solid fill and gradient backgrounds with customizable colors and gradient modes.
Individual Corner Radii	Each corner's radius can be set independently to achieve the desired rounded or sharp edge appearance.
Text Alignment and Styling	TextAlignment, Font, and ForeColor allow developers to adjust how the numeric value is displayed for clarity and consistency.

---

Best Practices

Recommendation	Explanation
Use consistent color schemes	Ensure that border and background colors align with your application's theme for a unified user experience.
Leverage gradients sparingly	While gradients add depth, too many contrasting colors can make the control appear cluttered; choose subtle gradients where possible.
Match corner radii to overall UI design	Align the rounded corners of the control with other UI elements to maintain visual consistency.
Test text alignment in various sizes	Verify that the chosen TextAlignment and Font settings work well at different control sizes and resolutions.

---

Common Pitfalls

Pitfall	How to Avoid It
Overcomplicating the visual design	Avoid using too many contrasting colors or overly aggressive gradients that may disrupt a cohesive design.
Ignoring control scaling	Ensure that border thickness, corner radii, and text sizes are balanced when the control is resized.
Mismatched color themes	Consistently test the control's appearance across different application themes to avoid clashes with the UI palette.
Overriding default styles inadvertently	When customizing appearance properties, verify that changes do not unintentionally override essential visual cues such as focus or hover states.

---

Usage Scenarios

Scenario	Description	Example Use Case
Themed Applications	Ideal for applications that require strict adherence to a specific color and design palette.	Enterprise software with corporate branding.
Modern UI Designs	Perfect for applications with a modern, flat, or gradient-heavy design language.	Consumer apps or dashboards with sleek visual elements.
Custom Component Libraries	Use in custom control libraries where components need to share a consistent and customizable appearance.	Reusable UI libraries in commercial software products.

---

Review

The Appearance Customization feature of the advanced numeric up/down control provides robust options to align the control with any visual design. With granular control over borders, gradients, corner radii, and text appearance, developers can ensure that the control not only functions well but also integrates seamlessly into the application's overall aesthetic.

---

Summary

The Appearance Customization feature enables developers to tailor the visual style of the numeric up/down control extensively. By adjusting properties such as border colors, gradient backgrounds, corner radii, and text alignment, the control can be adapted to fit a wide range of UI designs. This level of customization helps create a cohesive and modern user experience while maintaining functional integrity.

---

Integration Tips

Tip	Explanation
Initialize Appearance Early	Set appearance properties during form initialization to ensure that the control renders correctly from the start.
Use Designer Support	Many appearance properties can be set via the Visual Studio designer for rapid prototyping and iterative design improvements.
Test in Multiple Themes	Verify the appearance under different system themes and DPI settings to ensure consistency and readability.
Combine with Behavior Configuration	Ensure that the visual changes complement behavioral cues (e.g., focus borders) for a consistent interactive experience.

---

Demo Application Example

Below is a sample demo application snippet that showcases the integration of the Appearance Customization feature:

using System;
using System.Drawing;
using System.Windows.Forms;
using SiticoneNetFrameworkUI;
using SiticoneNetFrameworkUI.Helpers.Enum;
using SiticoneNetFrameworkUI.Helpers.Text;

namespace DemoApp
{
    public class MainForm : Form
    {
        public MainForm()
        {
            // Configure the form.
            this.Text = "Appearance Customization Demo";
            this.Width = 450;
            this.Height = 250;
            this.StartPosition = FormStartPosition.CenterScreen;

            // Create a customized numeric up/down control.
            var numericUpDown = new SiticoneUpDown
            {
                // Border customization.
                ShowBorder = true,
                BorderColor = Color.SlateGray,
                HoverBorderColor = Color.CornflowerBlue,
                ActiveBorderColor = Color.DodgerBlue,

                // Background with gradient.
                UseGradient = true,
                GradientColorStart = Color.WhiteSmoke,
                GradientColorEnd = Color.LightSteelBlue,
                GradientMode = GradientModes.ForwardDiagonal,
                FillColor = Color.White, // Fallback if gradient is disabled.

                // Rounded corners.
                CornerRadiusTopLeft = 10,
                CornerRadiusTopRight = 10,
                CornerRadiusBottomRight = 10,
                CornerRadiusBottomLeft = 10,

                // Text styling.
                TextAlignment = TextAlignment.Center,
                Font = new Font("Segoe UI", 11f, FontStyle.Bold),
                ForeColor = Color.Black,

                // Set additional numeric behavior (optional for demo purposes).
                Minimum = 0M,
                Maximum = 100M,
                Value = 50M,
                Increment = 5M,
                DecimalPlaces = 0,
                InputType = SiticoneNetFrameworkUI.Helpers.Enum.InputType.WholeNumbers,
                EnableDirectInput = true
            };

            // Set the control's location on the form.
            numericUpDown.Location = new Point(50, 80);
            
            // Add the control to the form.
            this.Controls.Add(numericUpDown);
        }

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

This demo illustrates how to configure the control's visual aspects using the Appearance Customization feature. The example shows a fully styled numeric up/down control integrated into a simple WinForms application.