Category / Section
How to add pull-to-refresh support in SfListView when SearchBar is placed on top of SfListView?
1 min read
When SearchBar or any view placed above the SfPullToRefresh control, then pulling action doesn’t work on SfListView because touches directly passed to SfListView instead of SfPullToRefresh control.
Hence you can overcome this problem by placing the SfListView inside the Grid and place that Grid as PullableContent of SfPullToRefresh as like below code example.
XAML
<ContentPage> <ContentPage.Content> <Grid RowSpacing="0" ColumnSpacing="0" Padding="0" Margin="0"> <Grid.RowDefinitions> <RowDefinition Height="50" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Grid.Behaviors> <local:SfListViewPullToRefreshBehavior /> </Grid.Behaviors> <SearchBar x:Name="filterText" Placeholder="Search" FontSize="14" /> <pulltoRefresh:SfPullToRefresh x:Name="pullToRefresh" Grid.Row="1" ProgressBackgroundColor="#428BCA" RefreshContentHeight="50" RefreshContentWidth="50" TransitionMode="Push" IsRefreshing="False"> <pulltoRefresh:SfPullToRefresh.PullableContent> <Grid> <syncfusion:SfListView x:Name="listView" AllowSwiping="True" AutoFitMode="Height"> </syncfusion:SfListView> </Grid> </pulltoRefresh:SfPullToRefresh.PullableContent> </pulltoRefresh:SfPullToRefresh> </Grid> </ContentPage.Content> </ContentPage>
Screenshot:
Click here to download the sample.