如何用MAUI的Picker实现图文显示？WPF可自定义ComboBox的ItemTemplate

MAUI的默认Picker控件确实仅支持文本显示，但可以通过以下几种方式实现图文或自定义内容的下拉选择：

1. 自定义平台渲染器 #

针对Android、iOS、Windows分别定制Picker的下拉项布局，这是最贴近原生体验的方案。

步骤1：定义共享的CustomPicker类 #

public class CustomPicker : Picker
{
    // 可添加自定义绑定属性，比如扩展ItemsSource支持复杂模型
}

步骤2：Android平台渲染器 #

[assembly: ExportRenderer(typeof(CustomPicker), typeof(CustomPickerRenderer))]
namespace YourApp.Platforms.Android
{
    public class CustomPickerRenderer : PickerRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
        {
            base.OnElementChanged(e);
            if (Control != null && Element is CustomPicker customPicker && customPicker.ItemsSource != null)
            {
                Control.Adapter = new CustomPickerAdapter(Context, customPicker.ItemsSource.Cast<YourItemModel>());
            }
        }
    }

    public class CustomPickerAdapter : ArrayAdapter<YourItemModel>
    {
        public CustomPickerAdapter(Context context, IEnumerable<YourItemModel> items) : base(context, 0, items.ToList())
        {
        }

        public override View GetView(int position, View convertView, ViewGroup parent)
            => GetCustomView(position, convertView, parent);

        public override View GetDropDownView(int position, View convertView, ViewGroup parent)
            => GetCustomView(position, convertView, parent);

        private View GetCustomView(int position, View convertView, ViewGroup parent)
        {
            var item = GetItem(position);
            convertView ??= LayoutInflater.From(parent.Context).Inflate(Resource.Layout.CustomPickerItem, parent, false);

            convertView.FindViewById<ImageView>(Resource.Id.picker_img).SetImageResource(item.ImageResId);
            convertView.FindViewById<TextView>(Resource.Id.picker_text).Text = item.DisplayText;

            return convertView;
        }
    }
}

对应的Android布局文件CustomPickerItem.axml：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:padding="8dp"
    android:gravity="center_vertical">
    <ImageView android:id="@+id/picker_img"
        android:layout_width="24dp"
        android:layout_height="24dp"/>
    <TextView android:id="@+id/picker_text"
        android:layout_marginLeft="8dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</LinearLayout>

步骤3：iOS平台渲染器 #

[assembly: ExportRenderer(typeof(CustomPicker), typeof(CustomPickerRenderer))]
namespace YourApp.Platforms.iOS
{
    public class CustomPickerRenderer : PickerRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
        {
            base.OnElementChanged(e);
            if (Control != null && Element is CustomPicker customPicker && customPicker.ItemsSource != null)
            {
                var pickerView = new UIPickerView();
                var items = customPicker.ItemsSource.Cast<YourItemModel>().ToList();
                pickerView.DataSource = new CustomPickerDataSource(items);
                pickerView.Delegate = new CustomPickerDelegate(items, customPicker);
                Control.InputView = pickerView;
            }
        }
    }

    public class CustomPickerDataSource : UIPickerViewDataSource
    {
        private readonly List<YourItemModel> _items;
        public CustomPickerDataSource(List<YourItemModel> items) => _items = items;
        public override nint GetComponentCount(UIPickerView pickerView) => 1;
        public override nint GetRowsInComponent(UIPickerView pickerView, nint component) => _items.Count;
    }

    public class CustomPickerDelegate : UIPickerViewDelegate
    {
        private readonly List<YourItemModel> _items;
        private readonly CustomPicker _picker;
        public CustomPickerDelegate(List<YourItemModel> items, CustomPicker picker)
        {
            _items = items;
            _picker = picker;
        }

        public override UIView GetView(UIPickerView pickerView, nint row, nint component, UIView view)
        {
            var stack = new UIStackView
            {
                Axis = UILayoutConstraintAxis.Horizontal,
                Spacing = 8,
                Alignment = UIStackViewAlignment.Center
            };

            stack.AddArrangedSubview(new UIImageView(UIImage.FromBundle(_items[(int)row].ImageName))
            {
                Frame = new CGRect(0, 0, 24, 24)
            });

            stack.AddArrangedSubview(new UILabel { Text = _items[(int)row].DisplayText });

            return stack;
        }

        public override void Selected(UIPickerView pickerView, nint row, nint component)
        {
            _picker.SelectedIndex = (int)row;
        }
    }
}

步骤4：Windows平台渲染器 #

Windows平台可直接复用WPF的思路，修改ComboBox的ItemTemplate：

[assembly: ExportRenderer(typeof(CustomPicker), typeof(CustomPickerRenderer))]
namespace YourApp.Platforms.Windows
{
    public class CustomPickerRenderer : PickerRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
        {
            base.OnElementChanged(e);
            if (Control is ComboBox comboBox)
            {
                comboBox.ItemTemplate = (DataTemplate)Application.Current.Resources["CustomPickerItemTemplate"];
            }
        }
    }
}

在共享项目的XAML资源中定义模板：

<DataTemplate x:Key="CustomPickerItemTemplate">
    <StackLayout Orientation="Horizontal" Spacing="8" Padding="8">
        <Image Source="{Binding ImageSource}" WidthRequest="24" HeightRequest="24"/>
        <Label Text="{Binding DisplayText}" VerticalOptions="Center"/>
    </StackLayout>
</DataTemplate>

最终使用 #

在页面XAML中引用自定义Picker：

<local:CustomPicker ItemsSource="{Binding YourItemList}" SelectedItem="{Binding SelectedItem}"/>

2. 用Popup模拟自定义Picker #

如果不想写多平台渲染器，可以用.NET MAUI Community Toolkit的Popup组件模拟下拉选择，实现更灵活的自定义布局：

定义Popup类 #

public class CustomPickerPopup : Popup
{
    public CustomPickerPopup(IEnumerable<YourItemModel> items, Action<YourItemModel> onSelect)
    {
        var listView = new ListView
        {
            ItemsSource = items,
            ItemTemplate = new DataTemplate(() =>
            {
                var image = new Image { WidthRequest = 24, HeightRequest = 24 };
                image.SetBinding(Image.SourceProperty, nameof(YourItemModel.ImageSource));

                var label = new Label();
                label.SetBinding(Label.TextProperty, nameof(YourItemModel.DisplayText));

                return new ViewCell
                {
                    View = new StackLayout
                    {
                        Orientation = StackOrientation.Horizontal,
                        Spacing = 8,
                        Padding = 8,
                        Children = { image, label }
                    }
                };
            })
        };

        listView.ItemSelected += (s, e) =>
        {
            if (e.SelectedItem is YourItemModel item)
            {
                onSelect(item);
                Close();
            }
        };

        Content = new ScrollView
        {
            Content = listView,
            WidthRequest = 250,
            HeightRequest = 300
        };
    }
}

触发Popup #

在页面中用按钮或自定义控件触发：

<Button Text="选择项目" Clicked="ShowCustomPicker"/>
<Label x:Name="ResultLabel"/>

后台代码：

private async void ShowCustomPicker(object sender, EventArgs e)
{
    var items = new List<YourItemModel>
    {
        new() { DisplayText = "项目1", ImageSource = "icon1.png" },
        new() { DisplayText = "项目2", ImageSource = "icon2.png" }
    };

    var popup = new CustomPickerPopup(items, item =>
    {
        ResultLabel.Text = $"选中：{item.DisplayText}";
    });

    await PopupExtensions.ShowPopupAsync(this, popup);
}

3. 使用第三方控件库 #

Syncfusion、Telerik等商业MAUI控件库提供了支持自定义ItemTemplate的Picker组件，开箱即用，但需要注意授权问题。

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