如何在Xamarin Forms中通过数据绑定实现图片网格布局

你现有代码的核心问题是手动硬编码了Grid的行列结构，仅放置了单个图片控件，没有绑定集合数据源，自然无法自动将图片填充到对应网格单元格。不需要手动给每个单元格塞图片、逐个配置Grid.Row/Grid.Column位置，用官方自带的网格布局组件配合数据模板即可快速实现，具体步骤如下：

实现思路 #

• 数据源使用ObservableCollection<T>存储图片项，集合新增、删除时UI会自动刷新，不要用普通List<T>做绑定源
• 用CollectionView的垂直网格布局模式实现自动排列，不需要手动编写Grid的行列定义，控件会自动按从左到右、从上到下的顺序填充单元格
• 你之前实现的PinchToZoomContainer捏合缩放组件可以直接放到数据模板中，保留单张图片的缩放交互能力

第一步：编写ViewModel与数据模型 #

using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using Xamarin.Forms;

namespace XamarinRocket.ViewModel
{
    // 单张图片的数据模型
    public class ImageItem
    {
        // 兼容本地图片名、网络图片URL、ImageSource对象
        public string ImageName { get; set; }
    }

    public class XamarinRocket2ViewModel : INotifyPropertyChanged
    {
        // 绑定用的图片集合
        public ObservableCollection<ImageItem> ImageList { get; set; } = new ObservableCollection<ImageItem>();

        public XamarinRocket2ViewModel()
        {
            // 测试数据，实际业务替换为你的数据加载逻辑即可
            for (int i = 1; i <= 6; i++)
            {
                ImageList.Add(new ImageItem { ImageName = $"test{i}.jpg" });
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged([CallerMemberName] string propertyName = "")
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

第二步：XAML布局代码 #

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:XamarinRocket.ViewModel;assembly=XamarinRocket"
             x:DataType="local:XamarinRocket2ViewModel" 
             x:Class="XamarinRocket.Views.XamarinRocket2Page">
    
    <ContentPage.Resources>
        <Style TargetType="Grid">
            <Setter Property="ColumnSpacing" Value="0" />
            <Setter Property="RowSpacing" Value="0" />
        </Style>
    </ContentPage.Resources>

    <ContentPage.Content>
        <!-- 3列垂直网格，自动滚动、自动排列元素 -->
        <CollectionView ItemsSource="{Binding ImageList}"
                        ItemsLayout="VerticalGrid, 3"
                        ItemSpacing="0">
            <CollectionView.ItemTemplate>
                <DataTemplate x:DataType="local:ImageItem">
                    <local:PinchToZoomContainer>
                        <local:PinchToZoomContainer.Content>
                            <Image Aspect="AspectFill"
                                   HeightRequest="120"
                                   Source="{Binding ImageName}" />
                        </local:PinchToZoomContainer.Content>
                    </local:PinchToZoomContainer>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </ContentPage.Content>
</ContentPage>

关键配置说明 #

• 列数调整：ItemsLayout="VerticalGrid, 3"中的数字3代表网格固定列数，需要改成2列、4列直接修改这个数值即可，行高会根据图片设置的HeightRequest自动适配
• 间距调整：ItemSpacing="0"对应你之前给Grid设置的0间距效果，需要留白直接修改这个数值即可
• 绑定逻辑：数据模板内的控件会自动匹配集合中单个ImageItem的上下文，直接给Image.Source绑定ImageName属性即可，不需要手动给每个图片指定所在行列
• 如果使用的是低版本Xamarin.Forms不支持CollectionView，可以用BindableLayout附加属性绑定普通Grid实现，逻辑类似，优先用CollectionView维护成本最低

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