Placeholder For Picker - Xamarin.Forms

 

Introduction

Steps

• 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.
  
  
  

• 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);  
  8.   
  9.     public string Placeholder  
  10.     {  
  11.         get { return (string)GetValue(PlaceholderProperty); }  
  12.         set { SetValue(PlaceholderProperty, value); }  
  13.     }  
  14. }  

• 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.         {  
  9.   
  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.         }  
  35.   
  36.         protected override void UpdatePlaceHolderText()  
  37.         {  
  38.             UpdatePickerPlaceholder();  
  39.         }  
  40.   
  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. }  

• 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.         }  
  31.   
  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. }  

• 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"/>  
  7.   
  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. }  
  5.   
  6. private void PLPIndex2Clicked(object sender, EventArgs e)  
  7. {  
  8.     plpicker.SelectedIndex = -1;  
  9. }