MAUI: Listview inside Refreshview streaches fully and scrolls entire UI

122 Views Asked by At

An UI with Label, search bar, button and Listview are layouted vertically. This UI renders perfectly without Refreshview and I'm able to scroll the items in the list. But when these controls are placed inside Refreshview to perform pulltorefresh, listview stretches entirely and the entire UI is getting scrolled instead of list items. Setting heightRequest property to listview works perfectly again. But we cannot set Heightrequest to listview as we have various devices with different resolutions.

Similar code structure inside Refreshview works perfectly in Xamarin, but facing issues in MAUI (all platforms).

Anyone have options to resolve it?

Code snippet:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp1.MainPage"
             xmlns:ViewCells="clr-namespace:MauiApp1">
<RefreshView>
<ScrollView VerticalOptions="Fill" >
<Grid RowDefinitions="Auto, Auto, *" ColumnDefinitions="*" VerticalOptions="Fill">
<Label Grid.Row="0" Grid.Column="0" Text="Search Items"  />
<SearchBar Grid.Row="1" Grid.Column="0" />
<ListView  RowHeight="30" Grid.Row="2" Grid.Column="0" ItemsSource="{Binding listItems}" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<HorizontalStackLayout >
<Label Text="{Binding name}"  />
</HorizontalStackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</ScrollView>
</RefreshView>
</ContentPage>
1

There are 1 best solutions below

0
Sean He-MSFT On

ListView also supports pull to refresh functionality, You can set up refreshing events for ListView's RefreshCommand and IsRefreshing property, like the following code:

<ListView ItemsSource="{Binding listItems}"
      IsPullToRefreshEnabled="true"
      RefreshCommand="{Binding RefreshCommand}"
      IsRefreshing="{Binding IsRefreshing}">
<ListView.ItemTemplate>
    <DataTemplate>
        <ViewCell>
            ...
        </ViewCell>
    </DataTemplate>
</ListView.ItemTemplate>

For more details, you can refer to Pull to refresh.