如何在Xamarin Picker中设置项目列表的样式(在Android中)

时间:2018-02-05 12:23:44

标签: android xamarin xamarin.android themes picker

我有一个Xamarin Android应用程序,它使用Picker从值列表中进行选择。我一直在改变应用程序的样式,但遇到了Picker的问题。 虽然我可以设置TextColor,但我无法设置占位符文本的颜色。

在搜索SO寻求帮助之后,我实现了一个自定义渲染器,现在我将文本和占位符显示在正确的文本中。但是,之前当我触摸占位符文本时,子对话框出现并显示所有项目,允许用户选择一个。现在我实现了自定义渲染器,子对话框只显示前两个项目,用户必须在点击OK之前滚动它们。

我有两个问题:

  1. 至少,如何让子对话框再次显示完整列表?
  2. 是否可以为项目列表对话框设置背景和文本颜色?
  3. XAML看起来像这样:

    <ul>
      <li>aaaa</li>
      <li>bbb</li>
      <li>cccc</li>
      <li>ddd</li>
    </ul>

    CustomPicker类如下:

    <c:CustomPicker x:Name="DivisionList" Title="{x:Static prop:Resources.PickerDivision}" 
                            SelectedIndexChanged="DivisionList_SelectedIndexChanged">
        <Picker.Behaviors>
            <b:RequiredPickerValidator x:Name="DivValidator" IsValid="{Binding Path=BindingContext.IsDivisionValid, Mode=OneWayToSource, Source={x:Reference contentPage}}" />
        </Picker.Behaviors>
    </c:CustomPicker>
    

    客户渲染器是这样的:

    namespace <myapp>.Portable.Controls
    {
        public class CustomPicker : Picker
        {
            public Color PlaceholderColour
            {
                get { return (Color)App.Current.Resources["PlaceholderTextColour"]; }
            }
    
            public Color TextColour
            {
                get { return (Color)App.Current.Resources["LabelTextColour"]; }
            }
    
            public Color BackgroundColour
            {
                get { return (Color)App.Current.Resources["PaneBackgroundColour"]; }
            }
        }
    }
    

    非常感谢提前!

    自定义渲染器之前的Picker弹出窗口: Picker popup before custom renderer

    自定义渲染器后的Picker弹出窗口: Picker popup after custom renderer

2 个答案:

答案 0 :(得分:4)

似乎有2个选择器渲染器。

Xamarin.Forms.Platform.Android.PickerRenderer Xamarin.Forms.Platform.Android.AppCompat.PickerRenderer

请确保您使用的是最后一个,并且您的布局将与以前相同!

我得到答案的来源: https://forums.xamarin.com/discussion/97150/how-to-write-a-custom-renderer-for-bindable-picker-to-change-its-font-attributes-family-size

渲染器(没有实际迹象,有2个): https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/renderers

答案 1 :(得分:1)

您可以在Control上添加Click事件,然后您可以自定义对话框,在此对话框中,您可以自定义任何内容,背景,项目文本颜色等。

CustomPickerRenderer中,请执行以下操作:

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

    Control?.SetPadding(20, 20, 20, 20);
    if (e.OldElement != null || e.NewElement != null)
    {
        var customPicker = e.NewElement as CustomPicker;
        ...
        // add click event
        Control.Click += Control_Click;
    }
}

您可以展示Dialog,并自定义其布局,例如,在其布局中添加ListView,这样您就会看到显示完整列表的子对话框:

private void Control_Click(object sender, EventArgs e)
{
    Toast.MakeText(Xamarin.Forms.Forms.Context,"111111",ToastLength.Short).Show();
    dialog = new Dialog(Forms.Context);
    dialog.SetContentView(Resource.Layout.dialog);
    Android.Widget.Button b1 = (Android.Widget.Button)dialog.FindViewById(Resource.Id.button1);
    Android.Widget.Button b2 = (Android.Widget.Button)dialog.FindViewById(Resource.Id.button2);
    Android.Widget.ListView listView = (Android.Widget.ListView)dialog.FindViewById(Resource.Id.lv);
    listView.Adapter=new ArrayAdapter<String>(Forms.Context, Android.Resource.Layout.SimpleExpandableListItem1,
        new List<String>() { "111","222","333", "444", "555", "666", "777", "888", "999", });
    b1.Click += B1_Click;
    b2.Click += B2_Click;
    dialog.Show();
}

下面是dialog布局,您可以设置项目列表对话框的背景和文本颜色:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
              android:orientation="vertical">
  <TextView 
    android:text="123456"
    android:layout_width="match_parent"
      android:layout_height="wrap_content"/>
  <ListView
      android:id="@+id/lv"
      android:layout_width="wrap_content"
      android:layout_height="0dp"
      android:layout_weight="1"/>
  <LinearLayout
    android:layout_width="fill_parent"
      android:layout_height="wrap_content"
    android:orientation="horizontal">
  <Button
      android:id="@+id/button2"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Cancel" />

  <Button
      android:id="@+id/button1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Ok" />
  </LinearLayout>
</LinearLayout>