Xamarin - Picker View with list

Question

I’m creating an app with Xamarin Forms and I came across a problem. In one of my Views I need to have an element filled with a list coming from a web service. In this case, in my Viewmodel I managed to connect to the web service and fill a list with the objects I got from there, but I don’t know how to play this in Picker. My classes are like this:

View:

<ContentPage.BindingContext>
    <vm:BuscaCidadeDestinoViewModel></vm:BuscaCidadeDestinoViewModel>
</ContentPage.BindingContext>
 <StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
        <!--Combobox-->
        <Label FontAttributes="Bold" FontSize="Medium">Selecione a Origem:</Label>
        <Picker  ItemsSource="{Binding ?????}"/>
    </StackLayout>

Class in Model folder:

public class CidadeDestino
{
    public string DsCidadeDestino { get; set; }

}

And the Viewmodel:

public ObservableCollection<CidadeDestino> ListaCidades { get; set; }
public BuscaCidadeDestinoViewModel()
    {

        this.ListaCidades = new ObservableCollection<CidadeDestino>();          
    }

public async Task GetCidades()
    {
        Aguarde = true;
        //abre uma conexão do tipo Http
        HttpClient cliente = new HttpClient();
        //retorna uma string "GetStringAsync" e é armazenada na variavel resultado
        var resultado = await cliente.GetStringAsync(urlListaCidades);
        //"Divide" a string recebida em diversos objetos e armazena na variavel cidadeJson
        var cidadeJson = JsonConvert.DeserializeObject<CidadeJson[]>(resultado);

        foreach (var cidades in cidadeJson)
        {
            this.ListaCidades.Add(new CidadeDestino
            {
                DsCidadeDestino = cidades.CidadeDestino

            });
        }
    }

I already checked and the "Listings" is filled correctly with the values contained in the web service, so much so that if I change in my View the "Picker" for a "Listview" the values appear without problems. Thank you in advance to those who can help.

Sincerely yours.

Answer 1

For the good of all and the general happiness of nations, since version 2.3.4-pre of Xamarin.Forms the control Picker has its main properties bindables. This operation was much more boring before.

Thanks to this improvement, we can make Binding with the list of options and with the selected item.

Using this other feature, you can add to your View Model a property to keep the item selected (and also don’t think it’s a good idea to leave the property that keeps the list with the set public, this can give headache).

So for practical purposes, your View Model would look like this:

public CidadeDestino CidadeSelecionada { get; set; }

public ObservableCollection<CidadeDestino> ListaCidades { get; }
public BuscaCidadeDestinoViewModel()
{
    ListaCidades = new ObservableCollection<CidadeDestino>();          
}

... // O resto do seu código

And on your screen you can do so:

<ContentPage.BindingContext>
    <vm:BuscaCidadeDestinoViewModel/>
</ContentPage.BindingContext>
<StackLayout VerticalOptions="CenterAndExpand" 
             HorizontalOptions="CenterAndExpand">
    <!--Combobox-->
    <Label FontAttributes="Bold" 
           FontSize="Medium"
           Text="Selecione a Origem"/>
    <Picker ItemsSource="{Binding ListaCidades}"
            SelectedItem="{Binding CidadeSelecionada}"/>
</StackLayout>

I hope I’ve helped.