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.

PreviousScale and Markers NextColor Customization

Last updated 18 days ago