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

时间:2015-03-28 04:13:03

标签: xamarin xamarin.forms

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

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

谢谢!

2 个答案:

答案 0 :(得分:5)

你几乎就在那里......只需创建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;
        };
    }
}

答案 1 :(得分:1)

不确定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;

然后只需要从那里反射你需要的东西就可以添加对你的模型的引用