如何在Xamarin Picker中设置项目列表的样式(在Android中) [英] How do I style the items list in a Xamarin Picker (in Android)

问题描述

我有一个Xamarin Android应用程序，该应用程序使用Picker从值列表中进行选择.我一直在更改应用程序的样式，但在Picker中遇到问题.尽管可以设置TextColor，但不能设置占位符文本的颜色.

I have a Xamarin Android application that uses a Picker to select from a list of values. I have been changing the style of the application, but run into problems with the Picker. Although I can set the TextColor, I could not set the colour of the placeholder text.

在搜索SO寻求帮助之后，我实现了一个自定义渲染器，现在，我在正确的文本中显示了文本和占位符.但是，以前，当我触摸占位符文本时，会出现子对话框并显示所有项目，从而允许用户选择一个项目.现在，我实现了自定义渲染器，子对话框仅显示前两个项目，用户必须先滚动它们，然后再单击确定".

After searching SO for help, I've implemented a custom renderer, and I now have the text and placeholder showing in the correct text. However, previously when I touched the placeholder text, the child dialog appeared and displayed all the items, allowing the user to select one. Now I have the custom renderer implemented, the child dialog only shows the top two items, and the user has to scroll through them before hitting OK.

我有两个问题:

1. 至少我如何才能使子对话框再次显示完整列表?
2. 是否可以为项目列表对话框设置背景和文本颜色?

XAML看起来像这样:

The XAML looks like this:

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

CustomPicker类如下:

The CustomPicker class is as follows:

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

客户渲染器是这样的:

[assembly: ExportRendererAttribute(typeof(CustomPicker), typeof(CustomPickerRenderer))]
namespace <myapp>.Droid.Controls.Renderers
{
    public class CustomPickerRenderer : PickerRenderer
    {
        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;

                Android.Graphics.Color phCol = customPicker.PlaceholderColour.ToAndroid();
                Android.Graphics.Color textCol = customPicker.TextColour.ToAndroid();
                Android.Graphics.Color bgCol = customPicker.BackgroundColour.ToAndroid();

                Control.SetBackgroundColor(bgCol);
                Control.SetHintTextColor(phCol);
                Control.SetTextColor(textCol);
            }
        }
    }
}

非常感谢！

自定义渲染器之前的选择器弹出窗口:

Picker popup before custom renderer:

自定义渲染器后的选择器弹出窗口:

Picker popup after custom renderer:

推荐答案

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

You can add Click event on Control, and then you can custom a dialog, in this dialog, you can custom anything what you want, background, item text color, etc.

在您的 CustomPickerRenderer 中，执行以下操作:

In your CustomPickerRenderer, do like this:

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 ，这样您将获得显示完整列表的子对话框:

You can show a Dialog, and custom it's layout, for example, add a ListView in its layout, so you will get the child dialog displaying the full list:

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 布局，您可以为项目列表对话框设置背景和文本颜色:

Below is dialog layout, you can set the background and text color for the items list 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>

这篇关于如何在Xamarin Picker中设置项目列表的样式(在Android中)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！