I have a Listview which is setup as per below. There are about 20-30 items in the source, however the listview is keep showing the same 3 items when scrolling (i.e. 20 rows are shown, but the items are the same 3 ones).
If I remove the caching strategy, then the items appear OK, however it then becomes super slow to scroll. Any ideas why this is and how to solve?
Seeing this issue on both android and iOS on the device and simulator
<ListView
BackgroundColor="White"
ItemsSource="{Binding SearchResults}"
HasUnevenRows="True"
SeparatorVisibility="None"
HeightRequest="3000"
CachingStrategy="RecycleElement">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<custom:SearchResultsView Item="{Binding }" Margin="0,20" >
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I have also tried with CollectionView and same issue
<CollectionView BackgroundColor="White" ItemsSource="{Binding SearchResults}">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="5">
<custom:SearchResultsView Item="{Binding }" Margin="0,20" >
</custom:SearchResultsView>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
Related
I have a slight problem with XamarinForms, which I am fairly new with.
I do have a grid with several Items in it (ListView, Label, Stacklayout, Listview).
I thought setting RowDefinitions = "Auto" for each row, would make the whole Page scrollable.
But instead I have a scrollbar on each individual listView.
I have added a snippet of my code with one of the listViews inside.
How do I get the listViews shown in their full size and the scrollbar be for the whole page?
I have already tried a scrollview instead of the grid, but it did not work.
Picture of Content in Emulator
Picture of Whole Page
Xamarin Forms:
<Grid
Padding="10"
RowDefinitions="Auto,Auto,Auto,Auto"
ColumnDefinitions="*"
>
<Label Padding="20" FontAttributes="Bold" FontSize="40" Text="{Binding DisplayName}" Grid.Row="0"/>
<ListView ItemsSource="{Binding News}"
HasUnevenRows="True"
IsPullToRefreshEnabled="False"
Grid.Row="1">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="10">
<Label Text="{Binding DateTimeString}"/>
<Label Text="{Binding Text}" MaxLines="4"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.Header>
<Grid ColumnDefinitions="*,Auto"
Padding="10"
VerticalOptions="Center">
<Label Text="News"
Grid.Column="0"
FontAttributes="Bold"
FontSize="32"/>
<Label Text="mehr Anzeigen"
Grid.Column="1"
HorizontalTextAlignment="End"/>
</Grid>
</ListView.Header>
</ListView>
You can put the items in ScrollView which is capable of scrolling its content.
refer to: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/scrollview
Is it possible to implement auto-scrolling when a user drags an item to the edge of visibible part of a CollectionView? Or StackLayout. Look's like there is no way to do this out of the box and no respective nuget packages exist. I've tried to implement this myself, but couldn't figure out which methods to override and for which of the entities. DragGestureRecognizer seemed to be promising, but still- no luck.
Here are the codes I used,drag one item to the edge and the list will scroll until reach the last item.
<ContentPage.BindingContext>
<local:PeopleViewModel/>
</ContentPage.BindingContext>
<StackLayout>
<Frame BackgroundColor="AliceBlue">
<CollectionView x:Name="mycol" ItemsSource="{Binding pgs}">
<CollectionView.ItemTemplate>
<DataTemplate>
<Frame CornerRadius="10" BackgroundColor="LightPink">
<Label Text="{Binding Name}" FontSize="Large">
<Label.GestureRecognizers>
<DragGestureRecognizer DragStarting="OnDragstarting"/>
</Label.GestureRecognizers>
</Label>
</Frame>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</Frame>
</StackLayout>
</ContentPage>
My listview scroll is working smooth,but after enable PullToRefresh to True then listview scroll from bottom to top is not properly working.
top to bottom scroll is working smothly but bottom to top scroll lags(stop) found.
here is my listview
<ListView x:Name="orderList" ItemsSource="{Binding Orders}" HasUnevenRows="True" SeparatorColor="Gray"
SeparatorVisibility="None" IsGroupingEnabled="True" GroupDisplayBinding="{Binding OrdDate}"
CachingStrategy="RecycleElement" ItemSelected="OrderList_ItemSelected"
ItemAppearing="OrderList_ItemAppearing" IsPullToRefreshEnabled="True" RefreshCommand="{Binding PullRefreshOrders}" IsRefreshing="{Binding IsLoadingOrders}">
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="15">
<Label Text="{Binding OrdDate}" TextColor="#3c454c" FontAttributes="Bold"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<cv:OrderContentView/>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
How to solve this issue?
this issue happen with my in listview and i change the PullToRefresh by syncfusion
https://help.syncfusion.com/xamarin/sflistview/pull-to-refresh
and it's work fine with me
I'm making a simple listview and got a problem with iOS header - I want to make it transparent, but the problem is, that listview items are sliding under heading. What I want to achieve, is that heading will slide up with listview items.
This is how it looks now
And this is how current code looks like:
<ListView x:Name="SingleBeanView"
ItemsSource="{Binding Beans}"
IsGroupingEnabled="true"
Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"
BackgroundColor="Transparent">
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell ios:Cell.DefaultBackgroundColor="Transparent" Height="52">
<Label Text="{Binding Heading}" TextColor="{StaticResource LightTextColor}" FontSize="Large" HorizontalOptions="Start" VerticalOptions="Start" Margin="15,10,0,0"/>
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout BackgroundColor="Transparent" Orientation="Vertical">
<StackLayout Orientation="Horizontal">
<Label Text="{Binding Field1}"/>
<Label Text="{Binding Field2}"/>
<Label Text="{Binding Field3}"/>
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Unfortunately , if using GroupHeader in ListView , this can not achieve your want.This effect is designed by Apple . If want to modify ,this need more things and time to do about customing listview.
Here is a solution for native ios, you can have a try with custom renderer to do.However, after testing this can not work in Xamarin.
So the last way maybe need custom cell to realize it--Puttinng header in Cell . Then That means you can not use GroupHeaderTemplate.
Another discussion.
Im working on styling up my ListView. In my ItemTemplate are only two Labels in a Stacklayout with Vertical Orientation. As you can see in the Picture there are some spacing between the two Labels. I dont want this space and have the Labels direct under each other. Has someone an advice?
ListView with Label-Background
<ListView x:Name="ItemList"
ItemSelected="ItemList_ItemSelected"
HasUnevenRows="True"
IsGroupingEnabled="true"
GroupDisplayBinding="{Binding LongName}"
GroupShortNameBinding="{Binding ShortName}"
SeparatorVisibility="None">
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout Orientation="Horizontal"
BackgroundColor="{StaticResource LightGreyColor}"
Padding="20,10,0,10">
<Label Text="{Binding LongName}"
Style="{DynamicResource DateLabel}"/>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout Orientation="Vertical"
Padding="20,10,0,10">
<Label Text="{Binding Name}"
Style="{DynamicResource ItemTitleLabel}"
BackgroundColor="Bisque"/>
<Label Text="{Binding Description}"
Style="{DynamicResource SubTitleLabel}"
BackgroundColor="Bisque"/>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I remember that default spacing between items in StackLayout (and between rows in a Grid) is more than 0. If you want no space between items you can simply add Spacing="0" attribute in your StackLayout.
StackLayout has a default Spacing of 10, you need to set it to 0 if you don't want the spacing between items.