尝试在Xamarin Forms中创建自定义选择器

Question

我正在尝试使用3个组件创建自定义选取器.我在这里关注了Xamarin网站上的教程.我让控件工作,除非我点击选择器上的完成按钮(这是默认的完成按钮).我得到以下异常:

System.InvalidCastException:无法将类型为'myproj.iOS.MyPickerModel'的对象强制转换为'Xamarin.Forms.Platform.iOS.PickerRenderer + PickerSource'.

这是我的代码:

在共享项目中:

public class MyPicker: Picker {}

在iOS项目中:

[assembly: ExportRenderer(typeof(MyPicker), typeof(MyPickerRenderer))]

public class MyPickerRenderer: PickerRenderer
{
    // Override the OnElementChanged method so we can tweak this renderer post-initial setup
    protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
    {
        base.OnElementChanged(e);

        if (Control != null)
        {   
            var picker = (UIPickerView)this.Control.InputView;
            picker.BackgroundColor = UIColor.White;
            picker.Model = new MyPickerModel();
        }

而型号:

public class MyPickerModel : UIPickerViewModel
{
    private string[] array1  = new string [] {
        "1","2","3","4"
    };
    private string[] array2  = new string [] {
        "1a","2a","3a","4a"
    };

    private string[] array3  = new string [] {
        "a","b","c","d"
    };

    public override nint GetComponentCount (UIPickerView pickerView)
    {
        return 3;
    }

    public override nint GetRowsInComponent (UIPickerView pickerView, nint component)
    {
        // Returns
        switch (component) {
            case 0: return array1.Length;
            case 1: return array2.Length;
            case 2: return array3.Length;
            default:break;
        }
        return 0;
    }

    public override string GetTitle (UIPickerView pickerView, nint row, nint component)
    {
        // Returns
        switch (component)
        {
            case 0: return array1[row];
            case 1: return array2[row];
            case 2: return array3[row];
            default: break;
        }
        return null;
    }

    public override nfloat GetComponentWidth (UIPickerView pickerView, nint component)
    {
        switch (component)
        {
            case 0: return 100.0f;
            case 1: return 100.0f;
            case 2: return 100.0f;
            default: break;
        }

        return 0;
    }

    public override nfloat GetRowHeight (UIPickerView pickerView, nint component)
    {
        return 40f;
    }
}

最后我的页面:

public class MyPage : ContentPage
{
    public MyPage()
    {
        MyPicker picker = new MyPicker
        {
            Title = "Color",
            VerticalOptions = LayoutOptions.CenterAndExpand
        };

        picker.SelectedIndexChanged += (sender, args) =>
        {

        };

        var mainLayout = new StackLayout
        {
            Orientation = StackOrientation.Vertical,
            Children =
            {
                picker

            }
        };


        // Accomodate iPhone status bar.
        this.Padding = new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0);
        this.BackgroundImage = "background.png";

        // Build the page.
        this.Content = mainLayout;
    }
}

我不明白为什么它试图将MyPickerModel强制转换为PickerRenderer + PickerSource

谢谢!

Answer 1

你几乎就在那里......只需创建一个新的实例UIPickerView,将自定义模型(MyPickerModel)分配给它,然后分配UIPickerView给Control.InputView.OnElementChanged在你的渲染器中看起来像这样:

protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
{
    base.OnElementChanged(e);

    if (Control != null)
    {
        var myPickerModel = new MyPickerModel();
        var myPickerView = new UIPickerView
        {
            Model = myPickerModel
        };
        //Assign your picker view
        Control.InputView = myPickerView;

        //You can also create an event in your model to react on user actions like e.g. "SelectedValueChanged"...
        myPickerModel.SelectedValueChanged += (sender, eventArgs) =>
        {
            //...to set the selected value as title of the picker element
            e.NewElement.Title = myPickerModel.SelectedValue;
        };
    }
}

Answer 2

不确定 IOS 是如何工作的，但看起来我的 Android 版本已经显示了你需要的内容：

我的 basePicker 看起来像这样：

    public class BaseBindablePicker : Picker
{
    public static readonly BindableProperty BackgroundColor=
    BindableProperty.Create<BaseBindablePicker, Color>(p => p.BackgroundColor, Color.Default);

    public Color ColorBackground
    {
        get { return (Color)base.GetValue(BackgroundColor); }
        set { base.SetValue(BackgroundColor, value); }
    }
}

我的平台特定视图如下所示：

[assembly: ExportRenderer(typeof(BaseBindablePicker), typeof(SimpleEID.Android.Shared.CustomRender.AndroidPicker))]

public class AndroidPicker : PickerRenderer
{    
    protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Picker> e)
    {
        base.OnElementChanged(e);

        var pick = (BaseBindablePicker)this.Element;
        this.Control.SetBackgroundColor(pick.BackColor.ToAndroid());
    }
}

基本上看起来你需要改变你的

var picker = (UIPickerView)this.Control.InputView;

成为

var picker = (MyPicker)this.Element;

然后只需从那里引用您需要的内容，也许可以添加对您的模型的引用