I have added a RefreshView for a CollectionView. After adding RefreshView, the CollectionView contents are not visible on the UI. The CollectionView contents are visible on the UI before adding RefreshView. Below is the code:
<?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"
BackgroundColor="White"
x:Class="NeedHelp.Pages.FriendDetailsPage">
<ContentPage.Content>
<StackLayout>
<Grid BackgroundColor="#eeeeee">
</Grid>
<ScrollView
x:Name="frienddetails_scrollview"
IsVisible="False"
Orientation="Vertical"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<StackLayout
Margin="15">
<Frame
BorderColor="#efefef"
BackgroundColor="White"
CornerRadius="5"
HasShadow="False"
Padding="5">
</Frame>
<Frame
BorderColor="#efefef"
Padding="3"
x:Name="map_layout"
Margin="0,5,0,0">
</Frame>
<Label
Margin="0,5,0,0"
x:Name="History_label"
Text="History"
TextColor="#424242"
HorizontalOptions="Center"
HorizontalTextAlignment="Center">
</Label>
<Frame
x:Name="Tab_layout"
BorderColor="#efefef"
Margin="0,5,0,0"
BackgroundColor="White"
HasShadow="False"
CornerRadius="5"
Padding="5">
</Frame>
<ListView
x:Name="historylistview"
SeparatorVisibility="None"
HasUnevenRows="True"
SelectionMode="None"
CachingStrategy="RecycleElement"
BackgroundColor="#ffffff">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout
Margin="0,0,0,10">
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.Footer>
<Label/>
</ListView.Footer>
</ListView>
<RefreshView
IsRefreshing="{Binding IsRefreshing}"
Command="{Binding RefreshCommand}">
<CollectionView
x:Name="MyTweetsList"
Margin="0,5,0,5"
ItemsSource="{Binding AllItems,Mode=TwoWay}"
RemainingItemsThreshold="0"
RemainingItemsThresholdReached="LoadMoreTweets"
HorizontalOptions="Fill">
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout
x:Name="Item"
HorizontalOptions="Fill"
VerticalOptions="FillAndExpand"
Orientation="Vertical">
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
<CollectionView.HeightRequest>
<OnIdiom x:TypeArguments="x:Double">
<OnIdiom.Phone>400</OnIdiom.Phone>
<OnIdiom.Tablet>600</OnIdiom.Tablet>
<OnIdiom.Desktop>400</OnIdiom.Desktop>
</OnIdiom>
</CollectionView.HeightRequest>
</CollectionView>
</RefreshView>
<Label
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand"
IsVisible="{Binding ComingSoonVisibility}"
HorizontalTextAlignment="Center"
Text="No Messages Yet."
x:Name="no_announcement_label"/>
</StackLayout>
</ScrollView>
<Grid
x:Name="tweetBox"
IsVisible="False"
Margin="0,0,0,10">
</Grid>
</StackLayout>
</ContentPage.Content>
</ContentPage>
public ICommand RefreshCommand
{
get
{
return new Command(async () =>
{
IsRefreshing = true;
LoadData();
IsRefreshing = false;
});
}
}
private bool _isRefreshing = false;
public bool IsRefreshing
{
get { return _isRefreshing; }
set
{
_isRefreshing = value;
OnPropertyChanged(nameof(IsRefreshing));
}
}
Do I need to add anything else to view the data on UI when adding RefreshView?
Yes, it is just the case as you said.
But as a workaround, you can add a StackLayout outside of RefreshView and set a special value for property HeightRequest.
You can refer to the following code:
<StackLayout BackgroundColor="YellowGreen" HeightRequest="200" VerticalOptions="Fill" >
<RefreshView BackgroundColor="Pink"
IsRefreshing="{Binding IsRefreshing}"
Command="{Binding RefreshCommand}">
<CollectionView
BackgroundColor="LightBlue"
x:Name="MyTweetsList"
Margin="0,5,0,5"
ItemsSource="{Binding Items,Mode=TwoWay}"
HorizontalOptions="Fill">
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout
x:Name="Item"
HorizontalOptions="Fill"
VerticalOptions="FillAndExpand"
Orientation="Vertical">
<Label Text="{Binding Name}" />
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
<CollectionView.HeightRequest>
<OnIdiom x:TypeArguments="x:Double">
<OnIdiom.Phone>400</OnIdiom.Phone>
<OnIdiom.Tablet>600</OnIdiom.Tablet>
<OnIdiom.Desktop>400</OnIdiom.Desktop>
</OnIdiom>
</CollectionView.HeightRequest>
</CollectionView>
</RefreshView>
</StackLayout>
Note:
1.And there is a known issue about this: CollectionView in RefreshView is not showing in VerticalStackLayout but is showing in StackLayout,so please use StackLayout not VerticalStackLayout.
2.Please remember to set property IsVisible of outer ScrollView to true, otherwise you won't see any of the views in it.
<ScrollView
x:Name="frienddetails_scrollview"
IsVisible="False"
</ScrollView>