Picker text goes out of picker box - xamarin

Question

I am working in Xamarin.Forms where I have a picker like this:
<Picker Grid.Row="1" Grid.Column="1" x:Name="pickerForSearchMode"
Title="Search Mode" BackgroundColor="White" >
<Picker.Items>
<x:String>Mode 1</x:String>
<x:String>Mode 2</x:String>
<x:String>Mode 3</x:String>
<x:String>Mode 4</x:String>
</Picker.Items>
It displays perfect on iOS and Android, but in a UWP app it has an issue. The text is displaying outside of the picker like this:

Answer 1

You will need to use a Custom Renderer, see the official Xamarin documentation.
Once the element is rendered, you will need to use the value of the Title property and set it as the PlaceholderText of the underlying UWP ComboBox.
Check the official renderer here which is in Xamarin Forms, you can see that the UpdateTitle method sets the Header property of the ComboBox. All you will need to do is to replace it with the PlaceholderText property in your own renderer.
Required steps
First you create a custom Picker in your PCL project:
public class PlaceholderPicker : Picker
{
}
Replace your Picker reference in XAML with the PlaceholderPicker:
<local:PlaceholderPicker VerticalOptions="Center" x:Name="PickerForSearchMode"
Title="Search Mode" BackgroundColor="White" >
<Picker.Items>
<x:String>Mode 1</x:String>
<x:String>Mode 2</x:String>
<x:String>Mode 3</x:String>
<x:String>Mode 4</x:String>
</Picker.Items>
</local:PlaceholderPicker>
You will have to add a namespace import to the page element - xmlns:local="clr-namespace:NamespaceWithTheCustomControl".
Now in the UWP project you now create a custom renderer for the control and add a ExportRenderer attribute for the assembly to indicate Xamarin Forms to use this renderer in UWP.
[assembly: ExportRenderer(
typeof( PlaceholderPicker ),
typeof( PlaceholderPickerRenderer ) )]
namespace FormsApp.UWP
{
public class PlaceholderPickerRenderer : PickerRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
{
base.OnElementChanged(e);
if (Control != null)
{
Control.PlaceholderText = Element.Title;
Control.Header = null;
}
}
}
}
Note that we first set the PlaceholderText and then clear the Header, which was already set by the default renderer.
I have created a sample solution with this here on my GitHub, you can clone it and try it out yourself :-) .