Getting Started with WPF Percent TextBox

18 Nov 201810 minutes to read

This section explains how to create a WPF Percent TextBox control and its features.

Assembly deployment

Refer to the control dependencies section to get the list of assemblies or NuGet package that needs to be added as a reference to use the control in any application.

You can find more details about installing the NuGet package in a WPF application in the following link:

How to install nuget packages

Adding WPF Percent TextBox via designer

You can add the WPF Percent TextBox control to an application by dragging it from the toolbox to a view of the designer. The following dependent assembly will be added automatically:

• Syncfusion.Shared.WPF

Adding WPF Percent TextBox via XAML

To add the WPF Percent TextBox control manually in XAML, follow these steps:

1. Create a new WPF project in Visual Studio.

2. Add the Syncfusion.Shared.WPF assembly references to the project. You can install the required NuGet package using the Package Manager Console:

    Install-Package Syncfusion.Shared.WPF
   

3. Import Syncfusion^® WPF schema http://schemas.syncfusion.com/wpf and declare the WPF Percent TextBox control in XAML page.

   XAML

   <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           xmlns:syncfusion="http://schemas.syncfusion.com/wpf" 
           x:Class="PercentTextBoxSample.MainWindow"
           Title="PercentTextBox Sample" Height="350" Width="525">
       <Grid>
           <!--Adding PercentTextBox control -->
           <syncfusion:PercentTextBox x:Name="percentTextBox" Width="100" Height="25" VerticalAlignment="Center" HorizontalAlignment="Center"/>
       </Grid>
   </Window>

Adding WPF Percent TextBox via C#

To add the WPF Percent TextBox control manually in C#, follow these steps:

1. Create a new WPF application via Visual Studio.

2. Add the Syncfusion.Shared.WPF assembly references to the project.

3. Include the required namespace.

   C#

   using Syncfusion.Windows.Shared;

4. Create an instance of WPF Percent TextBox and add it to the window.

   C#

   //Creating an instance of PercentTextBox control
      
   PercentTextBox percentTextBox = new PercentTextBox();
      
   // Setting height and width to PercentTextBox
      
   percentTextBox.Height = 25;
   percentTextBox.Width = 100;
      
   //Adding PercentTextBox as window content
      
   this.Content = percentTextBox;

Setting Value

The percent value of the WPF Percent TextBox can be set by using the PercentValue property.

XAML

<syncfusion:PercentTextBox x:Name="percentTextBox" Width="100" Height="23" PercentValue="100"/>

C#

PercentTextBox percentTextBox = new PercentTextBox();
percentTextBox.Width = 100;
percentTextBox.Height = 23;
percentTextBox.PercentValue = 100;

Do not use the Text property to set the percent value for the PercentTextBox. Use only the PercentValue property.

Binding Value

Data binding is the method of forming a connection between the application UI and business logic. Data binding can be unidirectional (source -> target or target <- source) or bidirectional (source <-> target). You can bind data to the WPF Percent TextBox using the PercentValue Property.

The following code snippets illustrate the percent value binding from one WPF Percent TextBox to another. To make the binding work, set the DataContext of the Window to an instance of ViewModel (for example, DataContext = new ViewModel() in the code-behind).

XAML

<StackPanel>
<syncfusion:PercentTextBox x:Name="percentTextBox1" Height="25" Width="100" PercentValue="{Binding MyValue,UpdateSourceTrigger=PropertyChanged}"/>
<syncfusion:PercentTextBox x:Name="percentTextBox2" Width="100" Height="25" PercentValue="{Binding MyValue,UpdateSourceTrigger=PropertyChanged}" />
</StackPanel>

ViewModel.cs

C#

class ViewModel : NotificationObject
{
    private double myValue;
    public double MyValue
    {
        get
        {
            return myValue;
        }
        set
        {
            myValue = value;
            RaisePropertyChanged("MyValue");
        }
    }
}

Value Changed Notification

The WPF Percent TextBox control can notify percent value changes through the PercentValueChanged event. You can get the old percent value and new percent value from the OldValue and NewValue properties in the PercentValueChanged event.

XAML

<syncfusion:PercentTextBox PercentValueChanged="PercentTextBox_PercentValueChanged"/>

C#

PercentTextBox percentTextBox = new PercentTextBox();
percentTextBox.PercentValueChanged += new PropertyChangedCallback(PercentTextBox_PercentValueChanged);

You can handle the event as follows:

C#

private void PercentTextBox_PercentValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
    // Get old and new percent value
    var newValue = e.NewValue;
    var oldValue = e.OldValue;
}

Min Max Value Restriction

The PercentValue of WPF Percent TextBox can be restricted within the maximum and minimum limits. You can define the minimum and maximum values by setting the MinValue and MaxValue properties. It allows the user to enter a percent value between the MinValue and MaxValue.

For more options such as validation behavior (MinValidation, MaxValidation) and exceed-digit handling, see Restriction or Validation.

XAML

<syncfusion:PercentTextBox x:Name="percentTextBox" Width="100" Height="25" PercentValue="100" MaxValue="999.99" MinValue="-999.99"/>

C#

PercentTextBox percentTextBox = new PercentTextBox();
percentTextBox.Width = 100;
percentTextBox.Height = 25;
//Setting minimum value
percentTextBox.MinValue = -999.99;
//Setting maximum value
percentTextBox.MaxValue = 999.99;
percentTextBox.PercentValue = 100;

Step Interval to increase or decrease the value

The WPF Percent TextBox control allows you to increase or decrease the percent value by pressing the up and down arrow keys on the keyboard or by scrolling the mouse wheel over the control. The ScrollInterval property is used to specify the increment or decrement intervals. The default value of ScrollInterval is 1. The default value of IsScrollingOnCircle is true.

For more options such as click-and-drag scrolling (EnableExtendedScrolling) and text selection on focus, see Step Interval.

XAML

<syncfusion:PercentTextBox x:Name="percentTextBox" Width="150" Height="25" PercentValue="8" 
                          IsScrollingOnCircle="True" ScrollInterval="4"/>

C#

PercentTextBox percentTextBox = new PercentTextBox();
percentTextBox.Width = 150;
percentTextBox.Height = 25;
percentTextBox.MinValue = 0;
percentTextBox.MaxValue = 100;
percentTextBox.PercentValue = 8;
percentTextBox.IsScrollingOnCircle = true;
percentTextBox.ScrollInterval = 4;

Formatting the value

You can customize the number format by either setting the NumberFormat property or the PercentGroupSeparator, PercentGroupSizes, PercentDecimalDigits, PercentDecimalSeparator, PercentNegativePattern, PercentPositivePattern, and PercentageSymbol properties of WPF Percent TextBox.

For detailed examples, see Culture and Number Formats.

XAML

<syncfusion:PercentTextBox x:Name="percentTextBox" Height="25" Width="150" PercentValue="1234567" PercentageSymbol="%" PercentDecimalDigits="4" PercentDecimalSeparator="*" PercentGroupSeparator="/"/>

C#

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

Setting the Culture

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

XAML

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

C#

PercentTextBox percentTextBox = new PercentTextBox();
percentTextBox.Width = 150;
percentTextBox.Height = 25;
percentTextBox.PercentValue = 1234567;
percentTextBox.Culture = new System.Globalization.CultureInfo("en-US");

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

Theme

The WPF Percent TextBox supports various built-in themes. Refer to the links below to apply themes,

• Apply theme using SfSkinManager

• Create a custom theme using ThemeStudio