如何在.NET MAUI中实现Picker跨集合填充并绑定选中项？

问题根源 #

你的Picker无法正确选中项，主要有两个核心原因：

1. ItemDisplayBinding绑定错误：Picker的ItemsSource是ObservableCollection<string>，但你设置了ItemDisplayBinding="{Binding CategoryName}"——string类型并没有CategoryName属性，这会导致显示逻辑失效。
2. SelectedItem的引用匹配机制：MAUI Picker默认通过引用相等判断选中项，即使字符串值相同，只要AvailableAccounts中的字符串和Account.CategoryName不是同一个内存引用，就会匹配失败。

解决方案1：修复引用匹配（适用于分类列表来自账户数据的场景） #

如果你的AvailableAccounts是从AccountList的CategoryName中提取的唯一值，直接复用账户对象中的字符串引用即可解决问题。

步骤1：修改ViewModel初始化逻辑 #

public partial class AccountKeyVM : BaseViewModel
{
    public AccountKeyVM()
    {
        // 先初始化账户列表
        AccountList = new ObservableCollection<Account>
        {
            new Account { Number = "1", Name = "账户1", CategoryName = "分类A" },
            new Account { Number = "2", Name = "账户2", CategoryName = "分类B" },
            new Account { Number = "3", Name = "账户3", CategoryName = "分类A" }
        };

        // 直接复用Account对象中的字符串引用，提取唯一分类
        var uniqueCategories = AccountList.Select(a => a.CategoryName).Distinct().ToList();
        AvailableAccounts = new ObservableCollection<string>(uniqueCategories);
    }

    // 原ViewModel属性保留
    [ObservableProperty]
    ObservableCollection<Account> accountList;

    [ObservableProperty]
    Account accountListSelectedItem;

    [ObservableProperty]
    ObservableCollection<string> availableAccounts;
}

步骤2：修正XAML中的Picker绑定 #

删除错误的ItemDisplayBinding，保留正确的SelectedItem和ItemsSource绑定：

<Picker Grid.Column="2" 
        FontSize="11" 
        WidthRequest="250" 
        HeightRequest="50" 
        Margin="5,0,0,0"
        HorizontalTextAlignment="Start" 
        VerticalTextAlignment="Center" 
        SelectedItem="{Binding CategoryName}" 
        ItemsSource="{Binding Source={RelativeSource AncestorType={x:Type vm:AccountKeyVM}}, Path=AvailableAccounts}"/>

解决方案2：使用SelectedIndex绑定（适用于分类列表独立维护的场景） #

如果AvailableAccounts是独立维护的（比如从服务器获取），使用SelectedIndex绑定可以彻底避开引用匹配问题，因为索引是基于位置判断的。

步骤1：修改Account模型 #

添加CategoryIndex属性，用于绑定Picker的选中索引：

using CommunityToolkit.Mvvm.ComponentModel;

public partial class Account : ObservableObject
{
    public string Number { get; set; }
    public string Name { get; set; }

    [ObservableProperty]
    string categoryName;

    [ObservableProperty]
    int categoryIndex;
}

步骤2：ViewModel中同步索引与分类名称 #

添加逻辑，确保CategoryIndex和CategoryName双向同步：

public partial class AccountKeyVM : BaseViewModel
{
    [ObservableProperty]
    ObservableCollection<Account> accountList;

    [ObservableProperty]
    Account accountListSelectedItem;

    private ObservableCollection<string> _availableAccounts;
    public ObservableCollection<string> AvailableAccounts
    {
        get => _availableAccounts;
        set
        {
            if (SetProperty(ref _availableAccounts, value))
            {
                UpdateAccountCategoryIndexes();
            }
        }
    }

    public AccountKeyVM()
    {
        // 初始化示例数据
        AccountList = new ObservableCollection<Account>
        {
            new Account { Number = "1", Name = "账户1", CategoryName = "分类A" },
            new Account { Number = "2", Name = "账户2", CategoryName = "分类B" }
        };

        AvailableAccounts = new ObservableCollection<string> { "分类A", "分类B", "分类C" };

        // 监听账户列表变化，同步每个账户的属性变更
        AccountList.CollectionChanged += AccountList_CollectionChanged;
    }

    private void AccountList_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
    {
        if (e.NewItems != null)
        {
            foreach (Account account in e.NewItems)
            {
                account.PropertyChanged += Account_PropertyChanged;
            }
        }
        if (e.OldItems != null)
        {
            foreach (Account account in e.OldItems)
            {
                account.PropertyChanged -= Account_PropertyChanged;
            }
        }
    }

    private void Account_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
    {
        var account = sender as Account;
        if (account == null || AvailableAccounts == null) return;

        // 索引变更时更新分类名称
        if (e.PropertyName == nameof(Account.CategoryIndex))
        {
            if (account.CategoryIndex >= 0 && account.CategoryIndex < AvailableAccounts.Count)
            {
                account.CategoryName = AvailableAccounts[account.CategoryIndex];
            }
        }
        // 分类名称变更时更新索引
        else if (e.PropertyName == nameof(Account.CategoryName))
        {
            var index = AvailableAccounts.IndexOf(account.CategoryName);
            account.CategoryIndex = index >= 0 ? index : 0;
        }
    }

    // 初始化或更新分类列表时，同步所有账户的索引
    private void UpdateAccountCategoryIndexes()
    {
        if (AccountList == null || AvailableAccounts == null) return;
        foreach (var account in AccountList)
        {
            var index = AvailableAccounts.IndexOf(account.CategoryName);
            account.CategoryIndex = index >= 0 ? index : 0;
        }
    }
}

步骤3：修改XAML中的Picker绑定 #

替换SelectedItem为SelectedIndex绑定，删除错误的ItemDisplayBinding：

<Picker Grid.Column="2" 
        FontSize="11" 
        WidthRequest="250" 
        HeightRequest="50" 
        Margin="5,0,0,0"
        HorizontalTextAlignment="Start" 
        VerticalTextAlignment="Center" 
        SelectedIndex="{Binding CategoryIndex}" 
        ItemsSource="{Binding Source={RelativeSource AncestorType={x:Type vm:AccountKeyVM}}, Path=AvailableAccounts}"/>

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