C# 在Xamarin表单中的选择器项上应用样式

我有一个选择器，我想将不同的样式应用于所有项目，也更喜欢同时适用于IOS和Android

在custom.xaml中：

我想为每个picker.item指定一个边框，并可能更改字体颜色或其他样式

如果有人知道我该怎么做，或者给我举个例子，我找不到任何正确的方法

编辑：我想要的是为选择器的每个项目创建边框和背景

---

下面是一个关于Android和IOS中自定义渲染器的示例

创建自定义选择器：

public class MyPicker : Picker
{

}

Xaml：

PcikerModel：

public List<string> Monkeys { get; private set; }

public PickerModel(){
    Monkeys = new List<string>();

    Monkeys.Add("Hello welcome to Custom PIicker Model");
    Monkeys.Add("Hello welcome to Custom PIicker Model");
    Monkeys.Add("Hello welcome to Custom PIicker Model");
    Monkeys.Add("Hello welcome to Custom PIicker Model");
    Monkeys.Add("Hello welcome to Custom PIicker Model");
    Monkeys.Add("Hello welcome to Custom PIicker Model");
    Monkeys.Add("Hello welcome to Custom PIicker Model");
    Monkeys.Add("Hello welcome to Custom PIicker Model");
    Monkeys.Add("Hello welcome to Custom PIicker Model");
    Monkeys.Add("Hello welcome to Custom PIicker Model");
    Monkeys.Add("Hello welcome to Custom PIicker Model");
}

安卓：

在Android中创建自定义渲染器：

public class CustomPicker : PickerRenderer
{
    private Dialog dialog;

    protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
    {
        base.OnElementChanged(e);
        Control.Click += Control_Click1;
    }


    protected override void Dispose(bool disposing)
    {
        Control.Click -= Control_Click1;
        base.Dispose(disposing);
    }

    private void Control_Click1(object sender, EventArgs e)
    {
        //throw new NotImplementedException();
        Picker model = Element;
        dialog = new Dialog(Forms.Context);
        dialog.SetContentView(Resource.Layout.custom_picker_dialog);
        Android.Widget.ListView listView = (Android.Widget.ListView)dialog.FindViewById(Resource.Id.listview);
        //listView.Adapter = new CustomPickerAdapter(((List<PickerModel>)model.ItemsSource), model.SelectedIndex);
        listView.Adapter = new MyAdaptr((List<string>)model.ItemsSource);
        listView.ItemClick += (object sender1, ItemClickEventArgs e1) =>
        {
            Element.SelectedIndex = e1.Position;
            dialog.Hide();
        };
        if (model.ItemsSource.Count > 3)
        {
            var height = Xamarin.Forms.Application.Current.MainPage.Height;
            var width = Xamarin.Forms.Application.Current.MainPage.Width;
            dialog.Window.SetLayout(700, 800);
            //dialog.Window.SetLayout(Convert.ToInt32(width * 2.70), Convert.ToInt32(height * 2));
        }
        dialog.Show();
    }

    class MyAdaptr : BaseAdapter
    {
        private IList<string> mList;
        public MyAdaptr(IList<string> itemsSource)
        {
            mList = itemsSource;
        }



        public override int Count => mList.Count;



        public override Java.Lang.Object GetItem(int position)
        {
            return mList[position];
        }



        public override long GetItemId(int position)
        {
            return position;
        }



        public override Android.Views.View GetView(int position, Android.Views.View convertView, ViewGroup parent)
        {
            Android.Views.View view = convertView;
            convertView = LayoutInflater.From(parent.Context).Inflate(Resource.Layout.celllayout, null);
            TextView text = convertView.FindViewById<TextView>(Resource.Id.textview1);
            text.Text = mList[position];

            return convertView;
        }
    }
}

从渲染器需要自定义选择器对话框.axml、celllayout.axml和shape\u radius.axml

自定义\u选择器\u dialog.axml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    >

     <TextView
        android:text="Select One Option"
        android:layout_width="200dp"
        android:layout_height="25dp"
        android:paddingLeft="25dp"
        android:paddingRight="25dp"/>

      <ListView
      android:id="@+id/listview"
        android:layout_gravity="center"
      android:background="@drawable/abc_list_pressed_holo_light"
      android:layout_width="match_parent"
      android:dividerHeight="3dp"
      android:layout_height="0dp"
      android:layout_weight="1">

  </ListView>
</LinearLayout>

celllayout.axml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">


   <TextView
    android:id="@+id/textview1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:textColor="@android:color/holo_red_dark"
    android:background="@drawable/shape_redius"/>

</LinearLayout>

shape_radius.axml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
  <corners android:radius="10dip"/>
  <solid android:color="#faaaaa"/>
  <stroke android:width="2dp" android:color="#000000"/>

</shape>

最后的效果是：

============================================================================

IOS：

在ios中创建自定义渲染器：

public class CustomPicker : PickerRenderer
{
    List<string> itemList;
    protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
    {
        base.OnElementChanged(e);


        Picker myPicker = Element;
        itemList = myPicker.Items.ToList();

        UITextField textField = Control;
        UIPickerView pickerView = textField.InputView as UIPickerView;
        pickerView.Delegate = new MyPickerViewDelegate(itemList,Control);
        textField.InputView = pickerView;

        var toolbar = new UIToolbar(new CoreGraphics.CGRect(0, 0, UIScreen.MainScreen.Bounds.Size.Width , 1)) { BarStyle = UIBarStyle.Default, Translucent = true };
        textField.InputAccessoryView = toolbar;
    }
}

internal class MyPickerViewDelegate : UIPickerViewDelegate
{
    private List<string> itemList;
    private UITextField textField;
    public MyPickerViewDelegate(List<string> itemList, UITextField control)
    {
        this.itemList = itemList;
        this.textField = control;
    }

    //Define the Font size or style
    public override NSAttributedString GetAttributedTitle(UIPickerView pickerView, nint row, nint component)
    {
        var text = new NSAttributedString(
            itemList[(int)row],
            font: UIFont.SystemFontOfSize(24),
            foregroundColor: UIColor.Red,
            strokeWidth: 4
        );

        return text;
    }
    //Define the row height
    public override nfloat GetRowHeight(UIPickerView pickerView, nint component)
    {
        return 45;
    }

    public override UIView GetView(UIPickerView pickerView, nint row, nint component, UIView view)
    {
        UIView contentView = new UIView(new CoreGraphics.CGRect(0, 0, UIScreen.MainScreen.Bounds.Size.Width, 45));

        UILabel label = new UILabel();
        label.Frame = contentView.Bounds;
        contentView.AddSubview(label);

        label.Text = itemList[(int)row];
        //Change the label style
        label.BackgroundColor = UIColor.Cyan;
        label.Layer.BorderWidth = 2;
        label.Layer.BorderColor = UIColor.Brown.CGColor;
        label.Layer.CornerRadius = 5;

        return contentView;
    }

    public override void Selected(UIPickerView pickerView, nint row, nint component)
    {
        //base.Selected(pickerView, row, component);
        textField.Text = itemList[(int)row];
        textField.ResignFirstResponder();
    }

}

最终的效果是：

---

更好地共享图像以显示所需的效果。如果窗体无法实现，您也可以使用自定义渲染器来执行此操作。@JuniorJiang MSFT更新了picker如何显示以及我需要的效果的照片。另外，您的链接来自SQL问题无关？感谢更新，我会检查它，并为错误的链接感到抱歉。这是正确的链接。你可以实现弹出页面，用你自己的列表、视图和样式创建类似picker的弹出视图。然后隐藏原始选择器，并在选择器的位置显示一些控件。当用户单击替换视图时，打开自定义listview弹出窗口@ntzz我已经更新了答案。看起来很棒，谢谢更新。我首先考虑在xaml中实现这一点，但据我所知，这是不可能的，所以我需要使用Android和IOS渲染来实现这些更改。感谢您澄清渲染的工作原理。@ntzz感谢您的回复和标记。我还更新了IOS方法。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    >

     <TextView
        android:text="Select One Option"
        android:layout_width="200dp"
        android:layout_height="25dp"
        android:paddingLeft="25dp"
        android:paddingRight="25dp"/>

      <ListView
      android:id="@+id/listview"
        android:layout_gravity="center"
      android:background="@drawable/abc_list_pressed_holo_light"
      android:layout_width="match_parent"
      android:dividerHeight="3dp"
      android:layout_height="0dp"
      android:layout_weight="1">

  </ListView>
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">


   <TextView
    android:id="@+id/textview1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:textColor="@android:color/holo_red_dark"
    android:background="@drawable/shape_redius"/>

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
  <corners android:radius="10dip"/>
  <solid android:color="#faaaaa"/>
  <stroke android:width="2dp" android:color="#000000"/>

</shape>

public class CustomPicker : PickerRenderer
{
    List<string> itemList;
    protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
    {
        base.OnElementChanged(e);


        Picker myPicker = Element;
        itemList = myPicker.Items.ToList();

        UITextField textField = Control;
        UIPickerView pickerView = textField.InputView as UIPickerView;
        pickerView.Delegate = new MyPickerViewDelegate(itemList,Control);
        textField.InputView = pickerView;

        var toolbar = new UIToolbar(new CoreGraphics.CGRect(0, 0, UIScreen.MainScreen.Bounds.Size.Width , 1)) { BarStyle = UIBarStyle.Default, Translucent = true };
        textField.InputAccessoryView = toolbar;
    }
}

internal class MyPickerViewDelegate : UIPickerViewDelegate
{
    private List<string> itemList;
    private UITextField textField;
    public MyPickerViewDelegate(List<string> itemList, UITextField control)
    {
        this.itemList = itemList;
        this.textField = control;
    }

    //Define the Font size or style
    public override NSAttributedString GetAttributedTitle(UIPickerView pickerView, nint row, nint component)
    {
        var text = new NSAttributedString(
            itemList[(int)row],
            font: UIFont.SystemFontOfSize(24),
            foregroundColor: UIColor.Red,
            strokeWidth: 4
        );

        return text;
    }
    //Define the row height
    public override nfloat GetRowHeight(UIPickerView pickerView, nint component)
    {
        return 45;
    }

    public override UIView GetView(UIPickerView pickerView, nint row, nint component, UIView view)
    {
        UIView contentView = new UIView(new CoreGraphics.CGRect(0, 0, UIScreen.MainScreen.Bounds.Size.Width, 45));

        UILabel label = new UILabel();
        label.Frame = contentView.Bounds;
        contentView.AddSubview(label);

        label.Text = itemList[(int)row];
        //Change the label style
        label.BackgroundColor = UIColor.Cyan;
        label.Layer.BorderWidth = 2;
        label.Layer.BorderColor = UIColor.Brown.CGColor;
        label.Layer.CornerRadius = 5;

        return contentView;
    }

    public override void Selected(UIPickerView pickerView, nint row, nint component)
    {
        //base.Selected(pickerView, row, component);
        textField.Text = itemList[(int)row];
        textField.ResignFirstResponder();
    }

}