How do I use custom picker in Xamarin?

Picker Control is a feature that can be used not only to set the AlertDialog title but also for the EditText guide for  the Android operating system  and Placeholder for the UITextField. In this tutorial, we will learn how to set the Placeholder. Manage Xamarin.Forms in Picker Control.

What is Picker Control?

It should be noted that Picker Control includes EditText with AlertDialog for the Android operating system and  UITextField with UIPicker for the iOS operating system.

- To do this, you must first create a new project in Xamarin.Forms. Create.

- In the next step, we must create a Custom Picker.

- In the next step, we must consider  the Custom Picker for the Android operating system and create it.

- In the next step, we must consider the Custom Picker for the iOS operating system and create it.

- In the last step, we implement Custom Picker Control.

1- First, to create a new project, select Xamarin Cross-Platform App to develop and design an application ( in German:  zum Entwickeln und Entwerfen von Anwendungen  )so that we can create a new project.

2- Then select Android, iOS, and UWP Platforms.

3- Of course, the created project must be empty, and that is why I choose Blank.

4- In the next step, I will create a Custom Picker Control and name it PLPicker. Of course, it is worth mentioning that this class was inherited from Xamarin. Forms Picker.

5- We need to create a property for the placeholder and name that property placeholder.

6- Then, I will  create a custom render for PLPicker in Android operating system.

7- Then, we must create a class. We name that class PLPickerRenderer.cs. It should be noted, however, that this class must inherit from Xamarin.Forms.Platform.Android.AppCompat.PickerRenderer.

8- Then, we need to create a method called UpdatePickerPlaceholder and enter the code listed below in the corresponding class and its provider class.

9- Call the UpdatePickerPlaceholder method in the OnElementChanged method and the OnElementPropertyChanged method when changing the placeholder attribute.

10- Related codes inserted in PLPickerRenderer.cs for the Android operating system are listed below.

11- Then, we need to  create a custom renderer in the iOS operating system for PLPicker.

12- Then, we must create a class and choose the name PLPickerRenderer for it. Note that this class must inherit from Xamarin.Forms.Platform.iOS.PickerRenderer.

13- Create a new method called UpdatePickerPlaceholder and copy it to the custom renderer class.

14- Then, we need to multiply the UpdatePickerPlaceholder method in the OnElementChanged method and the OnElementPropertyChanged method when changing the Placeholder.

15- The complete code related to PLPickerRenderer.cs programming in the iOS operating system is as follows.

16- Then, we must open the page created by Xamarin.Forms. And then add a custom control picker with the Placeholder feature.

17- Make the necessary changes in the MainPage.xaml file and insert the code below.

18- Then, we add buttons with the event clicked to it. Like the following:

19- Then, we must set an event to set the selected index for the selector.

How can we extend TimePicker?

We create a control that can inherit from Xamarin.Forms TimePicker. Then we add the Placeholder property. Of course, to be able to do this, we must first create a new folder and name it Controls. Inside the created folder, we also create a class called CRTimePicker and add it.

In this case, renderers can be used on any platform. In this part of the tutorial, we want to use Visual Material. Therefore, it must inherit from MaterialTimePickerRenderer.

Android

In this case, I will run the rendering for the Android operating system.

iOS

In this case, we need to implement rendering for  the iOS operating system  and platform. To do this, you must inherit from the IMaterialEntryRenderer interface.

After entering the above code and going through the steps, we will see that TimePicker with Placeholder in version 13.5 of the iOS operating system and platform and version 10.0 of the Android operating system and platform.

In this article, in addition to telling you about the custom picker in Xamarin, we also explained another rendering and picker that is for the time being. Use this rendering and custom picker to show the time in the higher versions of the Android and iOS operating systems and platforms.