Xamarin Forms中Picker无ItemTemplate属性，如何实现图文选择器？

Xamarin.Forms原生Picker没有ItemTemplate属性，无法直接自定义列表项显示图标+文字，以下是两种可行的替代方案：

方案一：自定义Picker渲染器（原生体验） #

步骤1：定义数据模型 #

创建存储图标和文字的模型类：

public class IconPickerItem
{
    public string Text { get; set; }
    public string IconSource { get; set; } // 图标文件名，如"tablet_icon.png"
}

步骤2：创建自定义Picker控件 #

在共享项目中定义继承自Picker的自定义控件，用于绑定自定义数据源：

public class IconPicker : Picker
{
    public static readonly BindableProperty IconItemsSourceProperty = BindableProperty.Create(
        nameof(IconItemsSource),
        typeof(IEnumerable<IconPickerItem>),
        typeof(IconPicker));

    public IEnumerable<IconPickerItem> IconItemsSource
    {
        get => (IEnumerable<IconPickerItem>)GetValue(IconItemsSourceProperty);
        set => SetValue(IconItemsSourceProperty, value);
    }
}

步骤3：Android端自定义渲染器 #

实现Spinner的自定义布局渲染：

[assembly: ExportRenderer(typeof(IconPicker), typeof(IconPickerRenderer))]
namespace YourApp.Droid.Renderers
{
    public class IconPickerRenderer : PickerRenderer
    {
        public IconPickerRenderer(Context context) : base(context) { }

        protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
        {
            base.OnElementChanged(e);
            if (Control != null && e.NewElement is IconPicker iconPicker)
            {
                var items = iconPicker.IconItemsSource.ToList();
                Control.Adapter = new IconSpinnerAdapter(Context, items);
            }
        }
    }

    public class IconSpinnerAdapter : BaseAdapter<IconPickerItem>
    {
        private readonly Context _context;
        private readonly List<IconPickerItem> _items;

        public IconSpinnerAdapter(Context context, List<IconPickerItem> items)
        {
            _context = context;
            _items = items;
        }

        public override IconPickerItem this[int position] => _items[position];
        public override int Count => _items.Count;
        public override long GetItemId(int position) => position;

        public override View GetView(int position, View convertView, ViewGroup parent)
        {
            var view = convertView ?? LayoutInflater.From(_context).Inflate(Resource.Layout.IconPickerItem, parent, false);
            var iconImg = view.FindViewById<ImageView>(Resource.Id.iconImageView);
            var textTv = view.FindViewById<TextView>(Resource.Id.textTextView);
            var item = _items[position];

            textTv.Text = item.Text;
            var drawableId = _context.Resources.GetIdentifier(item.IconSource.Replace(".png", ""), "drawable", _context.PackageName);
            if (drawableId != 0) iconImg.SetImageResource(drawableId);
            return view;
        }

        public override View GetDropDownView(int position, View convertView, ViewGroup parent)
        {
            return GetView(position, convertView, parent);
        }
    }
}

同时在Android项目Resources/layout下创建IconPickerItem.axml布局文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="16dp"
    android:gravity="center_vertical">

    <ImageView
        android:id="@+id/iconImageView"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:marginRight="12dp"/>

    <TextView
        android:id="@+id/textTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="16sp"/>
</LinearLayout>

步骤4：iOS端自定义渲染器 #

实现UIPickerView的自定义行布局：

[assembly: ExportRenderer(typeof(IconPicker), typeof(IconPickerRenderer))]
namespace YourApp.iOS.Renderers
{
    public class IconPickerRenderer : PickerRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
        {
            base.OnElementChanged(e);
            if (Control != null && e.NewElement is IconPicker iconPicker)
            {
                var items = iconPicker.IconItemsSource.ToList();
                Control.Model = new IconPickerViewModel(items);
            }
        }
    }

    public class IconPickerViewModel : UIPickerViewModel
    {
        private readonly List<IconPickerItem> _items;

        public IconPickerViewModel(List<IconPickerItem> items) => _items = items;

        public override nint GetRowsInComponent(UIPickerView pickerView, nint component) => _items.Count;
        public override nint GetComponentCount(UIPickerView pickerView) => 1;

        public override UIView GetViewForRow(UIPickerView pickerView, nint row, nint component, UIView view)
        {
            var stackView = new UIStackView
            {
                Orientation = UIStackViewOrientation.Horizontal,
                Alignment = UIStackViewAlignment.Center,
                Spacing = 12,
                LayoutMargins = new UIEdgeInsets(8, 16, 8, 16),
                LayoutMarginsRelativeArrangement = true
            };

            var iconImg = new UIImageView
            {
                ContentMode = UIViewContentMode.ScaleAspectFit,
                Frame = new CGRect(0, 0, 24, 24),
                Image = UIImage.FromBundle(_items[(int)row].IconSource)
            };

            var textLabel = new UILabel
            {
                Text = _items[(int)row].Text,
                Font = UIFont.SystemFontOfSize(16)
            };

            stackView.AddArrangedSubview(iconImg);
            stackView.AddArrangedSubview(textLabel);
            return stackView;
        }

        public override nfloat GetRowHeight(UIPickerView pickerView, nint component) => 48;
    }
}

步骤5：在XAML中使用自定义Picker #

<local:IconPicker x:Name="iconPicker">
    <local:IconPicker.IconItemsSource>
        <x:Array Type="{x:Type local:IconPickerItem}">
            <local:IconPickerItem IconSource="tablet_icon.png" Text="Tabletės" />
            <local:IconPickerItem IconSource="drops_icon.png" Text="Lašai" />
        </x:Array>
    </local:IconPicker.IconItemsSource>
</local:IconPicker>

方案二：用Popup模拟Picker（跨平台无平台代码） #

借助Xamarin Community Toolkit的Popup组件，实现自定义布局的选择器，无需编写平台特定代码。

步骤1：安装NuGet包 #

为所有项目安装Xamarin.CommunityToolkit包。

步骤2：创建Popup选择页面 #

创建IconPickerPopup.xaml：

<xct:Popup xmlns="http://xamarin.com/schemas/2014/forms"
           xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
           xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
           x:Class="YourApp.Views.IconPickerPopup"
           Size="300, 400">
    <StackLayout>
        <Label Text="选择选项" FontSize="18" FontWeight="Bold" Margin="16"/>
        <CollectionView x:Name="itemsCollection"
                        SelectionMode="Single"
                        Margin="0,8">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout Orientation="Horizontal" Padding="16,12" Spacing="12">
                        <Image Source="{Binding IconSource}" WidthRequest="24" HeightRequest="24"/>
                        <Label Text="{Binding Text}" FontSize="16" VerticalOptions="Center"/>
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>
</xct:Popup>

后台代码IconPickerPopup.xaml.cs：

public partial class IconPickerPopup : Popup
{
    public event EventHandler<IconPickerItem> ItemSelected;
    private readonly List<IconPickerItem> _items;

    public IconPickerPopup(List<IconPickerItem> items)
    {
        InitializeComponent();
        _items = items;
        itemsCollection.ItemsSource = _items;
        itemsCollection.SelectionChanged += ItemsCollection_SelectionChanged;
    }

    private void ItemsCollection_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        if (e.CurrentSelection.FirstOrDefault() is IconPickerItem selectedItem)
        {
            ItemSelected?.Invoke(this, selectedItem);
            Dismiss(selectedItem);
        }
    }
}

步骤3：在主页面中触发Popup #

用可点击布局模拟Picker外观，点击后弹出选择Popup：

<Frame BorderColor="Gray" CornerRadius="4" Padding="8" HorizontalOptions="Fill">
    <StackLayout x:Name="selectedItemLayout" Orientation="Horizontal" HorizontalOptions="FillAndExpand" Spacing="12">
        <Image x:Name="selectedIcon" WidthRequest="24" HeightRequest="24"/>
        <Label x:Name="selectedText" FontSize="16" HorizontalOptions="FillAndExpand" VerticalOptions="Center"/>
        <Image Source="arrow_down.png" WidthRequest="20" HeightRequest="20"/>
    </StackLayout>
</Frame>

后台逻辑：

private readonly List<IconPickerItem> _pickerItems = new List<IconPickerItem>
{
    new IconPickerItem { IconSource = "tablet_icon.png", Text = "Tabletės" },
    new IconPickerItem { IconSource = "drops_icon.png", Text = "Lašai" }
};

public MainPage()
{
    InitializeComponent();
    UpdateSelectedItem(_pickerItems[0]);
    // 添加点击手势
    selectedItemLayout.GestureRecognizers.Add(new TapGestureRecognizer
    {
        Command = new Command(async () =>
        {
            var popup = new IconPickerPopup(_pickerItems);
            popup.ItemSelected += (s, e) => UpdateSelectedItem(e);
            await Navigation.ShowPopupAsync(popup);
        })
    });
}

private void UpdateSelectedItem(IconPickerItem item)
{
    selectedIcon.Source = item.IconSource;
    selectedText.Text = item.Text;
}

方案对比 #

• 自定义渲染器：复用原生Picker交互逻辑，体验贴近系统原生，但需编写平台特定代码，维护成本较高。
• Popup模拟：跨平台代码统一，布局自定义灵活性强，无需处理平台差异，但交互体验和原生Picker略有区别。

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