xamarin forms picker binding selected value to NgModel like angular - forms

Question

I have a dynamic model of the user entity with JSON type. I need to show a form to select the value foreach property with dropdownlist then insert to the db. Like a entity of user has property sex and age(property can be edit by endpage by customer) .
the example result like below:
[
{
"bindValue": null,
"title": "sex",
"code":"sex",
"property": {
"option": [
"male",
"female"
]
}
},
{
"bindValue": null,
"code":"grade",
"property": {
"option": [
"2",
"3"
]
}
}
]
with angular ionic project i can code with this:
<ng-container *ngFor="let x of dynamicdroplist">
<ion-item>
<ion-label fixed>{{x.title}}</ion-label>
<ion-select [(ngModel)]="x.bindValue">
<ion-select-option *ngFor="let y of x.property.option" value="{{y}}">{{y}}</ion-select-option>
</ion-select>
</ion-item>
</ng-container>
when user change the select value, it'll bind "ngModel" to x.bindvalue, i can filter the code and the binvalue data to send to api.
But with xamarin forms i don't know how to bind select value to bindvalue
foreach(var item in field){
StackLayout layout = new StackLayout().LoadFromXaml("<StackLayout></StackLayout>");
layout.Children.Add(new Label().LoadFromXaml("<Label Text=\"" + item.Title + "\"></Label>"));
var picker = new Picker { Title = item.Title };
foreach (var e in item.Property.option)
{
picker.Items.Add(e);
}
layout.Children.Add(picker);
_stackLayout.Children.Add(layout);
}
I want to know how can i code this with xamarin forms?

Answer 1

You can bind the Picker.SelectedItem to bindValue in TwoWay, then if user change the select value, the bindValue in the model will update:
picker.BindingContext = item;
picker.SetBinding(Picker.SelectedItemProperty, "bindValue",mode:BindingMode.TwoWay);
Here is the a sample code you can refer:
public partial class MainPage : ContentPage
{
StackLayout _stackLayout;
List<RootObject> field = new List<RootObject>();
public MainPage()
{
InitializeComponent();
_stackLayout = new StackLayout();
field.Add(new RootObject() { bindValue = "", title = "sex", code ="sex", property = new Property() { option = new List<string>() { "male","female"} } });
field.Add(new RootObject() { bindValue = "", title = "grade", code = "grade", property = new Property() { option = new List<string>() { "2", "3" } } });
foreach (RootObject item in field)
{
StackLayout layout = new StackLayout();
layout.Children.Add(new Label() { Text = item.title });
var picker = new Picker { Title = item.title };
//set the BindingContext here
picker.BindingContext = item;
foreach (string e in item.property.option)
{
picker.Items.Add(e);
//bind the value here
picker.SetBinding(Picker.SelectedItemProperty, "bindValue",mode:BindingMode.TwoWay);
}
layout.Children.Add(picker);
picker.SelectedIndexChanged += Picker_SelectedIndexChanged;
_stackLayout.Children.Add(layout);
}
Content = _stackLayout;
}
private void Picker_SelectedIndexChanged(object sender, EventArgs e)
{
//check the value change in field
RootObject r1 = field[0];
Console.WriteLine(r1.bindValue);
RootObject r2 = field[1];
Console.WriteLine(r2.bindValue);
}
}
public class Property
{
public List<string> option { get; set; }
}
public class RootObject
{
public string bindValue { get; set; }
public string title { get; set; }
public string code { get; set; }
public Property property { get; set; }
}
Refer: data-binding

Answer 2

If you need the value programatically, just access it using the picker variable you declared;
picker.SelectedItem
Otherwise if you want to bind it to the UI, you can;
myLabel.SetBinding(Label.TextProperty, new Binding("SelectedItem", source: picker));