How to get the spinner picker view in MAUI

Question

I am trying to get the picker with the spinner view on Android in MAUI. Before, in Xamarin.Forms, I used to be able to have a custom renderer with the redererer derived from Xamarin.Forms.Platform.Android (not the default one which is from ...Android.AppCompat). This is the picker I'm talking about:

Now in MAUI I cannot seem to be able to use that style of picker anymore. Any ideas? Thanks!

Answer 1

Hello,

I used to be able to have a custom renderer with the redererer derived from Xamarin.Forms.Platform.Android

In MAUI, you need to use Handler instead of Renderer to achieve this feature.

Please refer to the following documentations:

• Migrate a Xamarin.Forms custom renderer to a .NET MAUI handler.
• View handlers. You could find the Handler for the control in this document.

Update:

This is because in Android, scrolling and selective pickers are different controls.

After investigating, you could use the following steps to implement a simple scrolling picker.

Step 1. Instantiate the MainActivity. This is because context objects are required to create native controls in Android.

public class MainActivity : MauiAppCompatActivity
{
    public static MainActivity Instance { get; private set; }

    protected override void OnCreate(Bundle? savedInstanceState)
    {
        base.OnCreate(savedInstanceState);
        Instance = this;
    }
}

Step 2. Create a custom Picker.

public class MyPicker : Picker
{
}

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourControlNamespace"

    <local:MyPicker x:Name="picker"
Title="Select a monkey">
        <local:MyPicker.ItemsSource>
            <x:Array Type="{x:Type x:String}">
                <x:String>Baboon</x:String>
                <x:String>Capuchin Monkey</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>
        </local:MyPicker.ItemsSource>
    </local:MyPicker>

Step 3. Create a custom Handler that pops up NumberPicker when you click on the EditText.

public partial class MyViewHandler
{
    public static PropertyMapper<MyPicker, MyViewHandler> PropertyMapper = new PropertyMapper<MyPicker, MyViewHandler>(ViewHandler.ViewMapper)
    {

    };

    public MyViewHandler() : base(PropertyMapper)
    {
    }
}
public partial class MyViewHandler : ViewHandler<MyPicker, View>

{
    public MyViewHandler(IPropertyMapper mapper, CommandMapper? commandMapper = null) : base(mapper, commandMapper)
    {
    }

    protected override View CreatePlatformView()
    {
        var edit = new EditText(MainActivity.Instance);
        edit.Focusable = false;
        edit.FocusableInTouchMode = false;
        edit.Click += (s, e) =>
        {
            var p = this.VirtualView as Picker;
            var items = p.ItemsSource as IList<string>;

            var n = new NumberPicker(MainActivity.Instance);

            n.MaxValue = items.Count - 1;
            n.MinValue = 0;
            n.SetDisplayedValues(items.ToArray<string>());
            AlertDialog.Builder alertDialog = new AlertDialog.Builder(MainActivity.Instance);
            var dlg = alertDialog.SetTitle(p.Title)
            .SetView(n)
            .SetPositiveButton("OK", (s, e) =>
            {

                edit.Text = p.ItemsSource[n.Value].ToString(); // Assign the selected value to EditText
            })
            .Create();
            dlg.Show();
        };
        return edit;
    }
}

Step 4. Register this handler.

            builder
                .UseMauiApp<App>()
                .UseMauiCommunityToolkit()
                .ConfigureMauiHandlers(handlers =>
                {
#if ANDROID
                    handlers.AddHandler(typeof(MyPicker),typeof(MyViewHandler));
#endif
                })

After that, you'll be able to see a simple spinner wheel Picker.

Best Regards,

Alec Liu.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.