.NET MAUI自定义不规则布局图片画廊（CollectionView+Grid）实现咨询

你的思路存在误区：当前的CollectionView配置会让每个GalleryItem都生成一个完整的Grid，这显然不是你要的「单个画廊里不同位置放置不同图片」的效果。下面给你两种可行的实现方式：

方式一：基于MVVM绑定的静态布局（推荐） #

这种方式无需动态创建控件，通过给数据模型添加布局属性，绑定到Grid的位置参数即可实现需求。

1. 完善数据模型 #

给GalleryItem新增布局相关属性，用来指定图片在Grid中的位置和跨度：

public class GalleryItem
{
    public string ImagePath { get; set; } // 图片路径/源
    public int Row { get; set; } // 所在行
    public int Column { get; set; } // 所在列
    public int RowSpan { get; set; } = 1; // 行跨度
    public int ColumnSpan { get; set; } = 1; // 列跨度
}

2. 准备数据源 #

在ViewModel里按照你的布局需求，为每个图片设置对应的位置参数：

public ObservableCollection<GalleryItem> GalleryItems { get; set; }

public YourViewModel()
{
    GalleryItems = new ObservableCollection<GalleryItem>
    {
        new GalleryItem { ImagePath = "image1.jpg", Row = 0, Column = 0, RowSpan = 2, ColumnSpan = 2 },
        new GalleryItem { ImagePath = "image2.jpg", Row = 0, Column = 2 },
        new GalleryItem { ImagePath = "image3.jpg", Row = 1, Column = 2 },
        new GalleryItem { ImagePath = "image4.jpg", Row = 2, Column = 0 },
        new GalleryItem { ImagePath = "image5.jpg", Row = 2, Column = 1, ColumnSpan = 2 }
    };
}

3. 修改XAML布局 #

使用ItemsControl（或CollectionView），指定其ItemsPanel为单个Grid，再通过ItemContainerStyle绑定每个图片的布局属性：

<ItemsControl ItemsSource="{Binding GalleryItems}">
    <!-- 指定整个画廊的Grid布局结构 -->
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Grid Margin="5">
                <Grid.RowDefinitions>
                    <RowDefinition Height="150"/>
                    <RowDefinition Height="150"/>
                    <RowDefinition Height="150"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="150"/>
                    <ColumnDefinition Width="150"/>
                    <ColumnDefinition Width="150"/>
                </Grid.ColumnDefinitions>
            </Grid>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <!-- 绑定每个图片的Grid位置参数 -->
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="ContentPresenter">
            <Setter Property="Grid.Row" Value="{Binding Row}"/>
            <Setter Property="Grid.Column" Value="{Binding Column}"/>
            <Setter Property="Grid.RowSpan" Value="{Binding RowSpan}"/>
            <Setter Property="Grid.ColumnSpan" Value="{Binding ColumnSpan}"/>
        </Style>
    </ItemsControl.ItemContainerStyle>

    <!-- 图片展示模板 -->
    <ItemsControl.ItemTemplate>
        <DataTemplate x:DataType="model:GalleryItem">
            <Image Source="{Binding ImagePath}" 
                   Aspect="AspectFill" 
                   Margin="2"
                   Background="#EEE"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

方式二：后台动态创建控件（适合复杂动态布局） #

如果你的布局需要根据图片数量动态调整行/列，可以在后台代码直接创建Image并添加到Grid中：

1. XAML定义空Grid #

<Grid x:Name="GalleryGrid" Margin="5"/>

2. 后台代码填充内容 #

public YourPage()
{
    InitializeComponent();
    SetupGallery();
}

private void SetupGallery()
{
    // 先定义Grid的行和列结构
    for (int i = 0; i < 3; i++)
    {
        GalleryGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(150) });
    }
    for (int i = 0; i < 3; i++)
    {
        GalleryGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(150) });
    }

    // 创建图片并设置对应位置
    AddImageToGrid("image1.jpg", 0, 0, 2, 2);
    AddImageToGrid("image2.jpg", 0, 2);
    AddImageToGrid("image3.jpg", 1, 2);
    AddImageToGrid("image4.jpg", 2, 0);
    AddImageToGrid("image5.jpg", 2, 1, 1, 2);
}

private void AddImageToGrid(string imagePath, int row, int column, int rowSpan = 1, int columnSpan = 1)
{
    var image = new Image
    {
        Source = imagePath,
        Aspect = AspectFill,
        Margin = new Thickness(2),
        Background = Color.FromHex("#EEE")
    };
    Grid.SetRow(image, row);
    Grid.SetColumn(image, column);
    Grid.SetRowSpan(image, rowSpan);
    Grid.SetColumnSpan(image, columnSpan);
    GalleryGrid.Children.Add(image);
}

关键说明 #

• 不推荐你原来的CollectionView用法：它的ItemTemplate是为每个数据项生成独立模板，会导致重复生成整个Grid，完全不符合画廊的布局需求。
• 优先选择MVVM绑定的方式：代码更易维护，也符合Xamarin.Forms的设计模式；动态创建控件适合布局规则不固定的场景。

内容的提问来源于stack exchange，提问作者Mr. H3xag0n