Search code examples
c#xamarinmvvmxamarin.formspicker

How to show values in Picker occupying MVVM with Xamarin


I want to Bindar an ObservableCollection of the Manufacturer Object and show its Name property in a Picker occupying the MVVM pattern in Xamarin, but I'm not getting results (Blank Picker)

screenshot

This Picker is displayed in the View FiltersSisquimView.xaml as follows

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             BindingContext="{Binding Main, Source={StaticResource Locator}}"
             x:Class="AppValora.Views.Sisquim.FiltrosSisquimView"
             Title="SISQUIM®">   

    <StackLayout
        Orientation="Vertical"
        BindingContext="{Binding Filtros}">

        <Picker Title="Seleccione Fabricante"               
                Margin="15,5,15,5"
                HorizontalOptions="FillAndExpand"
                ItemsSource="{Binding Fabricantes, Mode=TwoWay}"
                ItemDisplayBinding="{Binding Name}"
                SelectedItem="{Binding Name}">         
        </Picker>   

    </StackLayout>
</ContentPage>

As noted, the StackLayout containing the Picker is declared as follows in the MainViewModel

public FiltrosViewModel Filtros { get; set; }

Then in my FiltersViewModel.CS I declare the Observable Collection which will have my Picker control (in addition to initializing it in the constructor) and filled with an array which has two Id and Name properties

 public ObservableCollection<Fabricante> Fabricantes { get; set; }

 public FiltrosViewModel()
  {       
      Fabricantes = new ObservableCollection<Fabricante>();

      LoadFabricantes();
   }

  async void LoadFabricantes()
  {
            IsRunning = true;

            //CONSUMING API...

            var list = response.Fabricantes;
            Fabricantes = new ObservableCollection<Fabricante>(list);

            IsRunning = false;

  }

How to show values ​​in Picker occupying MVVM with Xamarin

I want to Bindar an ObservableCollection of the Manufacturer Object and show its Name property in a Picker occupying the MVVM pattern in Xamarin, but I'm not getting results (Blank Picker)

This Picker is displayed in the View FiltersSisquimView.xaml as follows

As noted, the StackLayout containing the Picker is declared as follows in the MainViewModel

Then in my FiltersViewModel.CS I declare the Observable Collection which will have my Picker control (in addition to initializing it in the constructor) and filled with an array which has two Id and Name properties

As you can see, I am correctly filling the Observable Collection "Fabricantes"

object

But how can I show the Name property in the Picker? I am new working with MVVM and I have in mind that I am correctly fitting the ViewModel to the Main (since my other controls work) As once the user selected the name, can I rescue the ID of that Name, any help for me?


Solution

  • The problem is this line:

    Fabricantes = new ObservableCollection<Fabricante>(list);
    

    When you new up an ObservableCollection you lose the actual binding. You either need to set the BindingContext then again, but that is not what you would want. Instead, clear the existing collection and repopulate it. For example, like this:

    var list = response.Fabricantes;
    
    Fabricantes.Clear();
    
    foreach (var item in list)
        Fabricantes.Add(item);