Search code examples
listlistviewxamarin.forms

Xamarin Forms List in Listview


I need to display a request of an api inside a listview. Everything worked, but i have an attribute (notes) which returns a list and gives the following error message:

System.Collections.Generic.List`1[System.String]

Does anyone know a solution?

TicketPage.xaml.cs

public async void LoadTickets()
        {
            var content = "";
            HttpClient client = new HttpClient();
            var RestURL = "https://...";
            client.BaseAddress = new Uri(RestURL);
            client.DefaultRequestHeaders.Accept.Add(new System.Net.Http.Headers.MediaTypeWithQualityHeaderValue("application/json"));
            HttpResponseMessage response = await client.GetAsync(RestURL);
            if (response.IsSuccessStatusCode)
            {
                content = await response.Content.ReadAsStringAsync();
                Ticket item = JsonConvert.DeserializeObject<Ticket>(content);
                List<Ticket> items = new List<Ticket> { item };
                ListViewTicket.ItemsSource = items;
            }
            else
            {
                await DisplayAlert("Error", "Testtext","Ok");
            }
        }

TicketPage.xaml

<ContentPage.Content>
        <StackLayout Padding="10">
            <ListView x:Name="ListViewTicket" ItemsSource="{Binding Items}" HasUnevenRows="True" SelectionMode="None" SeparatorVisibility="None">
                <ListView.Header>
                    <StackLayout Orientation="Horizontal">
                        <Label Text="Im nachfolgenden sehen Sie Ihre offenen Tickets" FontSize="Medium"/>
                    </StackLayout>
                </ListView.Header>
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <StackLayout Orientation="Vertical">
                                <BoxView HorizontalOptions="FillAndExpand" HeightRequest="5" Color="Blue" />
                                <Grid>
                                    <Label Grid.Column="0" Text="Ticket ID:"/>
                                    <Label Grid.Column="1" Text="{Binding id}" Padding="-60,0,0,0"/>
                                </Grid>
                                <Grid>
                                    <Label Grid.Column="0" Text="Ticket Status:"/>
                                    <Label Grid.Column="1" Text="{Binding status}" Padding="-60,0,0,0"/>
                                </Grid>
                                <Grid>
                                    <Label Grid.Column="0" Text="Ticket Betreff:"/>
                                    <Label Grid.Column="1" Text="{Binding subject}" Padding="-60,0,0,0"/>
                                </Grid>
                                <Grid>
                                    <Label Grid.Column="0" Text="Ticket Nachricht:"/>
                                    <Label Grid.Column="1" Text="{Binding message}" Padding="-60,0,0,0"/>
                                </Grid>
                                <Grid>
                                    <Label Grid.Column="0" Text="Ticket Notiz:"/>
                                    <Label Grid.Column="1" Text="{Binding notes}" Padding="-60,0,0,0"/>
                                </Grid>
                                <BoxView HorizontalOptions="FillAndExpand" HeightRequest="5" Color="Blue" />
                            </StackLayout>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    </ContentPage.Content>

Solution

  • You can use BindableLayout to display a collection of items without wrapping it in another ListView. It can be done like this:

    <ContentPage.Content>
        <StackLayout Padding="10">
            <ListView ItemsSource="{Binding Items}">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <StackLayout Orientation="Vertical">
    
                                <Grid>
                                    <Label Grid.Column="0" Text="Ticket ID:"/>
                                    <Label Grid.Column="1" Text="{Binding id}"/>
                                </Grid>
    
                                <!-- I've removed some code for brevity -->
    
                                <Grid>
                                    <Label Grid.Column="0" Text="Ticket Notiz:"/>
                                    <!-- HERE! display collection of notes, each note in it's own Label -->
                                    <StackLayout Grid.Column="1" BindableLayout.ItemsSource="{Binding notes}">
                                        <BindableLayout.ItemTemplate>
                                            <DataTemplate>
                                                <Label Text="{Binding .}"/>
                                            </DataTemplate>
                                        </BindableLayout.ItemTemplate>
                                    </StackLayout>
                                </Grid>
    
                            </StackLayout>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    </ContentPage.Content>