Picker's SelectedItem in CollectionView DataTemplate not working

[gwalus]

Discussed in #24326

I created issue because my discussion is not answered and I need solution for this.

^{Originally posted by gwalus August 20, 2024}
Can someone explain me why the single picker binds data correctly and when i put in to CollectionView its doesn't works.

I would to populate data to pickers immidientialy.

When i click button to force refresh, values show in UI - but it's bad.

I don't know it's a bug or i make it bad.

Here is my code:

MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp1.MainPage"
             xmlns:viewModels="clr-namespace:MauiApp1.ViewModels"
             x:DataType="viewModels:MainPageViewModel">

    <VerticalStackLayout Spacing="25" Margin="10">
        <Label Text="Single Picker" TextColor="Red"/>
        <Picker 
            ItemsSource="{Binding Numbers}"
            SelectedItem="{Binding SelectedNumber}"/>

        <Label Text="Picker in CollectionView" TextColor="Red"/>
        <CollectionView ItemsSource="{Binding Products}">
            <CollectionView.ItemTemplate>
                <DataTemplate x:DataType="viewModels:Product">
                    <VerticalStackLayout>
                        <Label Text="{Binding Name}"/>

                        <Picker ItemsSource="{Binding Source={x:RelativeSource AncestorType={x:Type viewModels:MainPageViewModel}}, Path=Numbers}"
                                SelectedItem="{Binding Quantity}"/>
                    </VerticalStackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

        <Label Text="Force refresh picker value" TextColor="Red"/>
        <Button Text="Refresh" Command="{Binding ButtonCommand}"/>
    </VerticalStackLayout>
</ContentPage>

MainPage.xaml.cs

using MauiApp1.ViewModels;

namespace MauiApp1
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();

            BindingContext = new MainPageViewModel();
        }
    }
}

MainPageViewModel.cs

using System.ComponentModel;
using System.Windows.Input;

namespace MauiApp1.ViewModels
{
    public class MainPageViewModel : INotifyPropertyChanged
    {
        public MainPageViewModel()
        {
            ButtonCommand = new Command(OnButtonClicked);
        }

        public event PropertyChangedEventHandler? PropertyChanged;

        private int _selectedNumber = 5;
        public int SelectedNumber
        {
            get => _selectedNumber;
            set
            {
                _selectedNumber = value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("SelectedNumber"));
            }
        }

        public List<int> Numbers { get; set; } = Enumerable.Range(1, 8).ToList();

        private List<Product> _products =
        [
            new Product { Name = "Product 1", Quantity = 2 },
            new Product { Name = "Product 2", Quantity = 5 }
        ];

        public List<Product> Products
        {
            get => _products;
            set
            {
                _products = value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Products"));
            }
        }

        public ICommand ButtonCommand { get; }

        private void OnButtonClicked()
        {
            foreach (var product in Products)
            {
                product.Quantity = Random.Shared.Next(1, 8);
            }
        }
    }

    public class Product : INotifyPropertyChanged
    {
        private string _name;
        public string Name
        {
            get => _name;
            set 
            {
                _name = value; 
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Name))); 
            }
        }

        private int _quantity = 1;
        public int Quantity
        {
            get => _quantity;
            set
            {
                _quantity = value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Quantity)));
            }
        }

        public event PropertyChangedEventHandler? PropertyChanged;
    }
}

On start

After click refresh

Can someone helps?

[github-actions]

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one and thumbs upping the other issue to help us prioritize it. Thank you!

Open similar issues:

• Picker in ListView works on Windows but not on Android (#13558), similarity score: 0.72
• Windows Picker control won't display the selected item (#22028), similarity score: 0.72

Closed similar issues:

• .NET MAUI MVVM OneWay bindings issues (#6571), similarity score: 0.74
• .net MAUI Picker SelectedIndex does not cause item to display (#13013), similarity score: 0.74
• Picker does not update when data source gets modified (#4031), similarity score: 0.73

Note: You can give me feedback by thumbs upping or thumbs downing this comment.

[danilt2000]

Hello,

I tested your code. I noticed your comment: "When I click the button to force a refresh, the values show in the UI, but it's not ideal." If your goal is to reset the product quantities, you might consider setting product.Quantity = 0; This way, when you press the refresh button, the values will disappear from the UI.

However, I may have misunderstood your issue. If this suggestion doesn't address your concern, could you please clarify the problem a bit more? I'm here to help.

Before pressing the refresh button:

After hitting the refresh button

[gwalus]

@danilt2000

The main problem is that the data that is assigned to quantity does not appear in the view immediately.

Why does the quantity set to 2 or 5 not appear immediately in the view, but only when an action occurs, in this case connecting a button to the OnButtonClicked action?

The refresh button is only there to check whether the data in the picker will be updated after some action.

[ninachen03]

This issue has been verified using latest Visual Studio 17.12.0 Preview 1.0 (8.0.82 &8.0.3), Can repro it on Android /Windows platforms.
MauiApp52.zip