CollectionView.EmptyView is not showing despite count of items is 0.

Gathered from the documentation:

EmptyView, of type object, the string, binding, or view that will be displayed when the ItemsSource property is null, or when the collection specified by the ItemsSource property is null or empty. The default value is null.

So, im working on a Xamarin Forms app which only has the Android Module right now, I wanted to display a message like the example shown in the documentation by just providing the value of EmptyView like this:

EmptyView="No combos to display. Why don't you add some?"

This is added in the following code:

<CollectionView ItemsSource="{Binding ComboList}" 
               IsGrouped="True" SelectionMode="None"
               EmptyView="No combos to display. Why don't you add some?"
                           RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
                           RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}">
                    <CollectionView.Header>
                        <StackLayout>
                            <Label Text="{xt:Translate character_facing_right}"
                                   Margin="{StaticResource HeaderLabelMargin}"
                                   FontSize="Medium"
                                   HorizontalOptions="Center"/>
                        </StackLayout>
                    </CollectionView.Header>
                    <CollectionView.GroupHeaderTemplate>
                         ...
                    </CollectionView.GroupHeaderTemplate>
                    <CollectionView.ItemTemplate>
                        <DataTemplate x:DataType="models:ComboView">
                            <controls:ComboItem Title="{Binding Title}"
                                                Combo="{Binding Combo}"
                                                IsStock="{Binding IsStock}"
                                                Type="{Binding Type}"
                                                UniqueId="{Binding UniqueId}"
                                                Comment="{Binding Comment}"/>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                    <CollectionView.Footer>
                        ...
                    </CollectionView.Footer>
                </CollectionView>

However, when testing, i can see the header of my list but not the EmptyView, even though the list is empty. What am i missing?

Best Answer

Answers

  • rozman50rozman50 Member ✭✭

    try commenting out header and footer and see, if it works then.
    It might be this bug (https://github.com/xamarin/Xamarin.Forms/issues/8326)

  • albertoha94albertoha94 Member ✭✭

    @rozman50 It seems it is this bug, i tried commenting the header and footer and it showed up.
    Ill have to keep track of it and post an answer to this once its solved.

  • JarvanJarvan Member, Xamarin Team Xamurai

    I created a basic demo to reproduce the issue and it works on my side. EmptyView is displayed when ItemsSource is null or empty. I tested the code on Xamarin.Forms 4.3.0.908675.

    <CollectionView ItemsSource="{Binding lists}"
                    EmptyView="No combos to display. Why don't you add some?">
        <CollectionView.Header>
            <StackLayout>
                <Label Text="Character_facing_right"
                    FontSize="Medium"
                    HorizontalOptions="Center"/>
            </StackLayout>
        </CollectionView.Header>
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Label Text="{Binding content}"/>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
    

    page.xaml.cs

    public partial class VerticalListGroupingPage : ContentPage
    {
        public VerticalListGroupingPage()
        {
            InitializeComponent();
            //BindingContext = new model_list { lists = new List<model> { new model { content = "content_1"} } };
            BindingContext = new model_list();
        }
    }
    
    public class model_list
    {
        public List<model> lists { get; set; }
    }
    
    public class model
    {
        public string content { get; set; }
    }
    

  • albertoha94albertoha94 Member ✭✭

    @Jarvan Hey jarvan, thx for the example.
    Ok, I dida downgrade from Xamarin.Forms package 4.3.0.947036 to the version you had, I also reduced my code to match as most as possible to what you had in your example yet my problem persists:

    <CollectionView ItemsSource="{Binding ComboList}"
                                    IsGrouped="True"
                                    EmptyView="No combos to display"
                                    RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
                                    RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}">
                        <CollectionView.Header>
                            <StackLayout>
                                <Label Text="{xt:Translate character_facing_right}"
                                       FontSize="Medium"
                                       HorizontalOptions="Center"/>
                            </StackLayout>
                        </CollectionView.Header>
                        <CollectionView.ItemTemplate>
                            <DataTemplate>
                                <Label Text="{Binding Title}" />
                            </DataTemplate>
                        </CollectionView.ItemTemplate>
                    </CollectionView>
    

    I still see the header when the item is empty:

    Im putting an item WITH data for comparison:

    I also tried to use Collection.EmptyView with a custom template to see if something changed, but it didnt.

                        <CollectionView.EmptyView>
                            <StackLayout HeightRequest="50" BackgroundColor="Green">
                                <Label Text="{xt:Translate no_combos}"
                                       Margin="{StaticResource HeaderLabelMargin}"
                                       FontSize="Medium"
                                       HorizontalOptions="Center"/>
                            </StackLayout>
                        </CollectionView.EmptyView>
    

    I then also went back to the new version, tried both the string and the template, and it still shows the header only :neutral:
    I double checked my data and i really dont have any data in the list:

    This is the way im setting my list in the viewmodel. I don't know what could be going wrong.

            IList<ComboCategoryView> comboList = new List<ComboCategoryView>();
            public IList<ComboCategoryView> ComboList
            {
                get { return comboList; }
                private set { SetProperty(ref comboList, value); }
            }
    
  • JarvanJarvan Member, Xamarin Team Xamurai

    Here is a basic sample file, you can test on your side.

  • albertoha94albertoha94 Member ✭✭

    @Jarvan Thanks for the demo.
    I dont know if this is happening on my end only, but when I tried Page1 in your demo and commented CreateAnimalsCollection(); in ComboCategoryViewDemo. The issue repeated again.

    Before change:

    After comment:

Sign In or Register to comment.