Show multiple items in listview xamarin forms

Issue

I am new to C # and XAML and I am working on a travel app that allows you to list All trips being created.

I'm having trouble displaying All Trips using a ListView.

My problem:It only shows me a single trip instead of all those that are registered I am new to C # and XAML and I am working on a travel app that allows you to list All trips being created.

I'm having trouble displaying All Trips using a ListView.

My problem: It only shows me a single trip instead of all those that are registered

ViewModel

public VerViajeViewModel()
    {

        string response = "";

        try
        {

            Task.Run(async () => {
            response= await apiRest.ConsultaViaje();

            }).Wait();

            List<Viaje> consulta = JsonConvert.DeserializeObject<List<Viaje>>(response);
            SfCardView cardView;

            foreach (Viaje consultas in consulta)
            {
                Items = new Viaje[]
                {
                 new Viaje(){Destino = consultas.Destino, Url= consultas.Url, FechaSalida= consultas.FechaSalida, FechaVuelta= consultas.FechaVuelta, Disponibilidad= consultas.Disponibilidad},

                };
               

            }

        }
        catch(Exception ex)
        {
            Console.WriteLine(ex);
        }
    }

}

Xaml

<ContentPage.BindingContext>
    <ViewModels:VerViajeViewModel></ViewModels:VerViajeViewModel>
</ContentPage.BindingContext>

<StackLayout VerticalOptions="FillAndExpand" >
    <Label Text="Mis Viajes" FontSize="Title" HorizontalOptions="CenterAndExpand"></Label>
    <ListView x:Name="EventListView"
              Margin="0,8,0,0"
              HasUnevenRows="True"
              SeparatorVisibility="None"
              ItemsSource="{Binding Items}">
        <ListView.ItemTemplate>
            <DataTemplate  >
                <ViewCell>
                    <cards:SfCardView  BackgroundColor="#17669f"  VerticalOptions="FillAndExpand" >
                        <cards:SfCardView.GestureRecognizers>
                            <TapGestureRecognizer
                                Tapped="VerViaje"/>
                        </cards:SfCardView.GestureRecognizers>
                        <Grid  VerticalOptions="FillAndExpand" >
                            <StackLayout Orientation="Horizontal" >
                                <Label 
                                       FontAttributes="Italic"
                                       FontSize="27"
                                       MaxLines="1"
                                       HorizontalOptions="CenterAndExpand"
                                       Text="Viajes Divertidos"
                                       TextColor="#e0eeeb"
                                        />
                                <Image
                                   Source="{Binding Url}"
                                    HeightRequest="90" WidthRequest="90"
                                   
                                     />
                            </StackLayout>
                            <StackLayout HorizontalOptions="Start" Padding="25,40,100,20">
                                <Label 
                                       FontAttributes="Italic"
                                       FontSize="24"
                                       HorizontalOptions="CenterAndExpand"
                                       Text="Viaja a:"
                                       TextColor="#e0eeeb"
                                        />
                            </StackLayout>
                            <StackLayout HorizontalOptions="CenterAndExpand" Padding="25,60,100,20">
                                <Label 
                                       FontAttributes="Italic"
                                       FontSize="30"
                                       HorizontalOptions="Center"
                                       Text="{Binding Destino}"
                                       TextColor="#50d6a3"
                                        />
                            </StackLayout>
                            <StackLayout HorizontalOptions="StartAndExpand" Padding="25,110,100,20">
                                <Label 
                                       FontAttributes="Italic"
                                       FontSize="15"
                                       HorizontalOptions="Start"
                                       Text="Fecha Salida:"
                                       TextColor="#e0eeeb"
                                        />
                            </StackLayout>
                            <StackLayout HorizontalOptions="CenterAndExpand" Padding="85,110,100,20">
                                <Label 
                                       FontAttributes="Italic"
                                       FontSize="15"
                                       HorizontalOptions="Center"
                                       Text="{Binding FechaSalida}"
                                       TextColor="#e0eeeb"
                                        />
                            </StackLayout>
                            <StackLayout HorizontalOptions="StartAndExpand" Padding="25,130,100,20">
                                <Label 
                                       FontAttributes="Italic"
                                       FontSize="15"
                                       HorizontalOptions="Start"
                                       Text="Fecha Regreso:"
                                       TextColor="#e0eeeb"
                                        />
                            </StackLayout>
                            <StackLayout HorizontalOptions="CenterAndExpand" Padding="110,130,100,20">
                                <Label 
                                       FontAttributes="Italic"
                                       FontSize="15"
                                       HorizontalOptions="Center"
                                       Text="{Binding FechaVuelta}"
                                       TextColor="#e0eeeb"
                                        />
                            </StackLayout>
                            <StackLayout HorizontalOptions="StartAndExpand" Padding="25,150,100,20">
                                <Label 
                                       FontAttributes="Italic"
                                       FontSize="15"
                                       HorizontalOptions="Start"
                                       Text="Disponibilidad:"
                                       TextColor="#57e7a6"
                                        />
                            </StackLayout>

                            <StackLayout HorizontalOptions="CenterAndExpand" Padding="40,150,100,20">
                                <Label 
                                       FontAttributes="Italic"
                                       FontSize="15"
                                       HorizontalOptions="Start"
                                       Text="{Binding Disponibilidad}"
                                       TextColor="#57e7a6"
                                        />
                            </StackLayout>
                        </Grid>

                    </cards:SfCardView>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackLayout>

Result

Solution

It appears you are using an array of Viajes.

Instead you should use an ObservableCollection. An ObservableCollection will allow the ListView component to automatically update the UI as more items are added to it.

Additionally, it appears that you overwrite your binding array, Items, on each pass of your loop here:

foreach (Viaje consultas in consulta)
{
    Items = new Viaje[]
    {
        new Viaje(){Destino = consultas.Destino, Url= consultas.Url, FechaSalida= consultas.FechaSalida, FechaVuelta= consultas.FechaVuelta, Disponibilidad= consultas.Disponibilidad},

    };
}

Consider moving your Items declaration outside of your for loop:

Items = new ObservableCollection<Viaje>();
foreach (Viaje consultas in consulta)
{
    Items.Add(consultas);
}

Answered By - Timothy James