Number Formatting in Xamarin NumericUpDown (SfNumericUpDown)

19 May 20213 minutes to read

The Values of the SfNumericUpDown 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.

SfNumericUpDown numericUpDown=new SfNumericUpDown();
numericUpDown.FormatString="c";
<numeric:SfNumericUpDown x:Name="numericUpDown" FormatString="c"/>

Display Percentage Notation

p ā€“ Displays the value in percentage.

SfNumericUpDown numericUpDown=new SfNumericUpDown();
numericUpDown.FormatString="p";
<numeric:SfNumericUpDown x:Name="numericUpDown" FormatString="p"/>

Display Number Notation

n ā€“ Displays the value in number format.

<numeric:SfNumericUpDown x:Name="numericUpDown" FormatString="n"/>
SfNumericUpDown numericUpDown=new SfNumericUpDown();
numericUpDown.FormatString="n";

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 SfNumericUpDown.

Display the value with number notation

Compute to Percentage

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

  • Value: Displays the actual value with percentage symbol.
<numeric:SfNumericUpDown x:Name="numericUpDown" Value="5" FormatString="p" PercentDisplayMode="Value"/>
SfNumericUpDown numericUpDown=new SfNumericUpDown();
numericUpDown.Value = 5;
numericUpDown.FormatString="p";
numericUpDown.PercentDisplayMode=PercentDisplayMode.Value;

Display the value with PercentageDisplayMode as Compute

  • Compute: Displays the value computed by 100 with percentage symbol.
<numeric:SfNumericUpDown x:Name="numericUpDown" Value="5" FormatString="p" PercentDisplayMode="Compute"/>
SfNumericUpDown numericUpDown=new SfNumericUpDown();
numericUpDown.Value = "5";
numericUpDown.FormatString="p";
numericUpDown.PercentDisplayMode=PercentDisplayMode.Compute;

NOTE

The control displays the percent value on lost focus.

Display the value with PercentageDisplayMode as Compute

Set EnableGroupSeparator

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

<numeric:SfNumericUpDown x:Name="NumericUpDown" Value="12345" EnableGroupSeparator="True"/>
SfNumericUpDown NumericUpDown=new SfNumericUpDown();
NumericUpDown.Value=12345;
NumericUpDown.EnableGroupSeparator = true;
this.Content = NumericUpDown;

Display the SfNumericUpDown control with EnableGroupSeparator

See also

How to provide string formats support in SfNumericUpDown