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;
}
}
|
