Number Formatting in Xamarin Numeric Entry (SfNumericTextBox)

29 Sep 20235 minutes to read

The values of the SfNumericTextBox can be configured to display different formats like currency format, percent format etc.

Format string in SfNumericTextBox

The FormatString property determines the format specifier by which the display text has to be formatted.

NOTE

The control displays the formatted text when the focus is lost. The default value of FormatString is “n”.

Display currency notation in SfNumericTextBox

c - Displays the value with currency notation.

<syncfusion:SfNumericTextBox Value="1000" FormatString="c" />
SfNumericTextBox numericTextBox=new SfNumericTextBox();
numericTextBox.FormatString="c";
numericTextBox.Value=1000;
this.Content=numericTextBox;

Display the value with currency notation

Display number notation in SfNumericTextBox

n – Displays the value in number format.

<syncfusion:SfNumericTextBox Value="1000" FormatString="n" />
SfNumericTextBox numericTextBox=new SfNumericTextBox();
numericTextBox.FormatString="n";
numericTextBox.Value=1000;
this.Content=numericTextBox;

Display value with number notation

Display percentage notation in SfNumericTextBox

p – Displays the value in percentage.

<syncfusion:SfNumericTextBox  Value="1000" FormatString="p" />
SfNumericTextBox numericTextBox=new SfNumericTextBox();
numericTextBox.FormatString="p";
numericTextBox.Value=1000;
this.Content=numericTextBox;

Display the value with Percentage mode

NOTE

Instead of using above FormatString types, you can provide any symbol or value as string in FormatString property which will be appended with the value in SfNumericTextBox.

By passing any string, you can get the same as appended with the value of SfNumericTextBox.

<syncfusion:SfNumericTextBox Value="23" FormatString="years" MaximumNumberDecimalDigits="0"/>
SfNumericTextBox numericTextBox = new SfNumericTextBox();
numericTextBox.FormatString = "years";
numericTextBox.MaximumNumberDecimalDigits = 0;
numericTextBox.Value = 23;
this.Content = numericTextBox;

Display the value with custom format string

Compute to percentage in SfNumericTextBox

When the SfNumericTextBox is in percentage format, the value can be displayed in two ways as follows:

  • Value: Displays the actual value with percentage symbol.

    <syncfusion:SfNumericTextBox FormatString="p" Value="1000"  PercentDisplayMode="Value" />
    SfNumericTextBox numericTextBox=new SfNumericTextBox();
numericTextBox.PercentDisplayMode=PercentDisplayMode.Value;
numericTextBox.FormatString="p";
numericTextBox.Value=1000;
this.content=numericTextBox;

Display the value with percent display mode is value

  • Compute: Displays the computed value with percentage symbol.

    <syncfusion:SfNumericTextBox FormatString="p" Value="1000"  PercentDisplayMode="Compute" />
    SfNumericTextBox numericTextBox=new SfNumericTextBox();
numericTextBox.PercentDisplayMode=PercentDisplayMode.Compute;
numericTextBox.FormatString="p";
numericTextBox.Value=1000;
this.Content=numericTextBox;

Display the value with percent display mode is compute

Enable group separator in SfNumericTextBox

EnableGroupSeparator property is used to get rid of the comma in the value of SfNumericTextBox.

<syncfusion:SfNumericTextBox Value="12345" EnableGroupSeparator="True" />
SfNumericTextBox numericTextBox=new SfNumericTextBox();
numericTextBox.Value=12345;
numericTextBox.EnableGroupSeparator = true;
this.Content = numericTextBox;

Display the value with enable group separator

Group separator modes in SfNumericTextBox

GroupSeparatorMode provides 2 states to display the group separator.

When the mode is set to Always, it will display the separator while typing; however when the mode is set to LostFocus it will enable the separator when the control loses its focus.

NOTE

EnableGroupSeparator property must be enabled to use the GroupSeparatorMode.

<numeric:SfNumericTextBox Value="123456" FormatString="n" GroupSeparatorMode="Always" EnableGroupSeparator="True"/>
SfNumericTextBox numericTextBox = new SfNumericTextBox();
            numericTextBox.Value = 123456;
            numericTextBox.FormatString = "n";
            numericTextBox.GroupSeparatorMode = GroupSeparatorMode.Always;
            numericTextBox.EnableGroupSeparator = true;
            this.Content = numericTextBox;

Display the value with enable group separator

See also

How to truncate the trailing zero’s in SfNumericTextBox

How to set customized currency symbol in SfNumericTextBox

How to display the value with currency symbol in SfNumericTextBox