Question

我有一个选择器，我想对所有项目应用不同的样式，也希望同时适用于IOS和Android。

在custom.xaml中：

<ContentPage.Content>
        <StackLayout>
            <Picker
                x:Name="ArticuloPicker"
                Title="ADD"
                Margin="5"
                FontSize="16"
                HorizontalOptions="FillAndExpand"
                IsVisible="False"
                SelectedIndexChanged="OnPickerSelectedChanged" />

custom.xaml.cs：

protected override void OnAppearing()
        {
        base.OnAppearing();
        ArticuloPicker.ItemsSource = null; 

        //calculate description
        //example descripcion = "text"
        .
        .


            ArticuloPicker.Items.Add(descripcion);

        }
    }

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

如果有人知道我该怎么做或向我展示任何示例，我将找不到合适的方法。

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

Answer 1

以下是有关Android中自定义渲染器的示例。

创建自定义选择器：

public class MyPicker : Picker
{

}

Xaml：

<local:MyPicker x:Name="picker" Title="Select An option" />

ContentPage：

picker.ItemsSource = new PickerModel().Monkeys;

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;
        }
    }
}

从渲染器需要 custom_picker_dialog.axml ， celllayout.axml 和 shape_radius.axml

custom_picker_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>

最终效果是：

在Xamarin表单中的选取器项目上应用样式

1 个答案: