Xamarin.Forms Picker long text overflow

Question

In Xamarin.Forms Picker if there's a item with very large text it is overflowing in Android. iOS is able to truncate at the end but Android is not able to.

<Picker x:Name="picker" Title="Select a monkey" TitleColor="Red">
    <Picker.ItemsSource>
        <x:Array Type="{x:Type x:String}">
            <x:String>Baboon</x:String>
            <x:String>Capuchin Capuchin Capuchin Capuchin Capuchin</x:String>
            <x:String>Blue Monkey</x:String>
            <x:String>Squirrel Monkey</x:String>
            <x:String>Golden Lion Tamarin</x:String>
            <x:String>Howler Monkey</x:String>
            <x:String>Japanese Macaque</x:String>
        </x:Array>
    </Picker.ItemsSource>
</Picker>

See Image for reference.

I Guess if there's even a way to left align the items instead of center align, that would still be enough. But if there's a way to add ellipsis , that'll be the best. I've looked through the custom renderer and was not able to find anything useful.

Have you tried setting the `HorizontalTextAlignment` property to `Start`? — Julian, Dec 09 '22 at 12:30

score 1 · Answer 1 · answered Dec 07 '22 at 12:00

1

As an alternative solution as well that you can change the alignment of the Picker Item(Default is Center), which can make it left.

Customizing the Text and Style in, Custom Rendering in Android & IOS look at the example here.

Also, I found a bug related to the mentioned problem, which could not find any answer. I hope the above solution will workaround.

answered Dec 07 '22 at 12:00

pr96

994
5
17

yeah I just need text truncation, its an overkill the solution – Shubham Tyagi Dec 07 '22 at 12:20

score 1 · Accepted Answer · answered Dec 14 '22 at 09:43

Create CustomPickerRenderer and inherits with Xamarin.Forms.Platform.Android.AppCompat.PickerRenderer. I didn't try this but this should create new picker dialogue without upgrading xamarin forms version.

public class CustomPickerRenderer : Xamarin.Forms.Platform.Android.AppCompat.PickerRenderer
{
    public CustomPickerRenderer(Context context) : base(context)
    {

    }

    protected override void OnElementChanged(Xamarin.Forms.Platform.Android.ElementChangedEventArgs<Picker> e)
    {
        base.OnElementChanged(e);
    }

    protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        base.OnElementPropertyChanged(sender, e);
    }
}

Yeah, I thought this UI was created because of the old xamarin version, but it was due to this custom renderer. This inheritance class changed the answer — Shubham Tyagi, Dec 15 '22 at 12:29

score 0 · Answer 3 · answered Dec 08 '22 at 05:26

0

I tested the code and I found that the long text will not overflow on my side. I tested on the different devices by using different Android versions.

Here is the view of the code on my side:

answered Dec 08 '22 at 05:26

Guangyu Bai - MSFT

2,555
1
2
8

Yeah this is the new picker style. I don't know at which point in Xamarin version it transitioned. But I cannot do any upgrades, and I need a solution with that old picker style – Shubham Tyagi Dec 08 '22 at 05:29
Which Xamarin version do you use now? – Guangyu Bai - MSFT Dec 08 '22 at 05:33
Its 4.x, the version in use, You must've seen this old picker style, right? Its not new – Shubham Tyagi Dec 08 '22 at 05:37
The best way to fix the problem is updating the Xamarin version. the second way is using the custom render to change the format of the picker. – Guangyu Bai - MSFT Dec 09 '22 at 01:44
Thats what I need help with , which property to change in custom renderer – Shubham Tyagi Dec 09 '22 at 04:36
You can change the font size to show the data. [Custom Renderer for Picker in Xamarin.Forms](https://stackoverflow.com/questions/52564919/custom-renderer-for-picker-in-xamarin-forms) ,You can refer to this. – Guangyu Bai - MSFT Dec 13 '22 at 09:47

Xamarin.Forms Picker long text overflow

3 Answers3