Xamarin – Picker View com list

Question:

I'm creating an application with Xamarin Forms and I ran into 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 look 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 na pasta Model:

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

}

E a 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've already checked and the "ListaCidades" is correctly filled 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. Thanks in advance to anyone who can help.

Kind regards.

Answer:

For everyone's sake and the general happiness of nations, since the 2.3.4-pre version of Xamarin.Forms the Picker control has had its main bindable properties . This operation was much more boring before.

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

Using this other feature, you can add a property to your View Model to keep the item selected (and I don't think it's a good idea to leave the property that keeps the list with the set public either, it can be a 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 it like this:

<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>

Hope this helps.

Scroll to Top