如何在Xamarin中创建滚轮式（旋转）Picker组件？

要将默认Picker改为滚轮/旋转样式，可通过以下两种方案实现：

方案一：自定义原生渲染器（原生平台实现） #

针对不同平台编写自定义渲染器，替换原生Picker为滚轮样式控件：

Android端实现 #

创建Picker的自定义渲染器，替换为NumberPicker：

[assembly: ExportRenderer(typeof(Picker), typeof(CustomPickerRenderer))]
namespace YourAppNamespace.Droid
{
    public class CustomPickerRenderer : PickerRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
        {
            base.OnElementChanged(e);
            if (Control != null && Element != null)
            {
                var numberPicker = new NumberPicker(Context);
                numberPicker.MinValue = 1;
                numberPicker.MaxValue = Element.Items.Count;
                numberPicker.SetDisplayedValues(Element.Items.ToArray());
                
                numberPicker.ValueChanged += (s, args) => 
                {
                    Element.SelectedIndex = numberPicker.Value - 1;
                };

                SetNativeControl(numberPicker);
            }
        }
    }
}

iOS端实现 #

替换原生Picker输入视图为UIPickerView，并添加完成工具栏：

[assembly: ExportRenderer(typeof(Picker), typeof(CustomPickerRenderer))]
namespace YourAppNamespace.iOS
{
    public class CustomPickerRenderer : PickerRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
        {
            base.OnElementChanged(e);
            if (Control != null && Element != null)
            {
                var pickerView = new UIPickerView();
                pickerView.DataSource = new PickerDataSource(Element.Items);
                pickerView.Delegate = new PickerDelegate(Element);

                // 设置滚轮为输入视图
                Control.InputView = pickerView;

                // 添加完成工具栏
                var toolbar = new UIToolbar(new CGRect(0, 0, UIScreen.MainScreen.Bounds.Width, 44));
                toolbar.BarStyle = UIBarStyle.Default;
                var doneBtn = new UIBarButtonItem(UIBarButtonSystemItem.Done, (s, args) => Control.ResignFirstResponder());
                toolbar.SetItems(new[] { new UIBarButtonItem(UIBarButtonSystemItem.FlexibleSpace), doneBtn }, false);
                Control.InputAccessoryView = toolbar;
            }
        }
    }

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

    public class PickerDelegate : UIPickerViewDelegate
    {
        private readonly Picker _pickerElement;
        public PickerDelegate(Picker picker) => _pickerElement = picker;
        public override string GetTitle(UIPickerView pickerView, nint row, nint component) => _pickerElement.Items[(int)row];
        public override void Selected(UIPickerView pickerView, nint row, nint component) => _pickerElement.SelectedIndex = (int)row;
    }
}

方案二：使用第三方控件库 #

如果不想编写原生代码，可直接使用成熟的第三方滚轮Picker库，以Syncfusion为例：

1. 安装NuGet包：Syncfusion.Xamarin.SfPicker
2. XAML中使用滚轮Picker：

<syncfusion:SfPicker x:Name="AmountPicker"
                     HeaderText="选择数量"
                     PickerMode="Default">
    <syncfusion:SfPicker.ItemsSource>
        <x:Array Type="{x:Type x:String}">
            <x:String>1</x:String>
            <x:String>2</x:String>
            <x:String>3</x:String>
            <x:String>4</x:String>
            <x:String>5</x:String>
            <x:String>6</x:String>
            <x:String>7</x:String>
            <x:String>8</x:String>
        </x:Array>
    </syncfusion:SfPicker.ItemsSource>
</syncfusion:SfPicker>

3. C#代码绑定数据源（可选）：

AmountPicker.ItemsSource = new List<string>() { "1", "2", "3","4","5","6","7","8" };

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