CollectionView：EmptyView 内容未显示答案

【问题标题】：CollectionView: EmptyView content not shownCollectionView：EmptyView 内容未显示
【发布时间】：2022-01-13 02:58:03
【问题描述】：

我在使用列表视图的页面显示中有一个错误，所以我开始从列表视图迁移到集合视图，但是... 这是带有集合视图的 XAML 代码，我不知道为什么当 ItemSource 没有任何数据时，空视图不显示。

<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>

这是它在集合视图中的显示方式（空）。我用 TEST 加了一个标签

这是必须的

【问题讨论】：

你代码中的 bindingContext 是什么？你用你的视图模型设置了 bindingContext 吗？
嗨，是的，这在 listview 之前工作得很好，所以也许不存在问题。在页面源中我有： ObservationCloseListViewModel ViewModel = new ObservationCloseListViewModel();在构造函数中，我分配了视图模型 public ObservationCloseListPage() { InitializeComponent(); BindingContext = ViewModel; }
出于测试目的，考虑将页面简化到最低限度以测试此症状。例如，collectionview 位于具有IsVisible="{Binding ShowContent}" 的stacklayout 内。如果您删除它（或将其替换为IsVisible="True"），它会变得可见吗？另外，您已验证列表不为空时项目是否正确显示？ VS 输出窗格是否包含任何相关的错误或警告？

标签： xamarin.forms

【解决方案1】：

您遇到问题的根本原因在于使用CollectionView.Header。但这不是你的错。是CollectionView的bug：使用Header时不会出现EmptyView。它已经报告给 Xamarin.Forms 开发人员。您可以跟踪进度here。

【讨论】：

嗨@ElifasTeQ，你是对的，我在没有标题的情况下测试它，它可以工作，谢谢！

【解决方案2】：

我做了一些实验。如果{Binding ShowContent} 未能返回True，我可以让这种症状发生的唯一方法。

我相信问题不在于 CollectionView。它是周围 StackLayout 的可见性。

验证：

将IsVisible="{Binding ShowContent}" 替换为IsVisible="True"。

如果这导致 EmptyView 出现，请检查以下可能的原因：

绑定上下文。（在评论中，您展示了看起来正确的代码。仔细检查。）
正确声明 ShowContent，以通知 XAML 更改：

    // Start "true", so InitializeComponent will begin with it there.
    private bool _showContent = true;
    public bool ShowContent {
        get => _showContent;
        set {
            _showContent = value;
            OnPropertyChanged();
        }
    }

如果您有设置ShowContent 的代码，请确认您已将其设置为true。

【讨论】：