Number Formatting in Xamarin Numeric Entry (SfNumericTextBox)

19 May 20215 minutes to read

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

Format String

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

NOTE

The control displays the formatted text on lost focus. Default Value of FormatString is “n”.

Display Currency Notation

c - Displays the value with currency notation.

<syncfusion:SfNumericTextBox x:Name="numericTextBox" 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

n – Displays the value in number format.

<syncfusion:SfNumericTextBox x:Name="numericTextBox" 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

p – Displays the value in percentage.

<syncfusion:SfNumericTextBox x:Name="numericTextBox" 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, we can provide any symbol or value as string in FormatString property which will be appended with the value in SfNumericTextBox.

By passing any string , we can get the same as appended with the value of NumericTextBox

<syncfusion:SfNumericTextBox x:Name="numericTextBox" Value="1000" FormatString="years" />
SfNumericTextBox numericTextBox=new SfNumericTextBox();
numericTextBox.FormatString="years";
numericTextBox.Value=23;
this.content=numericTextBox;

Display the value with custom format string

Compute to Percentage

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

  • Value: Displays the actual value with percentage symbol.
<syncfusion:SfNumericTextBox x:Name="numericTextBox" 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 x:Name="numericTextBox" 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

Set EnableGroupSeparator

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

SfNumericTextBox numericTextBox=new SfNumericTextBox();
numericTextBox.Value=12345;
numericTextBox.EnableGroupSeparator = true;
this.Content = numericTextBox;

Display the value with enable group separator

Group separator modes

GroupSeparatorMode provides 2 states to display the group separator.
When the mode is set as Always, it will display separator while typing itself on the other hand when the mode is set as LostFocus it will enable the separator when the control lost 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