设置选择器的ItemsSource属性

PDF用于离线使用

• 下载PDF

示例代码：

• Picker演示
• 猴子应用程序
• 可绑定选择器

相关API：

• 选择器

让我们知道你对此的感受

最后更新：4个月前

选择器视图是用于从数据列表中选择文本项的控件。本文介绍如何通过设置ItemsSource属性以及如何响应用户选择项目来填充数据。

Xamarin.Forms 2.3.4 Picker通过添加通过设置其ItemsSource属性来填充数据的能力以及从SelectedItem属性中检索所选项目来增强视图。此外，可以通过将TextColor属性设置为a 来更改所选项目的文本颜色Color。

用数据填充选择器

一个Picker可以用数据通过其设置来填充ItemsSource属性的IList集合。集合中的每个项目必须是或从其中导出的object。项目可以通过ItemsSource从一个项目数组初始化属性在XAML中添加：

<Picker x:Name="picker" Title="Select a monkey">
 <Picker.ItemsSource>
 <x:Array Type="{x:Type x:String}">
 <x:String>Baboon</x:String>
 <x:String>Capuchin Monkey</x:String>
 <x:String>Blue Monkey</x:String>
 <x:String>Squirrel Monkey</x:String>
 <x:String>Golden Lion Tamarin</x:String>
 <x:String>Howler Monkey</x:String>
 <x:String>Japanese Macaque</x:String>
 </x:Array>
 </Picker.ItemsSource>
</Picker>

请注意，该x:Array元素需要一个Type指示数组中项目类型的属性。

等效的C＃代码如下所示：

var monkeyList = new List<string>();
monkeyList.Add("Baboon");
monkeyList.Add("Capuchin Monkey");
monkeyList.Add("Blue Monkey");
monkeyList.Add("Squirrel Monkey");
monkeyList.Add("Golden Lion Tamarin");
monkeyList.Add("Howler Monkey");
monkeyList.Add("Japanese Macaque");

var picker = new Picker { Title = "Select a monkey" };
picker.ItemsSource = monkeyList;

响应项目选择

A Picker支持一次选择一个项目。当用户选择一个项目时，SelectedIndexChanged事件触发，SelectedIndex属性被更新为表示列表中所选项目的索引的整数，并且该SelectedItem属性被更新为object表示所选项目。该SelectedIndex属性是一个基于零的数字，表示用户选择的项目。如果没有选择任何项目，Picker则首次创建和初始化时SelectedIndex将是-1。

以下代码示例显示如何SelectedItem从PickerXAML中检索属性值：

<Label Text="{Binding Source={x:Reference picker}, Path=SelectedItem}" />

等效的C＃代码如下所示：

var monkeyNameLabel = new Label();
monkeyNameLabel.SetBinding(Label.TextProperty, new Binding("SelectedItem", source: picker));

另外，SelectedIndexChanged事件触发时可以执行事件处理程序：

void OnPickerSelectedIndexChanged(object sender, EventArgs e)
{
 var picker = (Picker)sender;
 int selectedIndex = picker.SelectedIndex;

 if (selectedIndex != -1)
 {
 monkeyNameLabel.Text = (string)picker.ItemsSource[selectedIndex];
 }
}

此方法获取SelectedIndex属性值，并使用该值从ItemsSource集合中检索所选项。这在功能上等同于从SelectedItem属性中检索所选项。请注意，ItemsSource集合中的每个项目都是类型object，因此必须将其转换string为显示。

Picker可以通过设置SelectedIndex或SelectedItem属性来初始化A 来显示特定项目。但是，这些属性必须在初始化集合后设置ItemsSource。

使用数据绑定填充选择器

阿Picker可以通过使用数据结合其结合也用数据填充ItemsSource属性设置为一个IList集合。在XAML中，这是通过Binding标记扩展来实现的：

<Picker Title="Select a monkey" ItemsSource="{Binding Monkeys}" ItemDisplayBinding="{Binding Name}" />

等效的C＃代码如下所示：

var picker = new Picker { Title = "Select a monkey" };
picker.SetBinding(Picker.ItemsSourceProperty, "Monkeys");
picker.ItemDisplayBinding = new Binding("Name");

的ItemsSource属性数据绑定到Monkeys所连接的视图模型，它返回一个的属性IList集合。以下代码示例显示了Monkey该类，其中包含四个属性：

public class Monkey
{
 public string Name { get; set; }
 public string Location { get; set; }
 public string Details { get; set; }
 public string ImageUrl { get; set; }
}

当绑定到对象列表时，Picker必须告诉每个对象显示哪个属性。这是通过将ItemDisplayBinding属性设置为每个对象的必需属性来实现的。在上面的代码示例中，Picker设置为显示每个Monkey.Name属性值。

响应项目选择

当数据绑定SelectedItem更改时，可以将对象设置为属性值：

<Picker Title="Select a monkey"
 ItemsSource="{Binding Monkeys}"
 ItemDisplayBinding="{Binding Name}"
 SelectedItem="{Binding SelectedMonkey}" />
<Label Text="{Binding SelectedMonkey.Name}" ... />
<Label Text="{Binding SelectedMonkey.Location}" ... />
<Image Source="{Binding SelectedMonkey.ImageUrl}" ... />
<Label Text="{Binding SelectedMonkey.Details}" ... />

等效的C＃代码如下所示：

var picker = new Picker { Title = "Select a monkey" };
picker.SetBinding(Picker.ItemsSourceProperty, "Monkeys");
picker.SetBinding(Picker.SelectedItemProperty, "SelectedMonkey");
picker.ItemDisplayBinding = new Binding("Name");

var nameLabel = new Label { ... };
nameLabel.SetBinding(Label.TextProperty, "SelectedMonkey.Name");

var locationLabel = new Label { ... };
locationLabel.SetBinding(Label.TextProperty, "SelectedMonkey.Location");

var image = new Image { ... };
image.SetBinding(Image.SourceProperty, "SelectedMonkey.ImageUrl");

var detailsLabel = new Label();
detailsLabel.SetBinding(Label.TextProperty, "SelectedMonkey.Details");

的SelectedItem属性数据绑定到SelectedMonkey所连接的视图模型，它是类型的属性Monkey。因此，当用户选择该项目时Picker，该SelectedMonkey属性将被设置为所选Monkey对象。的SelectedMonkey对象数据被显示在用户界面中通过Label和Image观点：

请注意，该属性SelectedItem和SelectedIndex默认属性都支持双向绑定。

概要

该Picker视图是用于从数据列表中选择文本项的控件。本文介绍了如何Picker通过设置ItemsSource属性来填充数据，以及如何响应用户选择项目。这种在Xamarin.Forms 2.3.4中引入的方法是与a进行交互的推荐方法Picker。