如何为Xamarin Picker分配键值对？实现显示值返回键

DevOps 小满

2026-8-18

问题描述

我想实现类似HTML <select> 组件的Picker效果：

<select>
<option value="KEY">Value</option>
</select>

但不知道怎么实现。我已有如下格式的列表：

List<KeyValuePair<int, string>> KVP = {1: "test", 2: "test2"}

当前XAML代码：

<StackLayout x:Name="PickerStack">
    <Picker x:Name="DefaultPicker"
            Title="---Select a map---" 
            ItemsSource="{Binding GPXList_PickerList}" 
            SelectedIndexChanged="PickerStack_Selected" 
            SelectedItem="{Binding PickerStack_Selection}" />
</StackLayout>

当前后台代码：

var ResultConvert = JsonConvert.DeserializeObject<GPSAPI_GPXList[]>(ResultJSON);
List<int> gpxList_ID = ResultConvert.Select(x => x.gpxList_ID).ToList();
List<string> gpxList_TrailHead_Name = ResultConvert.Select(x => x.gpxList_TrailHead_Name).ToList();
GPXList_Dictionary = ResultConvert.ToDictionary(x => x.gpxList_ID, x => x.gpxList_TrailHead_Name);

// 调用方法填充Picker
PickerView(GPXList_PickerItems);
}

// 用API返回值填充Picker
public void PickerView(List<KeyValuePair<int, string>> PickerSource)
{
    DefaultPicker.ItemsSource = PickerSource;
}

// 监听Picker选中变化，获取值
private void PickerStack_Selected(object sender, EventArgs e)
{
    Picker PickerSelection = sender as Picker;
    TrailText.Text = PickerSelection.SelectedItem.ToString();
}

解决方案

要实现Picker显示KeyValuePair的Value，同时获取对应的Key，只需调整Picker的显示绑定和选中项处理逻辑即可，具体步骤如下：

1. 修改XAML中的Picker配置

给Picker添加ItemDisplayBinding属性，指定显示KeyValuePair的Value字段，确保用户看到的是文本内容；同时修正ItemsSource的绑定目标：

<StackLayout x:Name="PickerStack">
    <Picker x:Name="DefaultPicker"
            Title="---Select a map---" 
            ItemsSource="{Binding GPXList_PickerItems}" <!-- 绑定到你定义的GPXList_PickerItems -->
            ItemDisplayBinding="{Binding Value}" <!-- 关键：指定显示Value -->
            SelectedIndexChanged="PickerStack_Selected" 
            SelectedItem="{Binding PickerStack_Selection}" />
</StackLayout>

2. 调整选中事件的处理逻辑

在PickerStack_Selected方法中，将SelectedItem转换为KeyValuePair<int, string>类型，即可分别获取Key和Value：

private void PickerStack_Selected(object sender, EventArgs e)
{
    Picker picker = sender as Picker;
    if (picker.SelectedItem is KeyValuePair<int, string> selectedKvp)
    {
        int selectedKey = selectedKvp.Key; // 获取选中项的Key
        string selectedValue = selectedKvp.Value; // 获取选中项的Value
        TrailText.Text = selectedValue; // 显示Value给用户
        // 这里可使用selectedKey执行后续业务逻辑，比如API调用、数据更新等
    }
}

3. 优化数据填充逻辑

简化反序列化后的列表生成步骤，直接创建KeyValuePair列表并赋值：

var ResultConvert = JsonConvert.DeserializeObject<GPSAPI_GPXList[]>(ResultJSON);
// 直接生成KeyValuePair列表，替代原有拆分ID和名称的逻辑
GPXList_PickerItems = ResultConvert.Select(x => new KeyValuePair<int, string>(x.gpxList_ID, x.gpxList_TrailHead_Name)).ToList();
// 直接绑定数据源，可省略PickerView方法（保留也可，按个人习惯）
DefaultPicker.ItemsSource = GPXList_PickerItems;

4. 可选：MVVM模式优化（若使用ViewModel）

如果项目采用MVVM，可将SelectedItem绑定到ViewModel的属性，无需事件处理即可获取选中项：

// ViewModel中的属性
private KeyValuePair<int, string> _selectedPickerItem;
public KeyValuePair<int, string> SelectedPickerItem
{
    get => _selectedPickerItem;
    set
    {
        _selectedPickerItem = value;
        OnPropertyChanged();
        // 在此直接通过value.Key和value.Value处理业务
    }
}

对应的XAML修改：

<Picker x:Name="DefaultPicker"
        Title="---Select a map---" 
        ItemsSource="{Binding GPXList_PickerItems}" 
        ItemDisplayBinding="{Binding Value}"
        SelectedItem="{Binding SelectedPickerItem}" />

关键说明

ItemDisplayBinding是实现Picker自定义显示内容的核心属性，绑定KeyValuePair.Value即可让用户看到文本值。
选中的SelectedItem本身就是KeyValuePair实例，正确转换类型后可直接获取Key和Value，无需额外查询字典。

内容的提问来源于stack exchange，提问作者tlf