Xamarin Forms Picker Binding

Question

I'd like to implement a simple picker XAML binded to 3 labels , where when I choose a value from the picker the labels will be populated automatically (the data comes from SQLite). Here is what I have:

 <Picker x:Name="ListJobs" Title="Select Job"  ItemsSource="{Binding options}" ItemDisplayBinding="{Binding JobNo}" SelectedItem="{Binding SelectedJobs}"/>

 <Label Text="{Binding JobsId}" IsVisible="True" x:Name="TxtId"/>
 <Label Text="{Binding name}" IsVisible="True" x:Name="TxtName"/>
 <Label Text="{Binding location}" IsVisible="True" x:Name="TxtLoc"/>

Model

public class Jobs
{
public string JobsId {get;set;}
public string name {get;set;}
public string location {get;set;}

public Jobs(){}
}

Code Behind:

protected override OnAppearing()
{
 jobsInfo = (List<Jobs>) GetJob();
foreach (var item in jobsInfo)
{
  Jobs options = new Jobs
{
  JobsId = item.JobsId,
  name = item.name,
  location = item.location
};
BindingContext = options;
}
}
 private IEnumerable<Jobs> GetJobsInfo()
        {
            var db = _connection.Table<Jobs>();
            return db.ToList();
        }

I would to select from picker (like dropdown) and populate the labels.

Answer 1

First, there are some mistakes in your code.

1.When you go through the loop (the data you gained from db), options is always updated with new data(so it generates using last object), and you set it to BindingContext. You should set a modelView here rather a model.

2.The itemSource of Picker must be a list , however you set a model here.

3.The viewmodel must implement INotifyPropertyChanged to notify the changes.

I think what you need understanding most is not this Picker , it is How to work with binding.

Bindable Properties

Data Binding Basics

From Data Bindings to MVVM

Okay, let us come back to this case. What you need is here

I simplified the demo and you can refer to it.

• XAML

   <Picker x:Name="picker" Title="Select Job" ItemsSource="{Binding JobList}" ItemDisplayBinding="{Binding Name}" SelectedItem="{Binding SelectedJob}"/> <Label Text="{Binding SelectedJob.JobsId}" IsVisible="True" x:Name="TxtId" Margin="0,100,0,0"/> <Label Text="{Binding SelectedJob.Name}" IsVisible="True" x:Name="TxtName"/> <Label Text="{Binding SelectedJob.Location}" IsVisible="True" x:Name="TxtLoc"/>

• Model and ViewModel:

   public class Jobs { public string JobsId { get; set; } public string Name { get; set; } public string Location { get; set; } } public class RootModel : INotifyPropertyChanged { List<Jobs> jobList; public List<Jobs> JobList { get { return jobList; } set { if (jobList != value) { jobList = value; OnPropertyChanged(); } } } Jobs selectedJob; public Jobs SelectedJob { get { return selectedJob; } set { if (selectedJob != value) { selectedJob = value; OnPropertyChanged(); } } } public event PropertyChangedEventHandler PropertyChanged; protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null) { PropertyChangedEventHandler handler = PropertyChanged; if (handler != null) { handler(this, new PropertyChangedEventArgs(propertyName)); } } }

• Code behind:

   public MainPage() { InitializeComponent(); this.BindingContext = new RootModel { JobList = GetJobsInfo() }; } private List<Jobs> GetJobsInfo() { var db = _connection.Table<Jobs>(); return db.ToList(); }

• My Test:

  

Answer 2

XAML:

<Picker x:Name="ListJobs" Title="Select Job" ItemsSource="{Binding AllJobs}"
        ItemDisplayBinding="{Binding Name}" SelectedItem="{Binding SelectedJob}"/>
<Label Text="{Binding SelectedJob.JobId}" IsVisible="True" x:Name="TxtId"/>
<Label Text="{Binding SelectedJob.Name}" IsVisible="True" x:Name="TxtName"/>
<Label Text="{Binding SelectedJob.Location}" IsVisible="True" x:Name="TxtLoc"/>

Model:

public class Job
{
    public string JobId { get; set; }
    public string Name { get; set; }
    public string Location {get; set; }
}

public class JobModel
{
    public List<Job> AllJobs { get; set; }
    public Job SelectedJob { get; set; }
}

Code behind:

protected override OnAppearing()
{
    BindingContext = new JobsModel {
        AllJobs = GetJobs()
    };
}

private List<Jobs> GetJobs()
{
    var db = _connection.Table<Jobs>();
    return db.ToList();
}

Answer 3

         //How to add picker or dropdownlist in Xamarin forms and bind text ?
    
    
    //we will be using Picker Properties -> pickername.ItemsSource and pickername.SelectedItem
    //In above line pickername is the x:Name given to picker 
    
    
    //page.xaml 
    
               <Frame CornerRadius="5" HeightRequest="50"  Padding="0">
                    <StackLayout Orientation="Horizontal">
                        <controls:BorderlessPicker
                                                x:Name="Pickdoctype" 
                                                ItemDisplayBinding="{Binding text}"
                                                SelectedIndexChanged="Pickdoctype_SelectedIndexChanged"
                                                HorizontalOptions="FillAndExpand"                                                                     
                                                Title="Enter Document Type"
                                                FontSize="20" 
                                                TextColor="Gray">
                        </controls:BorderlessPicker>
                        <ImageButton BackgroundColor="Transparent" Padding="0">
                            <ImageButton.Source>
                                <FontImageSource Glyph="&#xf0d7;" Size="25" 
                                                          FontFamily="{StaticResource FontAwesomeSolid}"
                                                          Color="Gray"></FontImageSource>
                            </ImageButton.Source>
                        </ImageButton>
                    </StackLayout>
                </Frame>
                
                
                
     //page.xaml.cs


      
            //Picker Get API
            var responseUserData = await httpService.Get("manageDocument/documentType/documentType/" + UserID);
            if (responseUserData.IsSuccessStatusCode)
            {
                var responseUserDataString = await responseUserData.Content.ReadAsStringAsync();
                var myDeserializedClass = JsonConvert.DeserializeObject<List<DocumentTypeModel>>(responseUserDataString);
                Pickdoctype.ItemsSource = myDeserializedClass;
               
            }
              
              
              
            //Get Picker value functionality
            private void Pickdoctype_SelectedIndexChanged(object sender, EventArgs e)
            {
                try
                {
                    DocumentTypeModel selectedItem = (DocumentTypeModel)Pickdoctype.SelectedItem;
                    string PickerValue = selectedItem.value;
                    string PickerText = selectedItem.text;
                }
                catch (Exception ex)
                {

                }
            }
    
    
    //Create a model class 
    
         public class DocumentTypeModel
        {
            public string masterName { get; set; }
            public string text { get; set; }
            public string value { get; set; }
        }