Xamarin表单选择器绑定 [英] Xamarin Forms Picker Binding

查看:167
本文介绍了Xamarin表单选择器绑定的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我的Xamarin Forms项目需要一些帮助 我想实现一个绑定到3个标签的简单选择器Xaml,当我从选择器中选择一个值时,标签将自动填充. (数据来自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();
        }

我要从选择器中进行选择(例如下拉菜单)并填充标签. 你们能提供一些线索吗? 预先感谢您的支持

桑托斯(Santos)

解决方案

首先,您的代码中存在一些错误.

1.遍历循环(从db获得的数据)时,选项始终会更新为新数据(因此它是使用最后一个对象生成的),并将其设置为BindingContext.您应该在此处设置modelView而不是模型.

2.Picker的itemSource必须为list,但是您在此处设置了模型.

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

我认为您最需要了解的不是此选择器,而是如何进行绑定.

可绑定属性

数据绑定基础

从数据绑定到MVVM

好的,让我们回到这个案例.您需要的是此处

我简化了演示,您可以参考它.

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

  • 模型和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));
            }
        }
    }
    

  • 代码背后:

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

  • 我的测试:

I need some help with my project on Xamarin Forms 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. (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. Can you guys give some clue? Thanks in advance for your support

Santos

解决方案

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:

这篇关于Xamarin表单选择器绑定的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆