如何在Xamarin Forms的ListView中实现每行仅显示一张图片？

嗨，我看你遇到的问题是ListView里所有图片挤在同一行里了，这是因为你把所有图片都实例化到同一个ViewCell里啦！ListView的每个ViewCell对应列表的一行，所以咱们得调整下实现逻辑，让每行对应单独一张图片。

第一步：创建图片数据模型 #

先定义一个简单的模型类，用来存储每张图片的路径：

public class ImageItem
{
    // 存储图片的文件名/路径
    public string ImagePath { get; set; }
}

第二步：准备数据源 #

在你的页面后台代码或者ViewModel里，创建一个图片集合作为ListView的数据源：

// 使用ObservableCollection方便自动更新UI
public ObservableCollection<ImageItem> ImageItems { get; set; }

// 在构造函数里初始化数据源
public YourPage()
{
    InitializeComponent();
    
    ImageItems = new ObservableCollection<ImageItem>
    {
        new ImageItem { ImagePath = "image1.png" },
        new ImageItem { ImagePath = "image2.png" },
        // 继续添加其他图片...
    };
    
    // 将页面绑定上下文设为自身（如果用ViewModel就设为ViewModel实例）
    BindingContext = this;
}

第三步：配置ListView的ItemTemplate #

这是核心部分，让每个ViewCell只加载一张绑定的图片：

方式1：XAML实现（推荐）

<ListView ItemsSource="{Binding ImageItems}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <!-- 每个ViewCell只放一张图片，绑定到ImageItem的ImagePath属性 -->
                <Image Source="{Binding ImagePath}" 
                       HeightRequest="50" 
                       HorizontalOptions="Start" />
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

方式2：纯代码实现

var listView = new ListView();
listView.ItemsSource = ImageItems;

// 为每个数据项生成一个仅包含单张图片的ViewCell
listView.ItemTemplate = new DataTemplate(() =>
{
    var image = new Image 
    { 
        HeightRequest = 50, 
        HorizontalOptions = LayoutOptions.Start 
    };
    // 绑定图片源到数据模型的ImagePath属性
    image.SetBinding(Image.SourceProperty, "ImagePath");
    
    return new ViewCell { View = image };
});

额外提醒 #

别忘了确保你的图片文件在各平台的生成设置正确：

• Android：将图片放在Resources/drawable文件夹，生成操作设为AndroidResource
• iOS：将图片放在Resources文件夹，生成操作设为BundleResource

这样调整后，ListView就会根据数据源里的每个图片项生成一行，每行只显示对应的一张图片啦！

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