Is there a solution to disable inner scrolling of Listview within a Scrollview?
Member ✭✭
Here is the layout I want to achieve:
I would like to scroll the entire screen instead of the listview.
I know bindable stacklayout is a good alternative as listview, but since I have to show group data, I didn't manage to make it work with bindable stacklayout.
What I tried but didn't work:
Try 1:
Put the listview and a boxview in the same grid. It did disable scrolling, but the listview won't be able to show full data in itemsource. It only shows the size of the screen.
Try 2 - custom renderer:
https://riptutorial.com/xamarin-forms/example/10022/custom-renderer-for-listview
neither ios nor android is working....
I found this post mentioned:
listView.HeightRequest = listView.RowHeight * ((Your List that you want to show in ListView).Count + 1);
But seems like I can only get the count of item(it will be dynamic) in viewmodel, then how to set listview's height?
So I think the best solution is still to disable to scroll of listview. Is there a workaround?
Best Answer
-
jezh
Member, Xamarin Team Xamurai
I think you could place your top controls in the ListView's header, then it can be scrolled with the list view's items.
For example:
<?xml version="1.0" encoding="UTF-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="GroupingSampleListView.GroupedListXaml"> <ContentPage.Content> <ListView x:Name ="lstView" IsGroupingEnabled="true" GroupDisplayBinding="{Binding LongName}" GroupShortNameBinding="{Binding ShortName}"> <ListView.Header> <StackLayout Margin="10"> <Frame BorderColor="Gray" CornerRadius="5" Padding="8"> <StackLayout> <Label Text="Card1" FontSize="Medium" FontAttributes="Bold" /> <BoxView Color="Gray" HeightRequest="2" HorizontalOptions="Fill" /> <Label Text="Frames can wrap more complex layouts to create more complex UI components, such as this card!"/> </StackLayout> </Frame> <Frame BorderColor="Gray" CornerRadius="5" Padding="8" Margin="0,10,0,10"> <StackLayout> <Label Text="Card2" FontSize="Medium" FontAttributes="Bold" /> <BoxView Color="Gray" HeightRequest="2" HorizontalOptions="Fill" /> <Label Text="Frames can wrap more complex layouts to create more complex UI components, such as this card!"/> </StackLayout> </Frame> </StackLayout> </ListView.Header> <ListView.ItemTemplate> <DataTemplate><TextCell Text="{Binding Name}" Detail = "{Binding Comment}" /></DataTemplate> </ListView.ItemTemplate> </ListView> </ContentPage.Content> </ContentPage>For more about this, you can check: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/listview/customizing-list-appearance#headers-and-footers
5
Answers
I think you could place your top controls in the ListView's header, then it can be scrolled with the list view's items.
For example:
<?xml version="1.0" encoding="UTF-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="GroupingSampleListView.GroupedListXaml"> <ContentPage.Content> <ListView x:Name ="lstView" IsGroupingEnabled="true" GroupDisplayBinding="{Binding LongName}" GroupShortNameBinding="{Binding ShortName}"> <ListView.Header> <StackLayout Margin="10"> <Frame BorderColor="Gray" CornerRadius="5" Padding="8"> <StackLayout> <Label Text="Card1" FontSize="Medium" FontAttributes="Bold" /> <BoxView Color="Gray" HeightRequest="2" HorizontalOptions="Fill" /> <Label Text="Frames can wrap more complex layouts to create more complex UI components, such as this card!"/> </StackLayout> </Frame> <Frame BorderColor="Gray" CornerRadius="5" Padding="8" Margin="0,10,0,10"> <StackLayout> <Label Text="Card2" FontSize="Medium" FontAttributes="Bold" /> <BoxView Color="Gray" HeightRequest="2" HorizontalOptions="Fill" /> <Label Text="Frames can wrap more complex layouts to create more complex UI components, such as this card!"/> </StackLayout> </Frame> </StackLayout> </ListView.Header> <ListView.ItemTemplate> <DataTemplate><TextCell Text="{Binding Name}" Detail = "{Binding Comment}" /></DataTemplate> </ListView.ItemTemplate> </ListView> </ContentPage.Content> </ContentPage>For more about this, you can check: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/listview/customizing-list-appearance#headers-and-footers
And there is an article about this, you can check it here:ListView Inside ScrollView Xamarin.Forms WorkAround
@jezh Thank you so much. There are trade-offs but save my life