Culture and Formatting in WPF Percent TextBox

18 Nov 20186 minutes to read

Value of WPF Percent TextBox can be formatted in following ways:

• Culture
• NumberFormatInfo
• Dedicated properties (PercentGroupSeparator, PercentGroupSizes, PercentDecimalDigits, PercentDecimalSeparator)

Culture based formatting

The WPF Percent TextBox provides support for globalization by using the Culture property. The Culture property is used to format the decimal separator and group separator of the WPF Percent TextBox value based on the respective culture.

XAML

<syncfusion:PercentTextBox x:Name="percentTextBox" Height="25" Width="150" 
                           Culture="bs-Latn" PercentValue="1234567"/>

C#

using System.Globalization;

PercentTextBox percentTextBox = new PercentTextBox();
percentTextBox.Width = 150;
percentTextBox.Height = 25;
percentTextBox.PercentValue = 1234567;

//Setting Latin culture for percent textbox.
percentTextBox.Culture = new CultureInfo("bs-Latn");

By default, the US culture uses “.” as the PercentDecimalSeparator and “,” as the PercentGroupSeparator, whereas the Latin culture uses “,” as the PercentDecimalSeparator and “.” as the PercentGroupSeparator.

Default Culture

Latin Culture

NumberFormatInfo based formatting

The number formatting of WPF Percent TextBox can be customized by setting the NumberFormat property.

To use the XAML sample below, add the xmlns:numberformat="clr-namespace:Syncfusion.Windows.Shared;assembly=Syncfusion.Shared.WPF" namespace mapping to the root element. The NumberFormatInfo type used here is Syncfusion.Windows.Shared.NumberFormatInfo.

XAML

<syncfusion:PercentTextBox x:Name="percentTextBox" Height="25" Width="150" PercentValue="1234567">
    <syncfusion:PercentTextBox.NumberFormat >
        <numberformat:NumberFormatInfo PercentGroupSeparator="/"
                                       PercentSymbol="%"
                                       PercentDecimalDigits="4" 
                                       PercentDecimalSeparator="*" />
    </syncfusion:PercentTextBox.NumberFormat>
</syncfusion:PercentTextBox>

C#

using Syncfusion.Windows.Shared;

PercentTextBox percentTextBox = new PercentTextBox();
percentTextBox.Width = 150;
percentTextBox.Height = 25;
percentTextBox.PercentValue = 1234567;
percentTextBox.NumberFormat = new NumberFormatInfo()
{
    PercentGroupSeparator = "/",
    PercentDecimalDigits = 4,
    PercentDecimalSeparator = "*",
    PercentSymbol = "%"
};

The following code illustrates how to set the percent group size by using the NumberFormat property.

C#

using Syncfusion.Windows.Shared;

PercentTextBox percentTextBox = new PercentTextBox();
percentTextBox.Width = 150;
percentTextBox.Height = 25;
percentTextBox.PercentValue = 123456789;           
percentTextBox.NumberFormat = new NumberFormatInfo()
{
    PercentGroupSeparator = "/",
    PercentDecimalDigits = 4,
    PercentDecimalSeparator = "*",
    PercentSymbol = "%",

    // Adding the Number group size via NumberFormat property.    
    PercentGroupSizes = new int[] { 2, 3, 4 }
};

Formatting with dedicated properties

The number formatting of WPF Percent TextBox can also be customized by setting the PercentGroupSeparator, PercentGroupSizes, PercentDecimalDigits, PercentDecimalSeparator, PercentNegativePattern, PercentPositivePattern, and PercentageSymbol properties of WPF Percent TextBox. You can show the group separator by setting the GroupSeperatorEnabled property to true. The default value of GroupSeperatorEnabled is false.

The following code illustrates how to format using the PercentDecimalSeparator, PercentDecimalDigits, PercentGroupSeparator, and PercentGroupSizes properties of the PercentTextBox.

C#

using System.Windows.Media.Collections;
using Syncfusion.Windows.Shared;

PercentTextBox percentTextBox = new PercentTextBox();
percentTextBox.Width = 150;
percentTextBox.Height = 25;
percentTextBox.PercentValue = 123456789;
percentTextBox.GroupSeperatorEnabled = true;
percentTextBox.PercentageSymbol = "%";
percentTextBox.PercentDecimalDigits = 4;
percentTextBox.PercentDecimalSeparator = "/";
percentTextBox.PercentGroupSeparator = "*";

// Adding the percent group size via PercentGroupSizes property.
percentTextBox.PercentGroupSizes = new Int32Collection() { 4, 3, 2};

When you use both the NumberFormat and the dedicated properties (PercentGroupSeparator, PercentageSymbol, PercentDecimalDigits, PercentDecimalSeparator, and PercentGroupSizes) to format the value of PercentTextBox, the PercentGroupSeparator and PercentGroupSizes properties have higher priority.

When you use both NumberFormat and Culture, the NumberFormat will have a higher priority.

Positive Value Pattern

You can use the PercentPositivePattern property to customize the location of the percent symbol and the positive percent values. In the table below, “%” denotes the symbol of the percent, and “n” denotes the number. The default value of PercentPositivePattern is 0.

PercentPositivePattern table

Value	Associated Pattern
0	n %
1	n%
2	%n
3	% n

XAML

<syncfusion:PercentTextBox x:Name="percentTextBox" Height="25" Width="150" 
            PercentValue="1234" PercentPositivePattern="3"/>

C#

PercentTextBox percentTextBox = new PercentTextBox();
percentTextBox.Width = 150;
percentTextBox.Height = 25;
percentTextBox.PercentValue = 1234;
percentTextBox.PercentPositivePattern = 3;

Negative Value Pattern

You can use the PercentNegativePattern property to customize the location of the percent symbol and the negative percent values. In the table below, “%” denotes the symbol of the percent, and “n” denotes the number. The default value of PercentNegativePattern is 0.

PercentNegativePattern table

Value	Associated Pattern
0	-n %
1	-n%
2	-%n
3	%-n
4	%n-
5	n-%
6	n%-
7	-% n
8	n %-
9	% n-
10	% -n
11	n- %

XAML

<syncfusion:PercentTextBox x:Name="percentTextBox" Height="25" Width="150" 
            PercentValue="1234" PercentNegativePattern="7"/>

C#

PercentTextBox percentTextBox = new PercentTextBox();
percentTextBox.Width = 150;
percentTextBox.Height = 25;
percentTextBox.PercentValue = 1234;
percentTextBox.PercentNegativePattern = 7;