Value formatting with WinUI NumberBox

15 Jul 20267 minutes to read

This section explains how to change the value format of the NumberBox control using NumberFormatter and CustomFormat properties.

Currency, percentage and decimal format

The following namespace and using statements are required to use the SfNumberBox control and the formatting classes.

XAML

xmlns:editors="using:Syncfusion.UI.Xaml.Editors"

C#

using Syncfusion.UI.Xaml.Editors;
using System.Globalization;
using Windows.Globalization.NumberFormatting;

You can format the value of a NumberBox control using the CustomFormat or NumberFormatter property. By default, the value is formatted based on the current culture’s decimal format. The default value of NumberFormatter and CustomFormat properties are null.

The following example shows how to set CurrencyFormatter, DecimalFormatter and PercentFormatter for NumberFormatter property. The CultureInfo is used to obtain the ISO currency symbol for the CurrencyFormatter.

NOTE

Refer here to know more about the formatting classes that can be assigned for NumberFormatter property.

C#

CultureInfo culture = new CultureInfo("en-US");

// Format stock price in currency
stockPrice.NumberFormatter = new CurrencyFormatter(new RegionInfo(culture.LCID).ISOCurrencySymbol);

// Format product discount in percent
productDiscount.NumberFormatter = new PercentFormatter();

// Format worked hours in decimal
hoursWorked.NumberFormatter = new DecimalFormatter();

You can apply numeric, currency, and percent custom formats using the N, C, and P format specifiers in the CustomFormat property.

NOTE

When using both the CustomFormat and the NumberFormatter properties, the CustomFormat property takes precedence.

NOTE

You can apply various custom formats available in this page which are supported for double type.

C#

// Format stock price in currency
stockPrice.CustomFormat = "C2";

// Format product discount in percent
productDiscount.CustomFormat = "P2";

// Format worked hours in decimal
hoursWorked.CustomFormat = "N2";

Format the integer digits

You can change the integer digits of the value in the NumberBox control using CustomFormat and NumberFormatter properties. For the NumberFormatter property, you can customize the integer digits of the value using the IntegerDigits property in CurrencyFormatter, PercentFormatter, and DecimalFormatter classes.

C#

CultureInfo culture = new CultureInfo("en-US");
stockPrice.NumberFormatter = new CurrencyFormatter(new RegionInfo(culture.LCID).ISOCurrencySymbol) { IntegerDigits = 5};
productDiscount.NumberFormatter = new PercentFormatter() { IntegerDigits = 5 };
hoursWorked.NumberFormatter = new DecimalFormatter() { IntegerDigits = 5 };

For CustomFormat property, use the 0 format specifier to set the minimum number of integer digits.

NOTE

0 (Zero placeholder) replaces the zero with the corresponding digit present in the value; otherwise, zero is padded to the left of the value.

C#

// Format stock price in currency
stockPrice.CustomFormat = "$00000.00";

// Format product discount in percent
productDiscount.CustomFormat = "00000.00%";

// Format worked hours in decimal
hoursWorked.CustomFormat = "00000.00";

Format the fractional digits

You can change the fractional digits of the value in NumberBox control using CustomFormat and NumberFormatter properties. For the NumberFormatter property, you can customize the fractional digits of the value using the FractionDigits property in CurrencyFormatter, PercentFormatter, and DecimalFormatter classes.

C#

CultureInfo culture = new CultureInfo("en-US");
stockPrice.NumberFormatter = new CurrencyFormatter(new RegionInfo(culture.LCID).ISOCurrencySymbol) { FractionDigits = 3 };
productDiscount.NumberFormatter = new PercentFormatter() { FractionDigits = 3};
hoursWorked.NumberFormatter = new DecimalFormatter() { FractionDigits = 3 };

For CustomFormat property, use the 0 format specifier to set the minimum number of fractional digits.

NOTE

0 (Zero placeholder) replaces the zero with the corresponding digit present in the value; otherwise, zero is padded to the right of the value.

C#

stockPrice.CustomFormat = "$000.000";
productDiscount.CustomFormat = "00.000%";
hoursWorked.CustomFormat = "00.000";

Apply custom format

You can apply custom formats to the NumberBox control using the 0 and # format specifiers. Using these format specifiers you can set the minimum and maximum number of fractional digits in the CustomFormat property.

• 0 (Zero placeholder) replaces the zero with the corresponding digit present in the value; otherwise, zero is padded to the left of the value.

• # (Digit placeholder) replaces the number sign symbol with the corresponding digit present in the value; otherwise, no digit is appended to the value.

In the below example, the value of the CustomFormat property is #.00##, hence it will allow a maximum of 4 fractional digits and a minimum of 2 fractional digits.

C#

stockPrice.CustomFormat = "$00.00##";
productDiscount.CustomFormat = "00.00##%";
hoursWorked.CustomFormat = "00.00##";

Culture support

The culture support allows the control to be configured for a specific language. To configure this, use the Culture property.

C#

CultureInfo ci = new CultureInfo("en-US");
numberBox.Culture = ci;

Customize percentage display

When the percentage format is applied to the NumberBox, the value can be displayed in the following two ways:

PercentDisplayMode.Value: Displays the actual value with percentage symbol. For example, the value 1000 is displayed as 1000%.

XAML

<editors:SfNumberBox x:Name="numberBox" Width="200"
                        CustomFormat="p" 
                        Value="1000"  
                        PercentDisplayMode="Value">
</editors:SfNumberBox>

C#

SfNumberBox sfNumberBox= new SfNumberBox();
sfNumberBox.CustomFormat = "p";
sfNumberBox.Value = 1000;
sfNumberBox.PercentDisplayMode = PercentDisplayMode.Value;
sfNumberBox.Width = 200;

PercentDisplayMode.Compute: Displays the computed value with percentage symbol. For example, the value 1000 is displayed as 100,000%.

XAML

<editors:SfNumberBox x:Name="numberBox" Width="200"
                        CustomFormat="p" 
                        Value="1000"  
                        PercentDisplayMode="Compute">
</editors:SfNumberBox>

C#

SfNumberBox sfNumberBox= new SfNumberBox();
sfNumberBox.CustomFormat = "p";
sfNumberBox.Value = 1000;
sfNumberBox.PercentDisplayMode = PercentDisplayMode.Compute;
sfNumberBox.Width = 200;

NOTE

Default value of PercentDisplayMode is Compute.