5

I have this code in my collectionView:

<RefreshView>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="60" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <CollectionView
            ItemsSource="{Binding Comments}"
            SelectionMode="Single">

            <CollectionView.ItemsLayout>
                <LinearItemsLayout Orientation="Vertical" ItemSpacing="5" />
            </CollectionView.ItemsLayout>

            <CollectionView.ItemTemplate>
                <DataTemplate x:DataType="model:Comment">
                    <Frame Style="{StaticResource CardView}" CornerRadius="10">                     
                        <Grid RowDefinitions="Auto, Auto, Auto, *" ColumnDefinitions="80, 250" ColumnSpacing="5">
                            ...
                        </Grid>
                    </Frame>
                </DataTemplate>
            </CollectionView.ItemTemplate>

            <CollectionView.EmptyView>
                <ContentView>
                    <StackLayout>
                        <Label
                            Text="Some text here"
                            HorizontalOptions="Fill"
                            HorizontalTextAlignment="Center" />
                    </StackLayout>
                </ContentView>
            </CollectionView.EmptyView>
        </CollectionView>

        <Button
                ...
        </Button>

        <Button
                ...
        </Button>
    </Grid>
</RefreshView>

Strange behaviour.... When I start the program with an empty collection, of course, I see.... nothing. No label.

While running, I change the text a little bit, it doesn't matter how, I insert a * at the end, for instance: Text="Some text goes here *" and, voila, suddenly my text shows correctly in the middle of my screen - the expected behavior !

I have tried both in the emulator and in the Android local device. The same behavior.

I have also tried to set the caption of that label at run time - no dice.

I have tried with a image instead of a label. Same thing happens.

Once I make a change in the contents of the EmptyView, no matter what the change, the EmptyView will show its contents for the remainder of my session. If I do not do that, it will stay forever blank.

Is there any solution to this ?

Thank you. Alex.

Alex
  • 157
  • 8
  • **1)** Just in case it matters, show the full declaration of the CollectionView. You can omit details inside ItemTemplate; I mainly want to see ALL the properties that you use. **2)** Also show any layouts it is nested inside (Stack/AbsoluteLayout or Grid or ?). Again, I'm interested in all properties, but not detailed contents. **3)** Might be worth testing with Hot Reload OFF, to see if that is causing some problem. – ToolmakerSteve Dec 21 '22 at 00:19
  • Steve, I have added the complete (but simplified) xaml code. Thank you – Alex Dec 21 '22 at 10:24
  • Looks good. Grid Row 0 `*` should tell CollectionView that it has plenty of height; I was thinking maybe it gets assigned zero height. Might be a Maui bug when CollectionView inside RefreshView. You could add a new issue at `github maui issues`, if you don't find a similar one already. Work-around might be to "hardcode" a height on row 0. Please test with some number there. If that works, then I'll try to come back and show how to set that dynamically in code behind, based on device height. – ToolmakerSteve Dec 21 '22 at 23:12
  • I have discovered something else BESIDES the oddity described above (where if I change the text of that label in the CollectionView.EmptyView while the page is showing, the text suddenly appears): If I navigate away to a page where I add my first element to my collection and come back to this page, that new element shows in the list, at is should. So far so good. Then I "Edit" this new collection element by deleting it, so now the count is again zero, and.... the text shows saying that my collection is empty. ... As it should have done in the first place ! Odd, indeed ! – Alex Dec 22 '22 at 16:42
  • Hmm. It sounds like what I suspected in the first place, which is that Maui somehow failed to give any "height" to CollectionView, until AFTER you do something, anything. Once it has some "room" vertically, it shows fine. If you give CollectionView different backgroundcolor than the page, does an area appear in that color? `` – ToolmakerSteve Dec 22 '22 at 22:08
  • Steve, I will try that, but what about my first comment, where if I change the text while the project is running in VS, from , say, AAAA (which does not show on page !) to BBBB, I can suddenly see the BBBB string ? Anyway, I will try the height idea first thing in the morning. PS. Can you reproduce my problem on your side ? – Alex Dec 23 '22 at 00:10
  • Sorry, I don't have time to attempt to reproduce. When you change text, that is while page is showing, right? I assume that, like any other change, triggers a re-layout. I don't really know why re-layout works better than the first layout. – ToolmakerSteve Dec 23 '22 at 00:45
  • 1
    I have found a "solution", so to speak. Stupid one. My ContentView has the name . So I have added the method protected override void OnNavigatedTo(NavigatedToEventArgs args) { base.OnNavigatedTo(args); MyEmptyView.HeightRequest = 100; } And voila, my emptyView now shows from the beginning !!! Very Odd ! – Alex Dec 29 '22 at 09:50

1 Answers1

2

This might be too late to be helpful in your case, but I was also struggling to get EmptyView to work correctly out of the box. Following your last comment, I was able to get the empty content to display by adjusting the CollectionView's height and width in the OnNavigatedTo event handler. (When I stepped through the code, I noticed that both properties had been initialized to -1.)

Unfortunately, this fix had the side effect of preventing my CollectionView from sizing correctly when I added items to my list.

As of today (3/24/23) there is still an open Github ticket regarding this issue:

Android - CollectionView EmptyView not visible #10819

Following another ticket, I was able to find a workaround that addresses the EmptyView issue by wrapping the CollectionView inside of a RefreshView. I didn't actually want refreshing functionality, so I disabled it like this:

<RefreshView IsEnabled="False">
     <CollectionView ItemsSource="{Binding FavoriteLocations}">
          <CollectionView.EmptyView>
               <ContentView>
                    . . .
               </ContentView>
          </CollectionView.EmptyView>
     </CollectionView>
</RefreshView>

Thankfully, the hack works even when the RefreshView is not enabled.

Edit (5/2/23): What I've discovered since this post is that the RefreshView hack does not work when it's placed inside of another scrollbar. I had multiple collections displayed within a single scroll, and this pattern completely broke my CollectionViews.

Ultimately, we scrapped all of our CollectionView elements and went with the following pattern instead:

<StackLayout BindableLayout.ItemsSource="{Binding MyList}">

    <BindableLayout.EmptyView>
        <Border BackgroundColor="White" Margin="0,5,0,0">
            <Label Text="No items are available." />
        </Border>
    </BindableLayout.EmptyView>

    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <!--Display collection items as normal here-->
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</StackLayout>

The EmptyView worked right out of the bag without any unnecessary workarounds. I would advise using BindableLayouts until MAUI works out all the bugs around CollectionViews.

MadHenchbot
  • 1,306
  • 2
  • 13
  • 27