Xamarin Forms的选择器绑定

Question

Xamarin Forms的选择器绑定

7

我想实现一个简单的选择器，使用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();
        }

我想从选择器（类似于下拉菜单）中选择并填充标签。

- prezequias

3个回答

6

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

- Olexiy Sadovnikov

谢谢Olexiy，你的回答也很棒。 - prezequias

0

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

- Indian

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ColeX · Accepted Answer

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

1.当您遍历循环（从数据库获取的数据）时，选项始终使用新数据进行更新（因此它是使用上一个对象生成的），并将其设置为BindingContext。在此处应该设置一个modelView而不是model。

2.Picker的itemSource必须是一个list，但是您在这里设置了一个model。

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

我认为您最需要理解的不是这个Picker，而是如何使用绑定。

可绑定属性

数据绑定基础知识

从数据绑定到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"/>

模型和视图模型：

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

我的测试：