How can I create a custom Picker with grouped items?

Question

I'm looking to create a custom Picker that can group items between 'Recently Used' and 'All Items,' as shown in the attached image. Are there any ideas or examples on how to implement this custom Picker? Thanks in advance.

Answer 1

Hello,

If you want to custom the picker's popup layout, you can do it by Entry and a popup layout.

No need to use handler and custom picker's popup window for every platforms.

Here are steps.

1. When the Entry get focus, it will popup a window like the Picker.

<Entry Focused="Entry_Focused"/>    

2. I set entry.IsReadOnly = true;, it will not pop up keyboard for android/ios platforms. Then popup a window. And popup will return listview selected item.

Here is Entry's background code.

private async void Entry_Focused(object sender, FocusEventArgs e)
   {
       var popup = new PopUpPicker();
       if (e.IsFocused)
       {
           Entry entry = sender as Entry;
           entry.IsReadOnly = true;
           entry.Unfocus();
           var result = await this.ShowPopupAsync(popup, CancellationToken.None);
           
           if (result is string stringResult)
           {
              
               entry.Text = (string)result;
              
           }
           entry.IsReadOnly = false;
       }     
  }

3. Here is my popup layout, you can custom it by your need.

<?xml version="1.0" encoding="utf-8" ?>
<toolkit:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             x:Class="MauiCustomPickerDemo.PopUpPicker"
            >
    <VerticalStackLayout>
        <Label
            TextColor="Gray"
            Text="Recently used"
            VerticalOptions="Start"
            HorizontalOptions="Start" />
        <Label
             Text="English"
             VerticalOptions="Start"
             HorizontalOptions="Start"
            />


       <ListView Header="All languages" SelectionMode="Single" ItemSelected="ListView_ItemSelected">
            <ListView.ItemsSource>
                <x:Array Type="{x:Type x:String}">
                    <x:String>mono</x:String>
                    <x:String>monodroid</x:String>
                    <x:String>monotouch</x:String>
                    <x:String>monorail</x:String>
                    <x:String>monodevelop</x:String>
                </x:Array>
            </ListView.ItemsSource>
        </ListView>
       
    </VerticalStackLayout>
</toolkit:Popup>

4. After you selected an item in the listview, this popup window will be closed.

public partial class PopUpPicker : Popup
{
    public PopUpPicker()
    {
        InitializeComponent();
    }
    private void ListView_ItemSelected(object sender, SelectedItemChangedEventArgs e)
    {
        CloseAsync(e.SelectedItem);   
    }
}

Best Regards,

Leon Lu

---

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.