Placeholder For Picker - Xamarin.Forms

Introduction

In this tutorial, we will learn how to handle the Placeholder issue in Xamarin.Forms for Picker Control. Xamarin.Forms Picker Control is a combination of EditText plus AlertDialog for Android and UITextField plus UIPicker for iOS. The Title property of Xamarin.Forms Picker Control is a property to set title for AlertDialog plus Hint for EditText for Android and Placeholder for UITextField.

For example, we are setting the title property of the picker control is "Title" and it has items source and selected index of the control as "-1" then the control will shows "Title" in Placeholder and title of the alert or popup. Sometimes, it is meaning less to use this control due to this.

To avoid this issue, I have created a customer render for Android and iOS to override this default behavior of picker. Without much delay, we will skip into the coding part of the article.

Steps

I have split the coding part into 5 steps as in the following.

Step 1 - Creating new Xamarin.Forms Projects.
Step 2 - Creating Custom Picker inherited from picker.
Step 3 - Custom Renderer for Custom Picker in Android.
Step 4 - Custom Renderer for Custom Picker in iOS.
Step 5 - Implementation of the Custom Picker Control.

Step 1 - Creating new Xamarin.Forms Projects

Create new project by selecting Xamarin Cross Platform App and click OK.
Then select Android, iOS and UWP Platforms as shown below with Project template as "Blank" and click OK.

Step 2 - Creating Custom Picker inherited from picker

Create a Custom Picker Control class named as “PLPicker” and it is inherited from Xamarin.Forms Picker.
Create a property for Placeholder and is named as Placeholder like below.
1. public class PLPicker : Picker
2. {
3. public static readonly BindableProperty PlaceholderProperty = BindableProperty.Create(
4. propertyName: nameof(Placeholder),
5. returnType: typeof(string),
6. declaringType: typeof(string),
7. defaultValue: string.Empty);
9. public string Placeholder
10. {
11. get { return (string)GetValue(PlaceholderProperty); }
12. set { SetValue(PlaceholderProperty, value); }
13. }
14. }

Step 3 - Custom Renderer for Custom Picker in Android

In this step, we will create a custom renderer in Android for PLPicker created in “step 2”.

Create a class named as “PLPickerRenderer.cs” and it is inherited from “Xamarin.Forms.Platform.Android.AppCompat.PickerRenderer”.
Then create a method “UpdatePickerPlaceholder” and copy the below code in the custom renderer class.
1. void UpdatePickerPlaceholder()
2. {
3. if (picker == null)
4. picker = Element as PLPicker;
5. if (picker.Placeholder != null)
6. Control.Hint = picker.Placeholder;
7. }

Call this method, in the OnElementChanged method and OnElementPropertyChanged method when the placeholder property changes.
You can find the full coding part for “PLPickerRenderer.cs” below for Android.
1. [assembly: ExportRenderer(typeof(PLPicker), typeof(PLPickerRenderer))]
2. namespace PickerPlaceholder.Droid
3. {
4. public class PLPickerRenderer : Xamarin.Forms.Platform.Android.AppCompat.PickerRenderer
5. {
6. PLPicker picker = null;
7. public PLPickerRenderer(Context context) : base(context)
8. {
10. }
11. protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
12. {
13. base.OnElementChanged(e);
14. if (e.NewElement != null)
15. {
16. picker = Element as PLPicker;
17. UpdatePickerPlaceholder();
18. if (picker.SelectedIndex <= -1)
19. {
20. UpdatePickerPlaceholder();
21. }
22. }
23. }
24. protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
25. {
26. base.OnElementPropertyChanged(sender, e);
27. if (picker != null)
28. {
29. if (e.PropertyName.Equals(PLPicker.PlaceholderProperty.PropertyName))
30. {
31. UpdatePickerPlaceholder();
32. }
33. }
34. }
36. protected override void UpdatePlaceHolderText()
37. {
38. UpdatePickerPlaceholder();
39. }
41. void UpdatePickerPlaceholder()
42. {
43. if (picker == null)
44. picker = Element as PLPicker;
45. if (picker.Placeholder != null)
46. Control.Hint = picker.Placeholder;
47. }
48. }
49. }

Step 4 - Custom Renderer for Custom Picker in iOS

In this step, we will create a custom renderer in iOS for PLPicker created in “step 2”.

Create a class named as “PLPickerRenderer.cs” and it is inherited from “Xamarin.Forms.Platform.iOS.PickerRenderer”.
Then create a method “UpdatePickerPlaceholder” and copy the below code in the custom renderer class.
1. void UpdatePickerPlaceholder()
2. {
3. if (picker == null)
4. picker = Element as PLPicker;
5. if (picker.Placeholder != null)
6. Control.Placeholder = picker.Placeholder;
7. }

Call this method, in the OnElementChanged method and OnElementPropertyChanged method when the placeholder property changes.
You can find the full coding part for “PLPickerRenderer.cs” below for iOS.
1. [assembly: ExportRenderer(typeof(PLPicker), typeof(PLPickerRenderer))]
2. namespace PickerPlaceholder.iOS
3. {
4. public class PLPickerRenderer: PickerRenderer
5. {
6. PLPicker picker = null;
7. protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
8. {
9. base.OnElementChanged(e);
10. if (e.NewElement != null)
11. {
12. picker = Element as PLPicker;
13. UpdatePickerPlaceholder();
14. if (picker.SelectedIndex <= -1)
15. {
16. UpdatePickerPlaceholder();
17. }
18. }
19. }
20. protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
21. {
22. base.OnElementPropertyChanged(sender, e);
23. if (picker != null)
24. {
25. if (e.PropertyName.Equals(PLPicker.PlaceholderProperty.PropertyName))
26. {
27. UpdatePickerPlaceholder();
28. }
29. }
30. }
32. void UpdatePickerPlaceholder()
33. {
34. if (picker == null)
35. picker = Element as PLPicker;
36. if (picker.Placeholder != null)
37. Control.Placeholder = picker.Placeholder;
38. }
39. }
40. }

Step 5 - Implementation of Custom Picker Control

Open created Xamarin.Forms Page, in my case “MainPage” and add the custom control picker with Placeholder property.
Open your MainPage.xaml file and add the custom control as shown in below.
1. <local:PLPicker Placeholder="Placeholder"
2. Title="Title"
3. TitleColor="Blue"
4. x:Name="plpicker"
5. Grid.Row="2"
6. Grid.Column="0"
7. Grid.ColumnSpan="2"/>

Then add buttons with clicked events to change selected index as 1 and -1 for the custom picker.
1. <Button Text="PLPicker:Set Index 1"
2. HorizontalOptions="Center"
3. VerticalOptions="Center"
4. Clicked="PLPIndex1Clicked"
5. Grid.Row="3"
6. Grid.Column="0"/>
8. <Button Text="PLPicker:Set Index -1"
9. HorizontalOptions="Center"
10. VerticalOptions="Center"
11. Clicked="PLPIndex2Clicked"
12. Grid.Row="3"
13. Grid.Column="1" />

Create an event for setting the selected index for picker as like below.
1. private void PLPIndex1Clicked(object sender, EventArgs e)
2. {
3. plpicker.SelectedIndex = 1;
4. }
6. private void PLPIndex2Clicked(object sender, EventArgs e)
7. {
8. plpicker.SelectedIndex = -1;
9. }

Output

Download Code

You can download the code from GitHub. If you have doubts, feel free to post a comment. If you like this article and is useful to you, do like, share the article & star the repository on GitHub.