Xamarin Forms带筛选的自定义Picker复合控件绑定问题求助

问题描述 #

我正在开发一个带筛选功能的自定义复合控件FilterPicker，类似带顶部筛选栏的Picker模态弹窗，用于处理大量数据的选择。页面级功能已实现，但封装为可复用控件时，无法通过BindableProperty指定ListView中Label要显示的对象字段。

解决方案 #

核心问题在于ListView的ItemTemplate是针对每个数据项的，无法直接在控件后台通过单个Label实例绑定动态字段。需要通过动态生成数据模板和属性变更回调来实现DisplayField的动态绑定，同时完善筛选逻辑。

1. 优化BindableProperty定义，添加属性变更回调

修改后台代码中DisplayFieldProperty和ItemsSourceProperty的定义，添加静态回调方法处理属性变更：

using System;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Reflection;
using System.Windows.Input;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace ReceivingApp.Controls
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class FilterPicker : Grid
    {
        private IEnumerable _originalItemsSource;

        public static readonly BindableProperty DisplayFieldProperty =
            BindableProperty.Create(nameof(DisplayField),
                typeof(string),
                typeof(FilterPicker),
                default(string),
                BindingMode.OneWay,
                propertyChanged: OnDisplayFieldChanged);

        public static readonly BindableProperty ItemsSourceProperty =
           BindableProperty.Create(nameof(ItemsSource),
               typeof(IEnumerable),
               typeof(FilterPicker),
               default(IEnumerable),
               BindingMode.TwoWay,
               propertyChanged: OnItemsSourceChanged);

        // 其他BindableProperties（如PlaceholderProperty）保留

        public IEnumerable ItemsSource
        {
            get => (IEnumerable)GetValue(ItemsSourceProperty);
            set => SetValue(ItemsSourceProperty, value);
        }

        public string DisplayField
        {
            get => (string)GetValue(DisplayFieldProperty);
            set => SetValue(DisplayFieldProperty, value);
        }

        public FilterPicker()
        {
            InitializeComponent();
            FilterEntry.TextChanged += FilterEntry_TextChanged;
        }

        // DisplayField变更时动态生成ItemTemplate
        private static void OnDisplayFieldChanged(BindableObject bindable, object oldValue, object newValue)
        {
            var picker = bindable as FilterPicker;
            if (picker == null || string.IsNullOrEmpty(newValue?.ToString()))
                return;

            var displayField = newValue.ToString();
            // 动态创建绑定到指定字段的数据模板
            var dataTemplate = new DataTemplate(() =>
            {
                var label = new Label();
                label.SetBinding(Label.TextProperty, new Binding(displayField));
                return new ViewCell { View = new Grid { Children = { label } } };
            });

            picker.ListPicker.ItemTemplate = dataTemplate;
        }

        // ItemsSource变更时保存原始数据并更新列表
        private static void OnItemsSourceChanged(BindableObject bindable, object oldValue, object newValue)
        {
            var picker = bindable as FilterPicker;
            if (picker == null) return;

            picker._originalItemsSource = newValue as IEnumerable;
            picker.ListPicker.ItemsSource = picker._originalItemsSource;

            // 如果DisplayField已设置，同步更新模板
            if (!string.IsNullOrEmpty(picker.DisplayField))
            {
                OnDisplayFieldChanged(bindable, null, picker.DisplayField);
            }
        }

        // 筛选输入框文本变更时过滤列表
        private void FilterEntry_TextChanged(object sender, TextChangedEventArgs e)
        {
            if (_originalItemsSource == null) return;

            var filterText = e.NewTextValue?.Trim()?.ToLower();
            if (string.IsNullOrEmpty(filterText))
            {
                ListPicker.ItemsSource = _originalItemsSource;
                return;
            }

            // 通过反射获取字段值进行过滤
            var filteredItems = _originalItemsSource.Cast<object>()
                .Where(item =>
                {
                    var prop = item.GetType().GetProperty(DisplayField);
                    if (prop == null) return false;
                    var value = prop.GetValue(item)?.ToString()?.ToLower();
                    return value?.Contains(filterText) == true;
                })
                .ToList();

            ListPicker.ItemsSource = filteredItems;
        }

        // 移除原OnPropertyChanged中关于DisplayField和ItemsSource的处理逻辑
        protected override void OnPropertyChanged(string propertyName = null)
        {
            base.OnPropertyChanged(propertyName);
            // 仅保留其他属性的处理逻辑（如PlaceholderProperty）
        }
    }
}

2. 简化XAML中的ItemTemplate

由于后台会动态生成ItemTemplate，可删除XAML中ListView的ItemTemplate部分，简化后的ListView代码如下：

<ListView x:Name="ListPicker" 
          Margin="0,12"
          HorizontalOptions="FillAndExpand" 
          SeparatorVisibility="None"/>

3. 使用控件时的绑定示例

在页面XAML中使用FilterPicker时，直接绑定ItemsSource和DisplayField即可：

<localcontrols:FilterPicker 
    ItemsSource="{Binding YourDataList}"
    DisplayField="YourDisplayPropertyName"
    Placeholder="Select an item"/>

关键说明 #

• 动态数据模板：通过DataTemplate的工厂方法，根据DisplayField动态创建Label的绑定路径，确保每个数据项都能正确显示指定字段。
• 原始数据缓存：保存_originalItemsSource避免筛选时丢失原始数据，保证筛选功能的正确性。
• 反射过滤：使用反射获取对象的指定字段值，实现通用的筛选逻辑，适配任意类型的数据列表。

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