Xamarin Forms iOS Picker style

Question

How can I get the controls in an Xamarin Forms iOS app to match the latest controls that are available in SwiftUI? Specifically the standard Picker and Date Picker? The Xamarin Forms controls appear to be the old versions of the controls (Dials). The new controls looks much better.

Answer 1

Hello,

Welcome to our Microsoft Q&A platform!

I'm afraid you mean the new preference of UIDatePicker after iOS13.4. You could try to use Custom Renderers.

XAML

 <DatePicker MinimumDate="01/01/2018" MaximumDate="01/01/2022"></DatePicker>  

Custom Renderer in iOS

[assembly: ExportRenderer(typeof(DatePicker), typeof(DatePickerViewRenderer))]  
namespace PickerDemo.iOS  
{  
    public class DatePickerViewRenderer : DatePickerRenderer  
    {  
        protected override void OnElementChanged(ElementChangedEventArgs<DatePicker> e)  
        {  
            base.OnElementChanged(e);  
              
                if (Control != null){  
                UIDatePicker picker = (UIDatePicker)Control.InputView;  
                picker.PreferredDatePickerStyle = UIDatePickerStyle.Automatic;// the old style is Wheels  
            }  
        }  
    }  
}  

We can see there is a tool bar and an entry in the source code , and the picker is always displayed at the bottom. So, I customize a view of picker, you could refer to the following code :

MyPicker.cs (I just add three BindableProperty, you could increase BindableProperty according to your needs)

namespace PickerDemo  
{  
    public enum DatePickerStyle : long  
    {  
        Automatic = 0,  
        Wheels = 1,  
        Compact = 2,  
        Inline = 3  
    }  
    public enum DatePickerMode : long  
    {  
        Time = 0,  
        Date = 1,  
        DateAndTime = 2,  
        CountDownTimer = 3  
    }  
    public class MyPicker : Xamarin.Forms.View  
    {  
        public static readonly BindableProperty DatePickerStyleProperty = BindableProperty.Create(  
            propertyName: "DatePickerStyle",  
            returnType: typeof(DatePickerStyle),  
            declaringType: typeof(MyPicker),  
            defaultValue: DatePickerStyle.Automatic);  
        public static readonly BindableProperty DatePickerModeProperty = BindableProperty.Create(  
           propertyName: "DatePickerMode",  
           returnType: typeof(DatePickerMode),  
           declaringType: typeof(MyPicker),  
           defaultValue: DatePickerMode.Date);  
        public static readonly BindableProperty DateResultProperty = BindableProperty.Create(  
          propertyName: "DateResult",  
          returnType: typeof(DateTime),  
          declaringType: typeof(MyPicker),  
          defaultValue: DateTime.Now);  
        public DatePickerStyle DatePickerStyle  
        {  
            get { return (DatePickerStyle)GetValue(DatePickerStyleProperty); }  
            set { SetValue(DatePickerStyleProperty, value); }  
        }  
        public DatePickerMode DatePickerMode  
        {  
            get { return (DatePickerMode)GetValue(DatePickerModeProperty); }  
            set { SetValue(DatePickerModeProperty, value); }  
        }  
        public DateTime DateResult  
        {  
            get { return (DateTime)GetValue(DateResultProperty); }  
            set { SetValue(DateResultProperty, value); }  
        }  
    }  
}  

Xaml

<Label BindingContext="{x:Reference datePicker}"  
               Text="{Binding DateResult, StringFormat='The date is {0} '}"  
               FontAttributes="Bold"  
               FontSize="Large"  
              ></Label>  
  <local:MyPicker x:Name="datePicker" ></local:MyPicker>  

Renderer

[assembly: ExportRenderer(typeof(MyPicker), typeof(DatePickerRenderer_iOS))]  
namespace PickerDemo.iOS  
{  
    public class DatePickerRenderer_iOS : ViewRenderer<MyPicker, UIDatePicker>  
    {  
        UIDatePicker pickerView;  
        IElementController ElementController => Element as IElementController;  
        protected override void OnElementChanged(ElementChangedEventArgs<MyPicker> e)  
        {  
            base.OnElementChanged(e);  
            if (e.NewElement != null)  
            {  
                if (Control == null)  
                {  
                    pickerView = new UIDatePicker();  
                    pickerView.PreferredDatePickerStyle = (UIDatePickerStyle)e.NewElement.DatePickerStyle;  
                    pickerView.Mode = (UIDatePickerMode)e.NewElement.DatePickerMode;  
                    pickerView.TimeZone = new NSTimeZone("UTC");  
                    pickerView.ValueChanged += (sender, arg)=>{  
                        Console.WriteLine("{0}", pickerView.Date);  
                        ElementController.SetValueFromRenderer(MyPicker.DateResultProperty, pickerView.Date.ToDateTime().Date);  
                    };  
                     
                    SetNativeControl(pickerView);  
                }  
  
            }  
        }  
    }  
}  

Best Regards,
Wenyan Zhang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.