Forum› Xamarin.Forms
Two listviews on one page
ganesh96
Member ✭✭✭
Member ✭✭✭
Hi All,
I've seen several topics on this, but none of them worked for me (or I cannot make it work for me): how to add two listviews with separate data on one page?
In my case, I want two listviews under each other. I have one listview already inside a grid. The code for this listview is:
How can I add a second listview under this current listview?
Tagged:
0
Best Answers
-
aliahmad71452
Member ✭✭
You can do this like this.
<StackLayout BindableLayout.ItemsSource="{Binding FirstList}"> // First List <BindableLayout.ItemTemplate> <DataTemplate> <StackLayout> <Label Text="{Binding Title}" /> <Label Text="{Binding Description}" /> </StackLayout> </DataTemplate> </BindableLayout.ItemTemplate> </StackLayout> <StackLayout BindableLayout.ItemsSource="{Binding SecondList}"> // SecondList <BindableLayout.ItemTemplate> <DataTemplate> <StackLayout> <Label Text="{Binding Title}" /> <Label Text="{Binding Description}" /> </StackLayout> </DataTemplate> </BindableLayout.ItemTemplate> </StackLayout>5 -
LeonLu
Member, Xamarin Team Xamurai
@ganesh96 Do you want to achieve the result like following GIF?
If so, just put two listview in
StackLayoutlike following code. For testing, I give set the same datasource for two listview<StackLayout> <ListView HeightRequest="500" ItemsSource="{Binding listtimes}" BackgroundColor="{Binding BackgroundColor}" > <ListView.ItemTemplate> <DataTemplate> <ViewCell> <Label Text="{Binding time, StringFormat='{}{0:H\\:mm}'}" FontSize="15" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/> </ViewCell> </DataTemplate> </ListView.ItemTemplate> </ListView> <ListView HeightRequest="500" ItemsSource="{Binding listtimes}" BackgroundColor="{Binding BackgroundColor}" > <ListView.ItemTemplate> <DataTemplate> <ViewCell> <Label Text="{Binding time, StringFormat='{}{0:H\\:mm}'}" FontSize="15" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/> </ViewCell> </DataTemplate> </ListView.ItemTemplate> </ListView> </StackLayout>5
Answers
You want ListView inside a ListView.?
No, ListView1 should be positioned at the top of the screen, ListView2 should be below ListView1.
You want to display ListView1 on half page and ListView2 on the other half?
The length of ListView1 (a.k.a. the number of items) can differ, meaning that the location of ListView2 is determined by the length of ListView1. Hence why ListView2 needs to stay under ListView1.
You can use BindableLayout for that. if you want scrolling you can wrap it by ScrollView.
Do you have a small example?
You can do this like this.
<StackLayout BindableLayout.ItemsSource="{Binding FirstList}"> // First List <BindableLayout.ItemTemplate> <DataTemplate> <StackLayout> <Label Text="{Binding Title}" /> <Label Text="{Binding Description}" /> </StackLayout> </DataTemplate> </BindableLayout.ItemTemplate> </StackLayout> <StackLayout BindableLayout.ItemsSource="{Binding SecondList}"> // SecondList <BindableLayout.ItemTemplate> <DataTemplate> <StackLayout> <Label Text="{Binding Title}" /> <Label Text="{Binding Description}" /> </StackLayout> </DataTemplate> </BindableLayout.ItemTemplate> </StackLayout>If you want to set it by x:Name you can do like this.
BindableLayout.SetItemsSource(firstList, new List<string>());@ganesh96 Do you want to achieve the result like following GIF?
If so, just put two listview in
StackLayoutlike following code. For testing, I give set the same datasource for two listview<StackLayout> <ListView HeightRequest="500" ItemsSource="{Binding listtimes}" BackgroundColor="{Binding BackgroundColor}" > <ListView.ItemTemplate> <DataTemplate> <ViewCell> <Label Text="{Binding time, StringFormat='{}{0:H\\:mm}'}" FontSize="15" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/> </ViewCell> </DataTemplate> </ListView.ItemTemplate> </ListView> <ListView HeightRequest="500" ItemsSource="{Binding listtimes}" BackgroundColor="{Binding BackgroundColor}" > <ListView.ItemTemplate> <DataTemplate> <ViewCell> <Label Text="{Binding time, StringFormat='{}{0:H\\:mm}'}" FontSize="15" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/> </ViewCell> </DataTemplate> </ListView.ItemTemplate> </ListView> </StackLayout>