.NET MAUI中CollectionView无法显示内容的问题求助

针对你遇到的问题，从代码和MAUI的运行逻辑来看，主要可以从以下几个方向排查解决：

1. 未设置ItemsSource（核心原因） #

CollectionView必须通过ItemsSource获取数据源才能生成列表项——哪怕你只是想显示固定数量的静态图片，也需要给它提供一个数据源。你的代码里完全缺失这部分配置，这是内容不显示的最直接原因。

解决方式： #

静态数据快速测试

直接在XAML中定义静态数据源，快速验证内容是否能显示：

<CollectionView BackgroundColor="Transparent" VerticalOptions="FillAndExpand">
    <CollectionView.ItemsSource>
        <!-- 生成3个空对象，对应3个列表项 -->
        <x:Array Type="{x:Type x:Object}">
            <x:Object />
            <x:Object />
            <x:Object />
        </x:Array>
    </CollectionView.ItemsSource>
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <!-- 给Image指定明确尺寸，避免因无尺寸导致不显示 -->
            <Image Source="traffic_light.png" WidthRequest="60" HeightRequest="60"/>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

绑定ViewModel数据源（正式开发方式）

如果是MVVM模式，确保页面绑定了ViewModel，且ViewModel中包含可观察集合：

• ViewModel代码示例：

using System.Collections.ObjectModel;

namespace MonkeyFinder.ViewModel;

public class TopicsViewModel
{
    // 定义可观察集合作为数据源，这里用object类型仅作示例，实际可替换为你的Model类型
    public ObservableCollection<object> Items { get; } = new();

    public TopicsViewModel()
    {
        // 初始化数据，添加3个项
        for (int i = 0; i < 3; i++)
        {
            Items.Add(new object());
        }
    }
}

• XAML中设置BindingContext并绑定数据源：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MonkeyFinder.TopicsPage"
             xmlns:viewmodel="clr-namespace:MonkeyFinder.ViewModel">

    <!-- 设置页面的BindingContext -->
    <ContentPage.BindingContext>
        <viewmodel:TopicsViewModel />
    </ContentPage.BindingContext>

    <CollectionView BackgroundColor="Transparent" 
                    VerticalOptions="FillAndExpand"
                    ItemsSource="{Binding Items}">
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Image Source="traffic_light.png" WidthRequest="60" HeightRequest="60"/>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

2. 图片资源配置问题 #

确认traffic_light.png的资源配置是否正确：

• 图片需放在项目的Resources/Images文件夹下
• 在属性窗口中，将图片的生成操作设置为MauiImage
• 注意文件名大小写（Android平台对文件名大小写敏感）
• 可以先用MAUI内置测试图片替换验证，比如<Image Source="dotnet_bot.png"/>，如果能显示则说明是你自己的图片资源有问题

3. 布局尺寸约束 #

给CollectionView添加VerticalOptions="FillAndExpand"，确保它能占满TabbedPage页面的可用空间，避免因布局压缩导致内容不可见；同时给Image指定明确的WidthRequest和HeightRequest，防止因控件无尺寸导致不显示。

内容的提问来源于stack exchange，提问作者jxalexan 56