)
We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to bind two Numerictextboxes in Xamarin forms

Platform: Xamarin.Forms |
Control: SfNumericTextBox |
Published Date: March 23, 2017 |
Last Revised Date: July 4, 2019

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

 

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon