CODEWITHSUNDEEP
xamarin.formsmaui
Jonathan A
Jonathan A

Reputation: 40

CollectionView: EmptyView content not shown

I have a bug in the page display using a listview so I started migrating from listview to collectionview. This is the XAML code with the collection View. I don't know why when the ItemSource doesn't have any data. The empty view is not shown.

<StackLayout Style="{StaticResource PageLayout}">
        <StackLayout VerticalOptions="CenterAndExpand" IsVisible="{Binding LoadingIndicator}">
            <ActivityIndicator IsRunning="True" VerticalOptions="Center" HorizontalOptions="Center"/>
        </StackLayout>
        <StackLayout VerticalOptions="FillAndExpand" IsVisible="{Binding ShowContent}">
            <CollectionView ItemsSource="{Binding Items}" VerticalOptions="FillAndExpand" SelectionMode="Single" SelectionChanged="CollectionView_SelectionChanged" Style="{StaticResource CollectionViewChecklistDefault}">
                <CollectionView.Header>
                    <StackLayout HeightRequest="5">
                    </StackLayout>
                </CollectionView.Header>
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                            <Grid ColumnSpacing="0" RowSpacing="0" Margin="0" Padding="0">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="25" />
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="40" />
                                    <RowDefinition Height="10" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="37*" />
                                    <ColumnDefinition Width="33*" />
                                    <ColumnDefinition Width="30*" />
                                </Grid.ColumnDefinitions>
                                <Label Grid.Row="0" Grid.Column="1" Text="{Binding APP_ID}" IsVisible="False"/>
                                <BoxView Grid.Row="0" Grid.Column="0" Grid.RowSpan="8" Grid.ColumnSpan="3" Style="{StaticResource ListBox}"/>
                                <Image Grid.Row="0" Grid.Column="0" Aspect="AspectFit" Style="{StaticResource ListImage}">
                                    <Image.Source>
                                        <FontImageSource Glyph="&#xf46d;" FontFamily="FontAwesomeSolid" Color="#343a40"></FontImageSource>
                                    </Image.Source>
                                </Image>
                                <Label Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Text="{Binding OBSERVATION_TYPE_NAME}" Style="{StaticResource ListLabelBold}"/>
                                <Label Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" Style="{StaticResource PreviewLabel}">
                                    <Label.FormattedText>
                                        <FormattedString>
                                        <Span Text="{Binding Traductions[DATE], Source={RelativeSource AncestorType={x:Type viewModel:ObservationCloseListViewModel}}, StringFormat='\{0}:'}"  FontAttributes="Bold" TextTransform="Uppercase" TextColor="DarkGray"/>
                                            <Span Text="{Binding OBSERVATION_DATE, StringFormat=' \{0:dd MMM yyyy}'}"/>
                                        </FormattedString>
                                    </Label.FormattedText>
                                </Label>
                                <Label Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3" Style="{StaticResource PreviewLabel}">
                                    <Label.FormattedText>
                                        <FormattedString>
                                        <Span Text="{Binding Traductions[COMPANY], Source={RelativeSource AncestorType={x:Type viewModel:ObservationCloseListViewModel}}, StringFormat='\{0}:  '}"  FontAttributes="Bold" TextTransform="Uppercase" TextColor="DarkGray"/>
                                            <Span Text="{Binding COMPANY_NAME, StringFormat=' \{0}'}"/>
                                        </FormattedString>
                                    </Label.FormattedText>
                                </Label>
                                <Label Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3" Style="{StaticResource PreviewLabel}">
                                    <Label.FormattedText>
                                        <FormattedString>
                                            <Span Text="{Binding Traductions[WORKPLACE], Source={RelativeSource AncestorType={x:Type viewModel:ObservationCloseListViewModel}}, StringFormat='\{0}:  '}"  FontAttributes="Bold" TextTransform="Uppercase" TextColor="DarkGray"/>
                                            <Span Text="{Binding WORKPLACE_NAME, StringFormat=' \{0}'}"/>
                                        </FormattedString>
                                    </Label.FormattedText>
                                </Label>

                                <Label Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="3" Style="{StaticResource PreviewLabel}">
                                    <Label.FormattedText>
                                        <FormattedString>
                                            <Span Text="{Binding Traductions[SECTOR], Source={RelativeSource AncestorType={x:Type viewModel:ObservationCloseListViewModel}}, StringFormat='\{0}:  '}"  FontAttributes="Bold" TextTransform="Uppercase" TextColor="DarkGray"/>
                                            <Span Text="{Binding SECTOR_NAME, StringFormat=' \{0}'}"/>
                                        </FormattedString>
                                    </Label.FormattedText>
                                </Label>

                                <Label Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="3" Style="{StaticResource PreviewLabel}">
                                    <Label.FormattedText>
                                        <FormattedString>
                                            <Span Text="{Binding Traductions[FOLLOW_UP_DEPARTMENT], Source={RelativeSource AncestorType={x:Type viewModel:ObservationCloseListViewModel}}, StringFormat='\{0}:  '}"  FontAttributes="Bold" TextTransform="Uppercase" TextColor="DarkGray"/>
                                            <Span Text="{Binding FOLLOW_DEPARTMENT_NAME, StringFormat=' \{0}'}"/>
                                        </FormattedString>
                                    </Label.FormattedText>
                                </Label>
                                <Label Grid.Row="6" Grid.Column="0" Grid.ColumnSpan="3" Style="{StaticResource PreviewLabel}">
                                    <Label.FormattedText>
                                        <FormattedString>
                                            <Span Text="{Binding Traductions[DESCRIPTION], Source={RelativeSource AncestorType={x:Type viewModel:ObservationCloseListViewModel}}, StringFormat='\{0}:  '}"  FontAttributes="Bold" TextTransform="Uppercase" TextColor="DarkGray"/>
                                            <Span Text="{Binding OBSERVATION_DESCRIPTION, StringFormat=' \{0}'}"/>
                                        </FormattedString>
                                    </Label.FormattedText>
                                </Label>
                                <Label Grid.Row="7" Grid.Column="0" Grid.ColumnSpan="3"  Text="{Binding Traductions[CLOSE_OBSERVATION], Source={RelativeSource AncestorType={x:Type viewModel:ObservationCloseListViewModel}}}" Style="{StaticResource ListValueGreenEnd}" />
                                <Image Grid.Row="7" Grid.Column="2" Aspect="AspectFit" Style="{StaticResource ListImageArrow}">
                                    <Image.Source>
                                        <FontImageSource Glyph="&#xf138;" FontFamily="FontAwesomeSolid" Color="#7ca04b"></FontImageSource>
                                    </Image.Source>
                                </Image>
                            </Grid>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
                <CollectionView.EmptyView>
                        <StackLayout VerticalOptions="CenterAndExpand">
                            <Label Text="{Binding Traductions[THERE_ARE_NO_OBSERVATIONS], Source={RelativeSource AncestorType={x:Type viewModel:ObservationCloseListViewModel}}}" Style="{StaticResource ListNotItemsFound}"/>
                            <Label Text="TEST"/>
                        </StackLayout>
                </CollectionView.EmptyView>
            </CollectionView>
        </StackLayout>
    </StackLayout>

This is how it shows with collection view (empty). I put an extra label with TEST. enter image description here

This is how it has to be. enter image description here

Upvotes: 2

Views: 2768

Answers (3)

user1623521
user1623521

Reputation: 338

As for me, it started working when I stopped using the sub-tag <CollectionView.EmptyView> and started using the EmptyView= attribute for the <CollectionView> tag.

Upvotes: 0

ElifasTeQ
ElifasTeQ

Reputation: 46

The root cause of the issue you faced lays in usage of CollectionView.Header. But that's not your mistake. It is a bug of CollectionView: EmptyView does not appear when Header is used. It had been already reported to Xamarin.Forms developers. You can track the progress here.

Upvotes: 3

ToolmakerSteve
ToolmakerSteve

Reputation: 21213

I did some experiments. The only way I can get this symptom to happen is if {Binding ShowContent} fails to return True.

I believe the problem isn't the CollectionView. Its the visibility of the surrounding StackLayout.

To verify:

  • Replace IsVisible="{Binding ShowContent}" with IsVisible="True".

If that makes EmptyView show up, then check these possible causes:

  • BindingContext. (In a comment, you show what looks like correct code. Double-check.)

  • Proper declaration of ShowContent, to inform XAML of changes:

    // Start "true", so InitializeComponent will begin with it there.
    private bool _showContent = true;
    public bool ShowContent {
        get => _showContent;
        set {
            _showContent = value;
            OnPropertyChanged();
        }
    }
  • If you have code that sets ShowContent, verify that you have set it to true.

Upvotes: 1

Related Questions