Typography & Text

A control feature that manages the font families, styles, sizes, and colors for the gauge’s central value and scale labels.

Overview

The Typography & Text feature enables developers to customize the appearance of the gauge’s displayed value and its scale labels. Key properties include ValueFontFamily, ValueFontStyle, TextColor, and TextSize for the main gauge value, and ScaleLabelsFontFamily, ScaleLabelsFontStyle, and ScaleLabelsFontSize for the scale labels. These settings ensure that the gauge’s textual elements integrate well with the overall application design and remain readable across different UI themes.

---

Key Points

Aspect	Description	Code Reference / Example
Main Value Font	Controls the font family, style, and size of the gauge’s central numeric display.	csharp\n// Set the main value font and style\nmyGauge.ValueFontFamily = "Segoe UI";\nmyGauge.ValueFontStyle = FontStyle.Bold;\nmyGauge.TextSize = 30f;
Scale Labels Font	Determines the font settings for the gauge scale labels to ensure consistency and readability.	csharp\n// Set the scale labels font properties\nmyGauge.ScaleLabelsFontFamily = "Segoe UI";\nmyGauge.ScaleLabelsFontStyle = FontStyle.Regular;\nmyGauge.ScaleLabelsFontSize = 9f;
Text Color	Defines the color used for rendering both the central value and (if applicable) the scale labels.	csharp\n// Configure text colors for gauge value and labels\nmyGauge.TextColor = Color.Black;\nmyGauge.LabelColor = Color.DarkGray;

---

Best Practices

Recommendation	Details	Example / Explanation
Consistent Font Usage	Use font families and styles that are consistent with the rest of your application to maintain a uniform UI.	csharp\nmyGauge.ValueFontFamily = "Segoe UI";\nmyGauge.ScaleLabelsFontFamily = "Segoe UI";
Optimize Text Size	Choose an appropriate TextSize and ScaleLabelsFontSize to ensure readability across different screen resolutions.	csharp\n// Ensure the text is neither too small nor too large\nmyGauge.TextSize = 28f;\nmyGauge.ScaleLabelsFontSize = 10f;
Use High-Contrast Colors	Select text and label colors that contrast well with the gauge background for improved legibility.	csharp\nmyGauge.TextColor = Color.Black;\nmyGauge.LabelColor = Color.DarkSlateGray;

---

Common Pitfalls

Issue	Details	Resolution / Code Example
Inconsistent Font Selection	Using different fonts for the value and scale labels can disrupt the visual harmony of the gauge.	Use the same or complementary fonts for both elements: csharp\nmyGauge.ValueFontFamily = "Segoe UI";\nmyGauge.ScaleLabelsFontFamily = "Segoe UI";
Inappropriate Font Sizes	Setting excessively large or small sizes for text may render the gauge unreadable or unbalanced.	Test with moderate sizes; for example, csharp\nmyGauge.TextSize = 30f; // for main value\nmyGauge.ScaleLabelsFontSize = 9f; // for scale labels
Poor Color Contrast	Using text colors that blend with the background or other UI elements can make the gauge information hard to read.	Ensure adequate contrast, e.g., using dark text on a light background or vice versa:csharp\nmyGauge.TextColor = Color.Black;

---

Usage Scenarios

Scenario	Description	Sample Code
Dashboard Value Display	Customize the gauge’s main value to match the dashboard’s design while ensuring high readability.	csharp\n// Configure main gauge text\nmyGauge.ValueFontFamily = "Segoe UI";\nmyGauge.ValueFontStyle = FontStyle.Bold;\nmyGauge.TextColor = Color.Black;\nmyGauge.TextSize = 32f;
Detailed Scale Labeling	Set scale label fonts and sizes that clearly indicate measurement increments in data monitoring applications.	csharp\n// Configure scale labels\nmyGauge.ScaleLabelsFontFamily = "Segoe UI";\nmyGauge.ScaleLabelsFontStyle = FontStyle.Regular;\nmyGauge.ScaleLabelsFontSize = 10f;\nmyGauge.LabelColor = Color.DarkGray;
Thematic Customization	Adjust fonts and colors to suit the theme (light/dark mode) of the application, ensuring consistency across UI elements.	csharp\nif (isDarkMode)\n{\n myGauge.TextColor = Color.White;\n myGauge.LabelColor = Color.LightGray;\n myGauge.ValueFontFamily = "Calibri";\n}\nelse\n{\n myGauge.TextColor = Color.Black;\n myGauge.LabelColor = Color.DarkGray;\n myGauge.ValueFontFamily = "Segoe UI";\n}

---

Real Life Usage Scenarios

Scenario	Description	Sample Integration Code
Financial Dashboard	In a financial application, a clear and modern font for displaying percentages and currency values enhances user comprehension and trust.	csharp\n// Financial dashboard font settings\nmyGauge.ValueFontFamily = "Segoe UI";\nmyGauge.ValueFontStyle = FontStyle.Bold;\nmyGauge.TextSize = 34f;\nmyGauge.TextColor = Color.Black;\n// Scale labels for clear metrics\nmyGauge.ScaleLabelsFontFamily = "Segoe UI";\nmyGauge.ScaleLabelsFontStyle = FontStyle.Regular;\nmyGauge.ScaleLabelsFontSize = 10f;\nmyGauge.LabelColor = Color.DarkSlateGray;
Industrial Monitoring	A system monitoring tool benefits from high-contrast, legible fonts that convey critical data quickly under varying lighting conditions.	csharp\n// Industrial gauge configuration\nmyGauge.ValueFontFamily = "Arial";\nmyGauge.ValueFontStyle = FontStyle.Bold;\nmyGauge.TextSize = 30f;\nmyGauge.TextColor = Color.White;\n// Scale labels optimized for readability\nmyGauge.ScaleLabelsFontFamily = "Arial";\nmyGauge.ScaleLabelsFontStyle = FontStyle.Regular;\nmyGauge.ScaleLabelsFontSize = 9f;\nmyGauge.LabelColor = Color.Yellow;
Healthcare Devices	For medical devices, precise and uncluttered text ensures that critical readings are easily interpreted by clinicians.	csharp\n// Healthcare gauge settings\nmyGauge.ValueFontFamily = "Calibri";\nmyGauge.ValueFontStyle = FontStyle.Bold;\nmyGauge.TextSize = 32f;\nmyGauge.TextColor = Color.Black;\n// Use a consistent font for scale labels\nmyGauge.ScaleLabelsFontFamily = "Calibri";\nmyGauge.ScaleLabelsFontStyle = FontStyle.Regular;\nmyGauge.ScaleLabelsFontSize = 10f;\nmyGauge.LabelColor = Color.DarkBlue;

---

Troubleshooting Tips

Tip	Explanation	Action
Check Font Availability	Ensure that the chosen font families are installed on the target system; otherwise, the control falls back to a default font.	Use a font validation helper if necessary; for example, if myGauge.ValueFontFamily is set to an unsupported font, it will default to "Segoe UI".
Verify Contrast Settings	If text appears faded or unreadable, adjust TextColor and LabelColor to improve contrast with the gauge background.	Experiment with different color combinations:csharp\nmyGauge.TextColor = Color.Black; // on light backgrounds\nmyGauge.LabelColor = Color.DarkGray;
Adjust Font Sizes Appropriately	Overly large or small text can distort the gauge display; ensure that TextSize and ScaleLabelsFontSize are appropriate for the control's size.	Test different sizes during development; for example, try starting with myGauge.TextSize = 30f; and adjust based on the gauge dimensions.

---

Review

Aspect	Comments	Suggestions
Readability	The feature provides full control over textual appearance, ensuring that both the main value and scale labels are legible and aesthetically pleasing.	Maintain consistent font usage across the application for a cohesive design.
Customization	Offers extensive customization through multiple properties for both the value and scale labels.	Developers should experiment with font sizes and colors to match their specific UI themes.
Integration Ease	Straightforward property assignments and clear code examples make this feature easy to integrate into existing projects.	Refer to the provided integration code samples when configuring textual aspects to ensure consistency and visual harmony.

---

Summary

Summary Point	Description
Feature Overview	Manages font settings for the gauge’s main value and scale labels, including family, style, size, and color.
Core Properties	ValueFontFamily, ValueFontStyle, TextSize, TextColor, ScaleLabelsFontFamily, ScaleLabelsFontStyle, and ScaleLabelsFontSize drive the configuration.
Integration and Customization	Customize textual elements to align with the overall application design and ensure clear communication of data.
Best Practices and Troubleshooting	Use consistent fonts and colors, adjust sizes for readability, and verify system compatibility for the best results.

---

Integration Demo

Below is a complete sample code snippet to demonstrate how to integrate and customize the Typography & Text feature into a WinForms application:

using System;
using System.Drawing;
using System.Windows.Forms;
using SiticoneNetFrameworkUI;  // Use the namespace from your provided code

public class TypographyDemoForm : Form
{
    private SiticoneGaugeNumeric myGauge;
    private Button changeTextButton;
    
    public TypographyDemoForm()
    {
        // Initialize the gauge with typography settings
        myGauge = new SiticoneGaugeNumeric
        {
            // Set initial value and gauge dimensions
            MinValue = 0f,
            MaxValue = 100f,
            Value = 50f,
            AnimationSpeed = 5f,
            ShowAnimation = true,
            Size = new Size(300, 300),
            Location = new Point(50, 30),
            
            // Configure main value text properties
            ValueFontFamily = "Segoe UI",
            ValueFontStyle = FontStyle.Bold,
            TextSize = 32f,
            TextColor = Color.Black,
            
            // Configure scale labels properties
            ScaleLabelsFontFamily = "Segoe UI",
            ScaleLabelsFontStyle = FontStyle.Regular,
            ScaleLabelsFontSize = 10f,
            LabelColor = Color.DarkGray
        };
        
        // Initialize a button to dynamically change typography settings
        changeTextButton = new Button
        {
            Text = "Switch Theme",
            Location = new Point(50, 350),
            Width = 120
        };
        changeTextButton.Click += ChangeTextButton_Click;
        
        // Add controls to the form
        Controls.Add(myGauge);
        Controls.Add(changeTextButton);
    }
    
    private void ChangeTextButton_Click(object sender, EventArgs e)
    {
        // Toggle between two themes: light and dark
        if (myGauge.TextColor == Color.Black)
        {
            // Switch to dark theme
            myGauge.TextColor = Color.White;
            myGauge.LabelColor = Color.LightGray;
            myGauge.ValueFontFamily = "Calibri";
            myGauge.ScaleLabelsFontFamily = "Calibri";
            BackColor = Color.Black;
        }
        else
        {
            // Switch back to light theme
            myGauge.TextColor = Color.Black;
            myGauge.LabelColor = Color.DarkGray;
            myGauge.ValueFontFamily = "Segoe UI";
            myGauge.ScaleLabelsFontFamily = "Segoe UI";
            BackColor = Color.White;
        }
        // Force the gauge to redraw with updated typography settings
        myGauge.Invalidate();
    }
    
    [STAThread]
    static void Main()
    {
        Application.EnableVisualStyles();
        Application.Run(new TypographyDemoForm());
    }
}

---

API Reference

Member	Type	Description
ValueFontFamily	string	Gets or sets the font family for the main gauge value.
ValueFontStyle	FontStyle	Gets or sets the font style (e.g., Bold, Regular) for the main gauge value.
TextSize	float	Gets or sets the font size for the main gauge value.
TextColor	Color	Gets or sets the color used for the main gauge value text.
ScaleLabelsFontFamily	string	Gets or sets the font family for the scale labels.
ScaleLabelsFontStyle	FontStyle	Gets or sets the font style for the scale labels.
ScaleLabelsFontSize	float	Gets or sets the font size for the scale labels.
LabelColor	Color	Gets or sets the color used for the scale labels.

---

This documentation provides a thorough guide for integrating and customizing the Typography & Text feature in your WinForms applications. Use the provided examples, tables, and best practices to ensure that all textual elements of the gauge are optimized for clarity, consistency, and overall design cohesion.