CODEWITHSUNDEEP
xamlxamarinxamarin.formspicker
Arvind Chourasiya
Arvind Chourasiya

Reputation: 17392

How to change Picker underline color in Xamarin Forms

I am using Picker control, by default it shows White underline color on Black screen.

enter image description here

But I need to have white screen background color, then Picker underline is not displaying at all. See below image:

enter image description here

So how can I change Picker underline color

This is my Picker

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

Upvotes: 5

Views: 5651

Answers (2)

Arun
Arun

Reputation: 11

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

            }
        }

Upvotes: 1

Leo Zhu
Leo Zhu

Reputation: 14956

you could use custom renderer to achieve it：

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

for 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();
    }
   }
}

Upvotes: 3

Related Questions