Maui picker for Android selection issue

Question

Hello All. Currently in my app I have a picker from witch the user select an option from a list of options each option is a string NAME that describe the task the app need to do. Now I found that this name is not enough for the user and I want if possible by double tap this NAME or by other way to display a description text under this NAME that helps the user to decide if this the item he wants to perform and then he tap that NAME option to do the task. I'm using last version of Maui and android. Thank you very much.

Answer 1

Hello,

MAUI's Picker is currently unable to fully customize the controls within it. For this requirement, you can realize it by connecting an Entry and Popup through a ViewModel.

Please refer to the following key code:

ViewModel:

   public class Item

    {

        public string Name { get; set; }

        public string Tips { get; set; }

    }

    class TestViewModel : INotifyPropertyChanged

    {

        private PickerPopup popup;

        private static TestViewModel instance;

        public static TestViewModel GetInstance()  // The same ViewModel object is called in two pages through the singleton mode to avoid data errors.

        {

            if (instance == null)

            {

                instance = new TestViewModel();

            }

            return instance;

 

        }

        public event PropertyChangedEventHandler PropertyChanged;

 

        private ObservableCollection<Item> items;

 

 

        public ObservableCollection<Item> Items

        {

            get => items;

            set

            {

                if (items != value)

                {

                    items = value;

                    OnPropertyChanged(); // reports this property

                }

            }

        }

        private string selectedItem;

        public string SelectedItem

        {

            get => selectedItem;

            set

            {

                if (selectedItem != value)

                {

                    selectedItem = value;

                    OnPropertyChanged(); // reports this property

                }

            }

        }

        

        public Item Selcted { get; set; }

        // After selecting an Item in the CollectionView in the Popup, close the Popup and assign a value to the Entry

        public ICommand SelectedCommand { get; private set; }

        // When you click entry, a Popup page will pop up via this command.

        public ICommand PickerUpCommand { get; private set; }

        private void OnSelected()

        {         

            if(Selcted != null)

            {

                SelectedItem = Selcted.Name;

                popup.Close();

            }

        }

        private void OnPickerUp()

        {

            popup = new PickerPopup();

            App.Current.MainPage.ShowPopup(popup);

        }

 

        public TestViewModel()

        {

            Items = new ObservableCollection<Item>();

            Items.Add(new Item { Name= "test1",Tips="This is test1"});

            Items.Add(new Item { Name = "test2", Tips = "This is test2" });

            Items.Add(new Item { Name = "test3", Tips = "This is test3" });

            SelectedCommand = new Command(OnSelected);

            PickerUpCommand = new Command(OnPickerUp);

        }

 

 

        public void OnPropertyChanged([CallerMemberName] string name = "") =>

            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));

    }

After that, data binding is performed in this way in the page where the Entry is located and in the Popup.

BindingContext = TestViewModel.GetInstance();

In xaml:

<Entry Text="{Binding SelectedItem}">

<Entry.Behaviors>

<toolkit:EventToCommandBehavior

                EventName="Focused"

                Command="{Binding PickerUpCommand}" />

</Entry.Behaviors>

</Entry>

// Popup Page

<?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="MauiApp8.PickerPopup">

<CollectionView ItemsSource="{Binding Items}" SelectionMode="Single" SelectedItem="{Binding Selcted}"  SelectionChangedCommand="{Binding SelectedCommand}">

<CollectionView.ItemTemplate>

<DataTemplate>

<Label Text="{Binding Name}" ToolTipProperties.Text="{Binding Tips}"></Label>

</DataTemplate>

</CollectionView.ItemTemplate>

</CollectionView>

</toolkit:Popup>

In this example, I use ToolTips to provide options. This is the officially recommended method for providing control information, you can refer to Display tooltips for more information.

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.