EmptyView not visible in horizontal CollectionView in iOS

Question

I've already posted it on the xamarin forms github page, but i am wondering if anyone knows if there is a workaround.
Basically, in iOS, when you have a horizontal CollectionView, the Empty view does not display, but it works fine with a vertical collection view, or in android.

You can easily reproduce it:

   [Reactive] public ObservableCollection<string> Items { get; set; }  



   <CollectionView ItemsSource="{Binding Items}" HeightRequest="150">  
                                   <CollectionView.ItemsLayout>  
                                       <LinearItemsLayout ItemSpacing="10" Orientation="Horizontal" />  
                                   </CollectionView.ItemsLayout>  
     
                                   <CollectionView.Header>  
                                       <customViews:SectionTitle Title="Items" HorizontalOptions="FillAndExpand" />  
                                   </CollectionView.Header>  
                                   <CollectionView.EmptyView>  
                                       <Label Text="Sorry, no items." />  
                                   </CollectionView.EmptyView>  
                                   <CollectionView.ItemTemplate>  
                                       <DataTemplate>  
                                           <Label Text="{Binding .}" />  
                                       </DataTemplate>  
                                   </CollectionView.ItemTemplate>  
                               </CollectionView>  

Also, the header does not stretch for the whole page width:

Answer 1

Hello,​

Welcome to our Microsoft Q&A platform!

Yes, I met the same issue as yours, I notice you open a new issue in Xamarin GitHub about this issue. Please wait for PG's update

https://github.com/xamarin/Xamarin.Forms/issues/14079

Here is a workaround

You can add a Label and CollectionView in the same Gird, when the data is empty, the Label will appear, if not empty, the Label will disappear.

   <StackLayout Margin="20">  
            
           <Button Text="remove" Clicked="Button_Clicked"></Button>  
           <Button Text="add" Clicked="Button_Clicked_1"></Button>  
           <Grid>  
     
               <Label Grid.Row="0" Grid.Column="1" Text="Sorry, no items." IsVisible="{Binding IsEmpty}"  
                   />  
               <CollectionView Grid.Row="0" Grid.Column="0" ItemsSource="{Binding Items}" HeightRequest="150" >  
               <CollectionView.ItemsLayout>  
                   <LinearItemsLayout ItemSpacing="10" Orientation="Horizontal" />  
               </CollectionView.ItemsLayout>  
               <CollectionView.Header>  
                   <Label Text="Items" HorizontalOptions="FillAndExpand" />  
               </CollectionView.Header>  
                 
               <CollectionView.ItemTemplate>  
                   <DataTemplate>  
                       <Label Text="{Binding .}" />  
                   </DataTemplate>  
               </CollectionView.ItemTemplate>  
           </CollectionView>  
           </Grid>  
       </StackLayout>  

Here is layout background.

   public partial class MainPage : ContentPage  
       {  
           public ObservableCollection<string> Items { get; set; }  
     
           bool _isEmpty = false;  
           public bool IsEmpty  
           {  
               get  
               {  
                   return _isEmpty;  
               }  
     
               set  
               {  
                   if (_isEmpty != value)  
                   {  
                       _isEmpty = value;  
                       OnPropertyChanged("IsEmpty");  
     
                   }  
               }  
     
           }  
           public MainPage()  
           {  
               Items = new ObservableCollection<string>();  
     
               if (Items.Count==0)  
               {  
                   IsEmpty = true;  
               }  
               Items.CollectionChanged += Items_CollectionChanged;  
     
                
               BindingContext = this;  
               InitializeComponent();  
           }  
     
           private void Items_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)  
           {  
          var ts= sender as ObservableCollection<string>;  
     
               if (ts.Count==0)  
               {  
                   IsEmpty = true;  
               }  
               else  
               {  
                   IsEmpty = false;  
               }  
                 
     
     
           }  
     
           private void Button_Clicked(object sender, EventArgs e)  
           {  
               Items.Clear();  
     
           }  
     
           private void Button_Clicked_1(object sender, EventArgs e)  
           {  
               Items.Add("test");  
                
           }  
       }  
   }  

Here is running screenshot.

Best Regards,

Leon Lu

---

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.