question

Stesvis-5434 avatar image
0 Votes"
Stesvis-5434 asked LeonLu-MSFT answered

EmptyView not visible in horizontal CollectionView in iOS

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:

82855-image.png


dotnet-xamarinforms
image.png (85.4 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

LeonLu-MSFT avatar image
0 Votes"
LeonLu-MSFT answered

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.


5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.