Number Formatting in WPF NumericUpdown (UpDown)

8 Jun 20213 minutes to read

This section explains how to format the value in WPF UpDown control.

Decimal digit

The NumberDecimalDigits property is used to specify the number of digits to be displayed after the decimal point in the UpDown control.

<syncfusion:UpDown Name="upDown" Height="23" Width="100" NumberDecimalDigits="4" />
UpDown updown = new UpDown();
updown.Height = 23;
updown.Width = 100;
updown.NumberDecimalDigits = 4;

WPF UpDown displays Value based on Number Decimal Digits

Group separator

The group separator is the character used to group the values. You can show the group separator in UpDown control by enable GroupSeparatorEnabled property. The default value is False.

<syncfusion:UpDown Name="upDown" Width="100" Height="23" Value="5555555" GroupSeperatorEnabled="True" />
updown.Value = 5555555;
updown.GroupSeperatorEnabled = true;

WPF UpDown displays Value based on GroupSeperator


The number formatting of UpDown control can be customized by setting UpDown.NumberFormatInfo property by specifying the culture-specific group separator, decimal separator, and the number of decimal digits. You can show the group separator by enable the GroupSeparatorEnabled property.

<syncfusion:UpDown Name="upDown" Value="5555555" GroupSeperatorEnabled="True">
<globalization:NumberFormatInfo NumberGroupSeparator="/" NumberDecimalDigits="4" NumberDecimalSeparator="*"/>
</ syncfusion:UpDown.NumberFormatInfo>  
</ syncfusion:UpDown>
//Assign a value
updown.Value = 5555555;

//Initialize numberformatinfo
NumberFormatInfo numberFormatInfo = new NumberFormatInfo();

// set the format of number and group
updown.GroupSeperatorEnabled = true;
updown.NumberFormatInfo = numberFormatInfo;
updown.NumberFormatInfo.NumberGroupSeparator = "/";
updown.NumberFormatInfo.NumberDecimalDigits = 4;
updown.NumberFormatInfo.NumberDecimalSeparator = "*";

WPF UpDown with Number Format


The UpDown control provides globalization support to change the culture of the control by using the Culture property. The culture is used to format the decimal separator and group separator based on the respective culture.

For example, the Latin culture is used into the UpDown control.

<syncfusion:UpDown Name="upDown" Culture="bs-Latn" Value="5555555" Width="100" Height="23" />
System.Globalization.CultureInfo cultureInfo = new System.Globalization.CultureInfo("bs-Latn");
updown.Culture = cultureInfo;
updown.Value = 5555555;

WPF UpDown with Latin Culture

Text alignment

You can align the text by using the TextAlignment property.

<syncfusion:UpDown Value="40" Height="23" TextAlignment="Left" Width="100" />
updown.TextAlignment = TextAlignment.Left;

Changing Text Alignment in WPF UpDown