Picker ItemDisplayBinding doesn't support MVVM properly

[stephenquan]

Edit: moved to issue #25634

Split from discussion #25329

The binding reference by Picker.ItemDisplayBinding appears to cache results from the MVVM and doesn't react to subsequent changes. To reproduce this, I created a small test application with a CollectionView and a Picker where the CollectionView does react to the MVVM changes but the Picker does not.

<!-- MainPage.xaml -->
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="MauiPickerMVVM.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:MauiPickerMVVM"
    x:Name="this"
    x:DataType="local:MainPage"
    BindingContext="{Reference this}">
    <ScrollView>
        <VerticalStackLayout Padding="30,0" Spacing="25">
            <Label Text="Picker (bug)" />
            <Picker x:Name="picker" ItemDisplayBinding="{Binding DisplayName}" ItemsSource="{Binding People}" />
            <Label Text="CollectionView (Ok)" />
            <CollectionView ItemsSource="{Binding People}">
                <CollectionView.ItemTemplate>
                    <DataTemplate x:DataType="local:Person">
                        <Label Text="{Binding DisplayName}" />
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

using CommunityToolkit.Mvvm.ComponentModel;
using System.Collections.ObjectModel;
namespace MauiPickerMVVM;
public partial class Person : ObservableObject
{
    [ObservableProperty]
    [NotifyPropertyChangedFor(nameof(DisplayName))]
    string firstName = "FirstName";
    [ObservableProperty]
    [NotifyPropertyChangedFor(nameof(DisplayName))]
    string lastName = "LastName";
    [ObservableProperty]
    [NotifyPropertyChangedFor(nameof(DisplayName))]
    string timeStamp = "HH:mm:ss";
    public string DisplayName => $"[{TimeStamp}] {FirstName} {LastName}";
}
public partial class MainPage : ContentPage
{
    public ObservableCollection<Person> People { get; } = new()
    {
        new Person { FirstName = "John", LastName = "Doe" },
        new Person { FirstName = "Jane", LastName = "Smith" },
        new Person { FirstName = "Sam", LastName = "Johnson" }
    };
    IDispatcherTimer timer;
    public MainPage()
    {
        InitializeComponent();
        timer = Dispatcher.CreateTimer();
        timer.Interval = TimeSpan.FromSeconds(1);
        timer.Tick += (s, e) =>
        {
            foreach (var person in People)
            {
                person.TimeStamp = DateTime.Now.ToString("HH:mm:ss");
                // picker.ItemDisplayBinding = new Binding("DisplayName"); // Uncomment: Workaround
            }
        };
        timer.Start();
    }
}

Github repository: https://github.com/stephenquan/MauiPickerMVVM

The screen recording shows the CollectionView values changing but the Picker values are stuck on their initial value.

As a workaround, when the view model updates, you have to reset picker.ItemDisplayBinding.

picker.ItemDisplayBinding = new Binding("DisplayName"); // Uncomment: Workaround

[stephenquan]

Should I move this discussion to a new issue in https://github.com/dotnet/maui/issues?

[MartyIX]

Sounds like a good idea 👍