How do you bind MAUI PIcker to a ViewModel?

Question

Here is my .xaml

<Picker x:Name="Title" SelectedItem="{Binding Title, Mode=TwoWay}"  ItemsSource="{Binding Titles}" ItemDisplayBinding="{Binding Text}" Title="Title" />
<Entry x:Name="Name" Text="{Binding Name}" Placeholder="Name" />

Bound to a View Model .cs which looks like this

public class Person
{
    public string Name { get; set; }
    public string Title { get; set; }

    List<SelectListItem> Titles = new(){
        new SelectListItem { Text = "Mister", Value="Mr" }
        new SelectListItem { Text = "Doctor", Value="Dr" }
        ...
    }
}

Containing this data

Person person = new() { Name = "Bill Jones", Title = "Mr" };

So the picker displays the list just fine. But I have two issues.

1. How do I get the picker to display the correct entry when it loads, in this case, default to Mr
2. If I change the value in the picker, how do I get the bound ViewModel to take on that entry? (Remember I want to store the selected value, not the displayed value). I know it works with a simple string list, but that's not what I want here.

It almost feels like I need an ItemValueBinding property or something like that. (Obviously, I just made that up)

I've seen quite a lot of complicated code using INotifyPropertyChanged and doing clever bits of code in the SelectedIndexChanged event. But if I have a lot of pickers on my page that seems like a lot of code I have to write.

Is there a simpler way that I might have missed, to achieve both requirements?

Answer 1

If you want to set a default value of your picker, you could try like this:

Title.SelectedIndex = 0; // That means the picker chooses the first item. PickerIndex is 0-based

In your ViewModel , change Title property

public string Title {get; set;}

to this:

public SelectListItem Title {get; set;} // This will get selectedItem instead of just a Text

You could use BindingContext to bind Entry with Picker. Here i give you an example:

<Picker x:Name="Title" SelectedItem="{Binding Title, Mode=TwoWay}" ItemsSource="{Binding Titles}" ItemDisplayBinding="{Binding Text}" Title="Title"/>
<Entry x:Name="Name"  BindingContext="{x:Reference Title}"  Text="{Binding SelectedItem.Text}" Placeholder="Name"/>

In the above code, the x:Reference markup extension is required to reference the source object, which is the Picker named "Title". When the picker value changed, it also changed Entry's Text.

For more information, you could refer to Basic bindings and Picker.