Xamarin 表单选择器绑定

Question

我想实现一个简单的选择器 XAML 绑定到 3 个标签，当我从选择器中选择一个值时，标签将自动填充（数据来自 SQLite）。 这是我所拥有的：

 <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"/>

型号

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

public Jobs(){}
}

代码背后：

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

我会从选择器（如下拉菜单）中进行选择并填充标签。

Answer 1

首先，您的代码中有一些错误。

1.当您通过循环（从 db 获得的数据）时，选项总是使用新数据更新（因此它使用最后一个对象生成），并将其设置为 BindingContext。你应该在这里设置一个模型视图而不是一个模型。

2.Picker的itemSource必须是list，但是你在这里设置一个模型。

3.viewmodel 必须实现INotifyPropertyChanged 来通知更改。

我觉得你最需要了解的不是这个 Picker ，而是 How to work with binding。

Bindable Properties

Data Binding Basics

From Data Bindings to MVVM

好的，让我们回到这个案例。你需要的是here

我简化了demo，大家可以参考一下。

• 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"/>
  

• 模型和视图模型：

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

• 后面的代码：

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

• 我的测试：

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"/>

型号：

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

后面的代码：

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

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