Articles in this section
Category / Section

How to bind two Numerictextboxes in Xamarin forms

2 mins read

SfNumericTextBox allows its properties to bind with other elements. In this, we bind the value properties of one SfNumericTextBox into another NumericTextBox’s value properties. Hence, we can show that the changes of one numericTextBox will reflect in other. The following steps to bind the two numericTextBoxes.

 

Step 1: Add require assemblies to get the view of NumericTextBox.

Step 2: Declare the two NumericTextBoxes and binding the Value property values with another. That property’s values are from ViewModel class. Set the binding context of that page with the instance of ViewModel class.

 

The following code example will explain how to do the same in Xamarin.Forms

 

Code in Xaml:

 

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
      xmlns:local="clr-namespace:KBSolution"
      xmlns:Synfusion="clr-namespace:Syncfusion.SfNumericTextBox.XForms;assembly=Syncfusion.SfNumericTextBox.XForms"
      x:Class="KBSolution.KBSolutionPage">
 
  <ContentPage.Content>
      <Grid  BackgroundColor="#E4EAF0">
          <Grid.RowDefinitions>
              <RowDefinition Height="30"/>
              <RowDefinition Height="50"/>
              <RowDefinition Height="30"/>
              <RowDefinition Height="50"/>
          </Grid.RowDefinitions>
            <Label x:Name="firstNumeric"   Text="First NumericTextBox" FontSize="20" HorizontalOptions="Center"  FontAttributes="Bold" HorizontalTextAlignment="Start" VerticalTextAlignment="Start"/>
          <Synfusion:SfNumericTextBox 
          Grid.Row="1" 
          WidthRequest="180"  
          HorizontalOptions="Center" 
          HeightRequest="40"
          AllowNull="true" 
          BorderColor="Blue"
          TextColor="Maroon"
          x:Name="sfNumericTextBox"
          Value="{Binding ValueNumeric,Mode=TwoWay}" 
          FormatString="p" 
          ValueChangeMode="OnKeyFocus"
          PercentDisplayMode="Value" 
          FontSize="20" /> 
 
          <Label x:Name="secondNumeric" Grid.Row="2"  Text="Second NumericTextBox" HorizontalOptions="Center" FontSize="20" FontAttributes="Bold" HorizontalTextAlignment="Start" VerticalTextAlignment="Start"/>
          <Synfusion:SfNumericTextBox 
          Grid.Row="3" 
          WidthRequest="180"  
          HorizontalOptions="Center"
          AllowNull="true"  
          BorderColor="Blue" 
          TextColor="Maroon"
          x:Name="sfNumericTextBox1"
          Value="{Binding ValueNumeric,Mode=TwoWay}"
          FormatString="p" 
          ValueChangeMode="OnKeyFocus" 
          PercentDisplayMode="Value"
          FontSize="20" /> 
          </Grid >
  </ContentPage.Content>
</ContentPage>

 

Code in C#;

 

namespace KBSolution
{
public partial class KBSolutionPage : ContentPage
{
    public KBSolutionPage()
    {
        InitializeComponent();
        // Set the binding context of NumericTextBox with viewModel
        this.BindingContext = new ViewModel();
    }
}
//ViewModel class to have bindable property
public class ViewModel : INotifyPropertyChanged
{
    // Set and Get the "Value" property's bindable property
    private double valueNumeric = 1000;
    public double ValueNumeric
    {
        get { return valueNumeric; }
        set
        {
            valueNumeric = value;
            RaisePropertyChanged("ValueNumeric");
        }
    }
    // To have updated viewmodel’s property value update.
    public void RaisePropertyChanged(string propertyname)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyname));
        }
    }
    public event PropertyChangedEventHandler PropertyChanged;
}
}

 

 

SfNumericTextBox Two Way Binding

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied