Getting Started with WPF Double TextBox

18 Nov 201810 minutes to read

This section explains how to create a WPF Double 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 Double TextBox via designer

You can add the WPF Double 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 Double TextBox via XAML

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

1. Create a new WPF project in Visual Studio.

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

3. Import the Syncfusion^® WPF schema with the xmlns:syncfusion="http://schemas.syncfusion.com/wpf" namespace mapping.

4. Declare the WPF Double TextBox control in the 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="DoubleTextBoxSample.MainWindow"
           Title="DoubleTextBox Sample" Height="350" Width="525">
       <Grid>
           <!--Adding DoubleTextBox control -->
           <syncfusion:DoubleTextBox x:Name="doubleTextBox" Width="100" Height="25" VerticalAlignment="Center" HorizontalAlignment="Center"/>
       </Grid>
   </Window>

Adding WPF Double TextBox via C#

To add the WPF Double 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 Double TextBox and add it to the window.

   C#

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

Setting Value

The value of the WPF Double TextBox can be set by using the Value property.

XAML

<syncfusion:DoubleTextBox x:Name="doubleTextBox" Width="100" Height="23" Value="100"/>

C#

DoubleTextBox doubleTextBox = new DoubleTextBox();
doubleTextBox.Width = 100;
doubleTextBox.Height = 23;
doubleTextBox.Value = 100;

Do not use the Text property to set the value for the DoubleTextBox. Use only the Value 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 Double TextBox using the Value Property.

The following code snippets illustrate the value binding from one WPF Double TextBox to another.

XAML

<StackPanel>
<syncfusion:DoubleTextBox x:Name="doubleTextBox1" Height="25" Width="100" Value="{Binding myValue,UpdateSourceTrigger=PropertyChanged}"/>
<syncfusion:DoubleTextBox x:Name="doubleTextBox2" Width="100" Height="25" Value="{Binding myValue,UpdateSourceTrigger=PropertyChanged}" />
</StackPanel>

ViewModel.cs

C#

using Syncfusion.Windows.Shared;

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

Value Changed Notification

The WPF Double TextBox control can notify value changes through the ValueChanged event. You can get the old value and new value from the OldValue and NewValue properties of the ValueChanged event.

XAML

<syncfusion:DoubleTextBox ValueChanged="DoubleTextBox_ValueChanged"/>

C#

using Syncfusion.Windows.Shared;

DoubleTextBox doubleTextBox = new DoubleTextBox();
doubleTextBox.ValueChanged += new PropertyChangedCallbackHandler(DoubleTextBox_ValueChanged);

You can handle the event as follows:

C#

using System.Windows;

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

Min Max Value Restriction

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

For details on validation behavior (OnKeyPress, OnLostFocus, MaxValueOnExceedMaxDigit, MinValueOnExceedMinDigit), see Restriction or Validation.

XAML

<syncfusion:DoubleTextBox x:Name="doubleTextBox" Width="150" Height="25" Value="100" MaxValue="999.99" MinValue="-999.99"/>

C#

using Syncfusion.Windows.Shared;

DoubleTextBox doubleTextBox = new DoubleTextBox();
doubleTextBox.Width = 150;
doubleTextBox.Height = 25;
//Setting minimum value
doubleTextBox.MinValue = -999.99;
//Setting maximum value
doubleTextBox.MaxValue = 999.99;
doubleTextBox.Value = 100;

Step Interval for incrementing or decrementing the value

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

XAML

<syncfusion:DoubleTextBox x:Name="doubleTextBox" Width="150" Height="25" Value="8"
                          IsScrollingOnCircle="True" ScrollInterval="4"/>

C#

DoubleTextBox doubleTextBox = new DoubleTextBox();
doubleTextBox.Width = 150;
doubleTextBox.Height = 25;
doubleTextBox.MinValue = 0;
doubleTextBox.MaxValue = 100;
doubleTextBox.Value = 8;
doubleTextBox.IsScrollingOnCircle = true;
doubleTextBox.ScrollInterval = 4;

Formatting the Value

You can customize the number format by either setting the NumberFormat property or the NumberGroupSeparator, NumberGroupSizes, NumberDecimalDigits, and NumberDecimalSeparator properties of WPF Double TextBox.

For details, see Culture and Number Formats.

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"
        xmlns:numberformat="clr-namespace:System.Globalization;assembly=mscorlib"
        x:Class="DoubleTextBoxSample.MainWindow"
        Title="DoubleTextBox Sample" Height="350" Width="525">
    <Grid>
        <syncfusion:DoubleTextBox x:Name="doubleTextBox" Height="25" Width="200" Value="123456789012345">
            <syncfusion:DoubleTextBox.NumberFormat>
                <numberformat:NumberFormatInfo NumberGroupSeparator="/" NumberDecimalDigits="4" NumberDecimalSeparator="*"/>
            </syncfusion:DoubleTextBox.NumberFormat>
        </syncfusion:DoubleTextBox>
    </Grid>
</Window>

C#

using Syncfusion.Windows.Shared;
using System.Globalization;

DoubleTextBox doubleTextBox = new DoubleTextBox();
doubleTextBox.Width = 200;
doubleTextBox.Height = 25;
doubleTextBox.Value = 123456789012345;
doubleTextBox.NumberFormat = new NumberFormatInfo()
{
    NumberGroupSeparator = "/",
    NumberDecimalDigits = 4,
    NumberDecimalSeparator = "*"
};

Setting the Culture

The WPF Double 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 Double TextBox value based on the respective culture.

XAML

<syncfusion:DoubleTextBox x:Name="doubleTextBox" Height="25" Width="150" Culture="en-US" Value="1234567"/>

C#

using Syncfusion.Windows.Shared;
using System.Globalization;

DoubleTextBox doubleTextBox = new DoubleTextBox();
doubleTextBox.Width = 150;
doubleTextBox.Height = 25;
doubleTextBox.Value = 1234567;
doubleTextBox.Culture = new CultureInfo("en-US");

When you use both NumberFormat and Culture, the NumberFormat will have a higher priority. For details, see Culture and Number Formats.

Theme

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

• Apply theme using SfSkinManager

• Create a custom theme using ThemeStudio