如何在Xamarin表单中更改Picker下划线颜色

时间:2019-05-06 15:24:50

标签: xaml xamarin xamarin.forms picker

我正在使用Picker控件,默认情况下,它在黑屏上显示白色下划线颜色。

enter image description here

但是我需要具有白色的屏幕背景色,然后Picker下划线根本不会显示。参见下图:

enter image description here

那么如何更改Picker下划线颜色

这是我的Picker

 <Picker TitleColor="Black" Title="--Select--" />

2 个答案:

答案 0 :(得分:2)

您可以使用自定义渲染器来实现它:

对于Android:

[assembly: ExportRenderer(typeof(Picker), typeof(CustomPickerRenderer))]
namespace App18.Droid
{
  public class CustomPickerRenderer : PickerRenderer
   {
      private Context context;
      public CustomPickerRenderer(Context context) : base(context)
       {
        this.context = context;
       }

      protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
       {
        base.OnElementChanged(e);
        if (Control == null || e.NewElement == null) return;
        //for example ,change the line to red:
        if (Build.VERSION.SdkInt >= BuildVersionCodes.Lollipop)
            Control.BackgroundTintList = ColorStateList.ValueOf(Color.Red);
        else
            Control.Background.SetColorFilter(Color.Red, PorterDuff.Mode.SrcAtop);
       }
   }
}

对于iOS:

[assembly: ExportRenderer(typeof(Picker), typeof(CustomPickerRenderer))]
namespace App18.iOS
{
  public class CustomPickerRenderer : PickerRenderer
   {

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

        if (Control == null || e.NewElement == null)
            return; 
        Control.Layer.BorderWidth = 1;
        Control.Layer.BorderColor = Color.Red.ToCGColor();
    }
   }
}

答案 1 :(得分:0)

    <StackLayout Orientation="Vertical" Spacing="0" HorizontalOptions="FillAndExpand">
                                <app1:DatePickerNoLine x:Name="datePickerScheduleDate"    Unfocused="ScheduleCriteriaChanged" VerticalOptions="Center" HorizontalOptions="FillAndExpand" FontSize="Subtitle" BackgroundColor="LightBlue"/>
                                <BoxView x:Name="BoxdatePickerScheduleDate" HeightRequest="1" HorizontalOptions="FillAndExpand" VerticalOptions="EndAndExpand"   Color="Black" WidthRequest="{Binding WidthRequest, Source={x:Reference datePickerScheduleDate}}" />
                            </StackLayout>

Use the custom renderer to remove the underline that comes with picker.

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

            if (e.OldElement == null)
            {
                this.Control.Text = Element.Date.ToString("MM/dd/yyyy", CultureInfo.InvariantCulture);
               
                Control.Layer.BackgroundColor = Color.White.ToCGColor();

                Control.BorderStyle = UITextBorderStyle.None;
                Control.Layer.BorderColor = Color.Transparent.ToCGColor();

                Control.LeftView = new UIKit.UIView(new CGRect(0, 0, 10, 0));
                Control.LeftViewMode = UIKit.UITextFieldViewMode.Always;


                UITextField entry = Control;
                UIDatePicker picker = (UIDatePicker)entry.InputView;
                picker.PreferredDatePickerStyle = UIDatePickerStyle.Wheels;

            }
        }